RtlCss Webpack Plugin

Webpack plugin to use in addition to extract-text-webpack-plugin to create a second css bundle, processed to be rtl.

This uses rtlcss under the hood, please refer to its documentation for supported properties.

This is almost entirely based on work done in webpack-rtl-plugin

Installation

1$ npm install @smushytaco/rtlcss-webpack-plugin

Usage

Add the plugin to your webpack configuration:

1import RtlCssPlugin from '@smushytaco/rtlcss-webpack-plugin';
2
3module.exports = {
4  entry: path.join(__dirname, 'src/index.js'),
5  output: {
6    path: path.resolve(__dirname, 'dist'),
7    filename: 'bundle.js'
8  },
9  module: {
10    rules: [
11      {
12        test: /\.css$/,
13        use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'})
14      }
15    ]
16  },
17  plugins: [new ExtractTextPlugin('style.css'), new RtlCssPlugin()]
18};

This will create the normal style.css and an additional style.rtl.css.

Options

1new RtlCssPlugin({
2    fileNameMap: {
3        '.css': '[name].rtl.css',
4        '.min.css': '[name].rtl.min.css'
5    },
6    sourceMap: true,
7    rtlcssConfig: {
8        autoRename: true
9    }
10});

• fileNameMap is an optional parameter that specifies a map of file extensions to templates for rtl css generation. What's seen in the example is the default.
• sourceMap is an optional parameter that specifies if sourcemaps should be generated. If this isn't specified it'll default to false.
• rtlcssConfig is an optional parameter that comes from the rtlcss package that's used by this plugin to configure rtlcss.