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.