cssjanus / cssjanus

↔️ Convert CSS stylesheets between left-to-right and right-to-left.             Made by Wikimedia.

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.
• 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