How to use cssjanus - 4 common examples

services,
).on( initEvents.saved, () => {
	console.info( 'Application event: saved' );
} ).on( initEvents.cancel, () => {
	console.info( 'Application event: canceled' );
} ).on( initEvents.reload, () => {
	console.info( 'Application event: reload' );
} );

// The EventEmittingButton uses the `dir` attribute set at the root level of the page
// to determine the style of some buttons (e.g. back button)
const direction = getOrEnforceUrlParameter( 'dir', 'ltr' ) as string;
( document.querySelector( 'html' ) as HTMLElement ).setAttribute( 'dir', direction );
if ( direction === 'rtl' ) {
	for ( const style of document.querySelectorAll( 'style' ) ) {
		style.innerHTML = cssjanus.transform( style.innerHTML );
	}
}

infiles.forEach(function(infile) {
    
    // Check for files with .css extension
    // but ignore files that we've already converted
    if (!infile.endsWith('-rtl.css')) {
        // Set up output filename to be the same as the input, but ending in -rtl.css.
        var outfile = infile.replace(new RegExp(/^(.+)\.css$/), '$1-rtl.css');
        if ( typeof outfile !== 'undefined' && outfile) {
        
            // Read left to right css, create right to left css
            var ltrcss = fs.readFileSync(infile, 'utf8');
            var rtlcss = cssjanus.transform(ltrcss);
            
            // Write right to left css to file
            fs.writeFileSync(outfile, rtlcss, 'utf8');
        };
    };
});

app.get('/style-rtl.css', (req, res) =>
  res.type('css').send(cssjanus.transform(fs.readFileSync(rpath('www/style.css')).toString(), false, true)))

/**
 * Popups helpers
 */
import MODELS from '../mocks/models';
import grid from '../helpers/grid';
import createPopup from '../helpers/createPopup';

/**
 * SVG Assets
 */
import pointerMaskSVG from '../../src/ui/pointer-mask.svg';

const popupsCSS = {
		ltr: PopupsCSSString,
		rtl: cssjanus.transform( PopupsCSSString.toString() )
	},
	KNOBS_PARAM = { knobs: {
		escapeHTML: false
	} },
	PopupsCSSElementId = 'PopupsCssElement';

/**
 * Inserts the Popups CSS string into the  of the document manually.
 * @param {string} CSSString
 */
function insertPopupsStyleElement() {
	const PopupsCSSElement = document.createElement( 'style' ),
		customCSSElement = document.head.querySelector( 'style:last-of-type' );

	PopupsCSSElement.type = 'text/css';
	PopupsCSSElement.id = PopupsCSSElementId;