postcss-cssjanus

PostCSS plugin plugin to create RTL rules using CSSJanus

Usage no npm install needed!

<script type="module">
  import postcssCssjanus from 'https://cdn.skypack.dev/postcss-cssjanus';
</script>

README

PostCSS cssjanus

PostCSS plugin to create RTL rules using CSSJanus. (Only RTL styles are generated).

The code fork for postcss-janus,just modify little.

Install

npm

npm install cssjanus postcss-cssjanus -D

Basic usage

Using postcss-loader in Webpack

// postcss.config.js

const plugins = {
  'tailwindcss': {},
  'autoprefixer': {},
  'postcss-flexbugs-fixes': {},
  'postcss-preset-env': {
    autoprefixer: {
      flexbox: true,
      // grid: 'autoplace'
    },
    stage: 3,
    features: {
      'custom-properties': false,
    },
  },
}

if (process.env.rtl === '1') {
  plugins['postcss-cssjanus'] = {
    'transformDirInUrl': false,
    'transformEdgeInUrl': false
  }
}

module.exports = {
  plugins,
}

Options

Option Default Type Description
transformDirInUrl false boolean Swap ltr and rtl strings in URLs
transformEdgeInUrl 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
@transformDirInUrl Swap ltr and rtl strings in a certain property (it will ignore the global transformDirInUrl option
@transformEdgeInUrl Swap left and right strings in a certain property (it will ignore the global transformEdgeInUrl option

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