A webpack plugin wrapper for CSSJanus library, flipping RTL/LTR direcitonality rules in CSS assets
The plugin takes all .css
assets, runs CSSJanus on them and produces a pair asset rtl.[originalname].css
that is flipped directionalities to RTL.
To use this in your project, install dependency:
npm install mooeypoo/cssjsnus-webpack --save-dev
In webpack config, require the plugin module
const CSSJanusWebpackPlugin = require( 'mooeypoo/cssjsnus-webpack' );
Add the plugin to webpack
plugins: [
new CSSJanusWebpackPlugin()
]
Or if you're using Encore:
Encore
.addPlugin( new CSSJanusWebpackPlugin() );
You can also specify the specific entries you'd like to create RTL versions for, by passing them into the constructor:
Encore
.addPlugin( new CSSJanusWebpackPlugin( [ 'app' ] ) );
In your templates, you can use the RTL stylesheet conditionally when attaching to the twig template. For example, if you're using Intuition (or Wikimedia's ToolforgeBundle, which includes Intuition) you can utilize the is_rtl() method to attach an RTL css conditionally:
<link rel="stylesheet" type="text/css" href="{% if is_rtl() %}{{ asset('assets/rtl.app.css') }}{% else %}{{ asset('assets/app.css') }}{% endif %}" />
Please report any bugs or improvement requests in the github issues.
Report any bugs or improvement requests to CSSJanus directly in its repo.