webpack-rtl-plugin

2.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin that generates an additional right-to-left (RTL) CSS bundle alongside the original LTR stylesheet using mini-css-extract-plugin. Current stable version 2.0.0, with irregular releases. Under the hood it uses rtlcss for CSS transformation. Key differentiator: it is a dedicated Webpack plugin, unlike standalone rtlcss or postcss-rtl which require separate loaders or post-processing. It supports content hashing in filenames, diff-only output, minification via cssnano, and custom rtlcss options/plugins.

Common errors

error Error: Cannot find module 'webpack-rtl-plugin' ↓

cause Package not installed or required incorrectly.

fix

Run 'npm install webpack-rtl-plugin --save-dev' and use 'const WebpackRTLPlugin = require('webpack-rtl-plugin');'

error TypeError: WebpackRTLPlugin is not a constructor ↓

cause Importing as default export incorrectly (e.g., import WebpackRTLPlugin from 'webpack-rtl-plugin') when using ESM.

fix

Use CommonJS require: const WebpackRTLPlugin = require('webpack-rtl-plugin');

Warnings

gotcha Plugin does not work without mini-css-extract-plugin; ensure it is installed and configured. ↓

fix Add mini-css-extract-plugin to your devDependencies and instantiate it before WebpackRTLPlugin.

deprecated The 'filename' option has changed between versions; earlier versions used a different placeholder syntax. ↓

fix Update to version 2.0.0 and use bracket placeholders like '[name].rtl.css'.

gotcha The default filename overrides the original CSS file name if not set explicitly; you may get 'style.rtl.css' instead of expected pattern. ↓

fix Always specify the 'filename' option with a pattern that includes the original extension, e.g., '[name].rtl.css'.

Install

npm install webpack-rtl-plugin

yarn add webpack-rtl-plugin

pnpm add webpack-rtl-plugin

Imports

WebpackRTLPlugin
wrong
```
import WebpackRTLPlugin from 'webpack-rtl-plugin'
```
correct
```
const WebpackRTLPlugin = require('webpack-rtl-plugin')
```
The package does not ship TypeScript definitions and uses CommonJS; named import via ES is unsupported. Use require.
WebpackRTLPlugin
wrong
```
const WebpackRTLPlugin = require('webpack-rtl-plugin')
```
correct
```
const WebpackRTLPlugin = require('webpack-rtl-plugin').default
```
Some versions mistakenly exported default. Check package; usually require('webpack-rtl-plugin') works directly.
WebpackRTLPlugin
```
import WebpackRTLPlugin from 'webpack-rtl-plugin'
```
If using TypeScript with esModuleInterop or bundlers that support CJS interop, this may work but is not officially supported.

Quickstart

Shows basic usage: add plugin after MiniCssExtractPlugin, output LTR and RTL CSS bundles.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'style.css' }),
    new WebpackRTLPlugin({
      filename: 'style.rtl.css',
      minify: true
    })
  ]
};