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;
}
- Full RTLCSS options, plugins & hooks support
- CSS modules & Code splitting compatible
- Source map for debugging
- Support Webpack v4
npm install rtl-css-transform-webpack-plugin --save-dev
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"
]
}
]
}
}
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"
})
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
Using built-in webpack optimization via production option.
webpack -p
Alternatively see mini-css-extract-plugin optimization recommendation.
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.