CSSJanus

Convert CSS stylesheets between left-to-right and right-to-left.

Based the original Google project.

See Interactive demo.

Install

npm install cssjanus

Usage

var cssjanus = require( 'cssjanus' );
var rtlCss = cssjanus.transform( ltrCss );

transform( string css [, Object options ] ) : string

Parameters:

• css Stylesheet to transform
• options: Options object (optional)
  • options.transformDirInUrl (Boolean): Transform directions in URLs, such as ltr to rtl. Default: false.
  • options.transformEdgeInUrl (Boolean): Transform edges in URLs, such as left to right. Default: false.

Preventing flipping

If a rule is not meant to be flipped by CSSJanus, use a /* @noflip */ comment to protect the rule.

.rule1 {
  /* Will be converted to margin-right */
  margin-left: 1em;
}
/* @noflip */
.rule2 {
  /* Will be preserved as margin-left */
  margin-left: 1em;
}

Integrations

• css parser: rtl-converter.
• Grunt: grunt-cssjanus.
• PHP port: php-cssjanus.
• Gulp: gulp-cssjanus.
• PostCSS: postcss-cssjanus.
• styled-components: styled-components-rtl.
• Stylis: stylis-plugin-rtl.
• webpack: cssjanus-webpack, webpack-arabic-css.

Who uses CSSJanus?

• Wikimedia Foundation, the non-profit behind Wikipedia and other free knowledge projects. Used as part of MediaWiki and VisualEditor on Wikipedia, and more.
• WordPress, a free and open-source content management system. Used for the interface of wp-admin and the default yearly themes.
• styled-components, an ecosystem of visual primitives. Its RTL support is powered by CSSJanus.
• AdminLTE, an open-source admin dashboard and control panel theme. See AdminLTE-RTL.

See also

• Interactive demo

Contribute

• Issue tracker: https://phabricator.wikimedia.org/tag/cssjanus/
• Source code: https://gerrit.wikimedia.org/g/mediawiki/libs/node-cssjanus
• Submit patches via Gerrit: https://www.mediawiki.org/wiki/Developer_account