{"id":20530,"library":"rtlcss-webpack-plugin","title":"rtlcss-webpack-plugin","description":"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.","status":"maintenance","version":"4.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/wix/rtlcss-webpack-plugin","tags":["javascript"],"install":[{"cmd":"npm install rtlcss-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add rtlcss-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add rtlcss-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core CSS transformation library","package":"rtlcss","optional":false},{"reason":"Peer dependency for plugin interface","package":"webpack","optional":false}],"imports":[{"note":"Default export is the plugin class. CJS require works in Node but TypeScript may need esModuleInterop.","wrong":"const RtlCssPlugin = require('rtlcss-webpack-plugin')","symbol":"RtlCssPlugin","correct":"import RtlCssPlugin from 'rtlcss-webpack-plugin'"},{"note":"Options type is exported as named type. Do not import as value.","wrong":"import { RtlCssPluginOptions } from 'rtlcss-webpack-plugin'","symbol":"type RtlCssPluginOptions","correct":"import type { RtlCssPluginOptions } from 'rtlcss-webpack-plugin'"},{"note":"Namespace import will not work because the package has a default export only.","wrong":"import * as RtlCssPlugin from 'rtlcss-webpack-plugin'","symbol":"All exports","correct":"import RtlCssPlugin from 'rtlcss-webpack-plugin'"}],"quickstart":{"code":"const path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst RtlCssPlugin = require('rtlcss-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [MiniCssExtractPlugin.loader, 'css-loader']\n      }\n    ]\n  },\n  plugins: [\n    new MiniCssExtractPlugin({ filename: 'style.css' }),\n    new RtlCssPlugin({ filename: 'style.rtl.css' })\n  ]\n};","lang":"javascript","description":"Creates two CSS bundles: one LTR (style.css) and one RTL (style.rtl.css) using MiniCssExtractPlugin and rtlcss-webpack-plugin."},"warnings":[{"fix":"Use MiniCssExtractPlugin instead of ExtractTextPlugin if on Webpack 4+/5.","message":"Version 4.0.0 changed from using extract-text-webpack-plugin to requiring mini-css-extract-plugin or extract-text-webpack-plugin v4.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure new RtlCssPlugin(...) appears after MiniCssExtractPlugin or ExtractTextPlugin.","message":"The plugin must be placed after the CSS extraction plugin in the plugins array; otherwise, the RTL file may not be generated.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using webpack-rtl-plugin for Webpack 5 compatibility.","message":"The package has not been updated since 2020 and may not support Webpack 5 fully.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install rtlcss-webpack-plugin --save-dev","cause":"Package not installed or missing in node_modules.","error":"Error: Cannot find module 'rtlcss-webpack-plugin'"},{"fix":"Use import RtlCssPlugin from 'rtlcss-webpack-plugin'","cause":"Using namespace import instead of default import.","error":"TypeError: RtlCssPlugin is not a constructor"},{"fix":"Move new RtlCssPlugin({...}) after MiniCssExtractPlugin.","cause":"Plugin is placed before CSS extraction plugin in plugins array.","error":"Error: HookWebpackError: The 'compilation' hook is being tapped by 'RtlCssPlugin' and it is not allowed to be tapped after the 'make' hook."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}