RTL CSS Transform Webpack Plugin 💎

Webpack plugin that implements RTLCSS framework for transforming Left-To-Right (LTR) Cascading Style Sheets (CSS) to Right-To-Left (RTL).

Before you should use a CSS extraction plugin. For Webpack v4 we use mini-css-extract-plugin to extract CSS from JS.

rtl-css-transform-webpack-plugin creates RTL CSS file per LTR CSS file:

style.css

.example {
   direction: ltr;
   margin: 0;
   padding: 1em 2em .5em 1em;
   background-color: #353639;
   font-family: "Droid Sans", sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
   font-size: 16px/*rtl:14px*/;
}

style.rtl.css

.example {
   direction: rtl;
   margin: 0;
   padding: 1em 1em .5em 2em;
   background-color: #353639;
   font-family: "Droid Arabic Kufi","Droid Sans", sans-serif;
   font-size: 14px;
}

Features 😛

• Full RTLCSS options, plugins & hooks support
• CSS modules & Code splitting compatible
• Source map for debugging
• Support Webpack v4

Install

npm install rtl-css-transform-webpack-plugin --save-dev

Usage

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RtlCssPlugin = require("rtl-css-transform-webpack-plugin");
 
module.exports = {
    entry: path.resolve(__dirname, "src", "index.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        chunkFilename: "[name].js" // only for code splitting
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new RtlCssPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    }
}

Filename

This option determines the name of each output bundle.

The default file name is [name].rtl.css.

See webpack output filename for more details.

new RtlCssPlugin({
    filename: "rtl/[chunkhash].css"
})

Sourcemap

Produces inline source map. Disabled by default.

Source mapping can be enabled via sourcemap option.

new RtlCssPlugin({
    sourcemap: true
})

Alternatively it can be enabled using webpack devtool option.

webpack --devtool source-map

Minimize

Using built-in webpack optimization via production option.

webpack -p

Alternatively see mini-css-extract-plugin optimization recommendation.

RTLCSS options

RTLCSS usage can be customized using object config.

Options are same as RTLCSS options.
Plugins are same as RTLCSS plugins.
Hooks are same as RTLCSS hooks.

new RtlCssPlugin({
    config: {
        options: {},
        plugins: [],
        hooks: {}
    }
})

---

💐 Special thanks to @MohammadYounes for RTLCSS.