1.0.5 • Published 3 years ago

postcss-cssjanus v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

OptionDefaultTypeDescription
transformDirInUrlfalsebooleanSwap ltr and rtl strings in URLs
transformEdgeInUrlfalsebooleanSwap 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;
}
DirectiveDescription
@noflipAvoid flipping certain CSS property or an entire rule block
@transformDirInUrlSwap ltr and rtl strings in a certain property (it will ignore the global transformDirInUrl option
@transformEdgeInUrlSwap 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.