webpack-rtl-plugin

    2.0.0 • Public • Published

    Webpack RTL Plugin Build Status npm version npm downloads

    Webpack plugin to use in addition to mini-css-extract-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.

    Check out the webpack-rtl-example to see an example of an app using the rtl-css-loader and webpack-rtl-plugin.

    Installation

    $ npm install webpack-rtl-plugin

    Usage

    Add the plugin to your webpack configuration:

    const WebpackRTLPlugin = require('webpack-rtl-plugin')
     
    module.exports = {
      entry: path.join(__dirname, 'src/index.js'),
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: "css-loader",
                options: {
                  ...,
                }
              }
            ]
          }
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
        new WebpackRTLPlugin(),
      ],
    }

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

    Options

    new WebpackRTLPlugin({
      filename: 'style.[contenthash].rtl.css',
      options: {},
      plugins: [],
      diffOnly: false,
      minify: true,
    })
    
    • test a RegExp (object or string) that must match asset filename
    • filename the filename of the result file. May contain patterns in brackets. Default to style.css.
      • [contenthash] a hash of the content of the extracted file
      • [id] the module identifier
      • [name] the module name
      • [file] the extracted file filename
      • [filebase] the extracted file basename
      • [ext] the extracted file extension
      • May be an array of replace function arguments like [/(\.css)/i, '-rtl$1']. Replace applies to filename that specified in extract-text-webpack-plugin.
    • options Options given to rtlcss. See the rtlcss documentation for available options.
    • plugins RTLCSS plugins given to rtlcss. See the rtlcss documentation for writing plugins. Default to [].
    • diffOnly If set to true, the stylesheet created will only contain the css that differs from the source stylesheet. Default to false.
    • minify will minify the css. You can also pass an object for the arguments passed to cssnano. Default to true.

    Install

    npm i webpack-rtl-plugin

    DownloadsWeekly Downloads

    21,418

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    211 kB

    Total Files

    5

    Last publish

    Collaborators

    • romainberger