Package detail

postcss-cssjanus

J-env486MIT1.0.5

PostCSS plugin plugin to create RTL rules using CSSJanus

postcss, css, postcss-plugin, rtl

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.

changelog

Change Log

1.0.2

  • Small corrections

1.0.1

  • Code changes to use more the postcss API instead of concatenating string
  • New methods have been added to remove the directive comments from the output

1.0.0

  • First commit

This project adheres to Semantic Versioning.