PostCSS Janus

PostCSS plugin to create RTL rules using CSSJanus.

Install

npm

nmp install postcss-janus --save-dev

yarn

yarn add postcss-janus -d

Examples

input

.example {
  background-color: #FFF;
  background-image: url("/folder/subfolder/icons/ltr/chevron.png");
  border-radius: 0 2px 0 8px;
  color: #666;
  padding-right: 20px;
  text-align: left;
  transform: translate(-50%, 50%);
  width: 100%;
}

output

.example {
  background-color: #FFF;
  background-image: url("/folder/subfolder/icons/ltr/chevron.png");
  border-radius: 0 2px 0 8px;
  color: #666;
  padding-right: 20px;
  text-align: left;
  transform: translate(-50%, 50%);
  width: 100%;
}
.rtl .example  {
    border-radius: 2px 0 8px 0;
    padding-right: unset;
    padding-left: 20px;
    text-align: right;
    transform: translate(50%, 50%);
}

Basic usage

Using postcss JavaScript API

const postcss = require('postcss');
const cssJanus = require('postcss-janus');
 
postcss( [ cssJanus(options) ] );

Using postcss-loader in Webpack

rules: [
    {
        test: /\.css$/,
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            {
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: () => [ require('postcss-janus')(options) ]
                }
            }
        ]
    }
]

Options

Option	Default	Type	Description
prefixes	.rtl	string or array	Indicates the prefixes that should be added to the RTL rules
swapLtrRtlInUrl	false	boolean	Swap ltr and rtl strings in URLs
swapLeftRightInUrl	false	boolean	Swap left and right strings in URLs

Directives

Directives should be added as comments before a CSS rule block or a property, e.g:

/* @ruleDirective */
.example {
    /* @propertyDirective */
    color: white;
}

Directive	Description
@noflip	Avoid flipping certain CSS property or an entire rule block
@swapLtrRtlInUrl	Swap ltr and rtl strings in a certain property (it will ignore the global swapLtrRtlInUrl option
@swapLeftRightInUrl	Swap left and right strings in a certain property (it will ignore the global swapLeftRightInUrl option

If you do not use PostCSS, add it according to official docs and set this plugin in settings.