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.