rtlcss-webpack-plugin

4.0.7 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that creates a second CSS bundle processed for right-to-left (RTL) scripts, using rtlcss under the hood. Version 4.0.7 is the latest stable release. It works alongside extract-text-webpack-plugin or mini-css-extract-plugin to generate a parallel RTL stylesheet (e.g., style.rtl.css). Unlike webpack-rtl-plugin, this plugin is specifically designed for Webpack 4 and requires ExtractTextPlugin or equivalent. Maintenance is minimal, with no updates since 2020.

Common errors

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

cause Package not installed or missing in node_modules.

fix

Run npm install rtlcss-webpack-plugin --save-dev

error TypeError: RtlCssPlugin is not a constructor ↓

cause Using namespace import instead of default import.

fix

Use import RtlCssPlugin from 'rtlcss-webpack-plugin'

error Error: HookWebpackError: The 'compilation' hook is being tapped by 'RtlCssPlugin' and it is not allowed to be tapped after the 'make' hook. ↓

cause Plugin is placed before CSS extraction plugin in plugins array.

fix

Move new RtlCssPlugin({...}) after MiniCssExtractPlugin.

Warnings

breaking Version 4.0.0 changed from using extract-text-webpack-plugin to requiring mini-css-extract-plugin or extract-text-webpack-plugin v4. ↓

fix Use MiniCssExtractPlugin instead of ExtractTextPlugin if on Webpack 4+/5.

gotcha The plugin must be placed after the CSS extraction plugin in the plugins array; otherwise, the RTL file may not be generated. ↓

fix Ensure new RtlCssPlugin(...) appears after MiniCssExtractPlugin or ExtractTextPlugin.

deprecated The package has not been updated since 2020 and may not support Webpack 5 fully. ↓

fix Consider using webpack-rtl-plugin for Webpack 5 compatibility.

Install

npm install rtlcss-webpack-plugin

yarn add rtlcss-webpack-plugin

pnpm add rtlcss-webpack-plugin

Imports

RtlCssPlugin
wrong
```
const RtlCssPlugin = require('rtlcss-webpack-plugin')
```
correct
```
import RtlCssPlugin from 'rtlcss-webpack-plugin'
```
Default export is the plugin class. CJS require works in Node but TypeScript may need esModuleInterop.

type RtlCssPluginOptions

wrong

import { RtlCssPluginOptions } from 'rtlcss-webpack-plugin'

correct

import type { RtlCssPluginOptions } from 'rtlcss-webpack-plugin'

Options type is exported as named type. Do not import as value.

All exports

wrong

import * as RtlCssPlugin from 'rtlcss-webpack-plugin'

correct

import RtlCssPlugin from 'rtlcss-webpack-plugin'

Namespace import will not work because the package has a default export only.

Quickstart

Creates two CSS bundles: one LTR (style.css) and one RTL (style.rtl.css) using MiniCssExtractPlugin and rtlcss-webpack-plugin.

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RtlCssPlugin = require('rtlcss-webpack-plugin');

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 RtlCssPlugin({ filename: 'style.rtl.css' })
  ]
};