{"id":20820,"library":"webpack-rtl-plugin","title":"webpack-rtl-plugin","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/romainberger/webpack-rtl-plugin","tags":["javascript","webpack","css","rtl"],"install":[{"cmd":"npm install webpack-rtl-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-rtl-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-rtl-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency; plugin creates the initial CSS bundle that webpack-rtl-plugin processes into an RTL version","package":"mini-css-extract-plugin","optional":false},{"reason":"Core dependency used by the plugin to transform CSS from LTR to RTL","package":"rtlcss","optional":false}],"imports":[{"note":"The package does not ship TypeScript definitions and uses CommonJS; named import via ES is unsupported. Use require.","wrong":"import WebpackRTLPlugin from 'webpack-rtl-plugin'","symbol":"WebpackRTLPlugin","correct":"const WebpackRTLPlugin = require('webpack-rtl-plugin')"},{"note":"Some versions mistakenly exported default. Check package; usually require('webpack-rtl-plugin') works directly.","wrong":"const WebpackRTLPlugin = require('webpack-rtl-plugin')","symbol":"WebpackRTLPlugin","correct":"const WebpackRTLPlugin = require('webpack-rtl-plugin').default"},{"note":"If using TypeScript with esModuleInterop or bundlers that support CJS interop, this may work but is not officially supported.","wrong":"","symbol":"WebpackRTLPlugin","correct":"import WebpackRTLPlugin from 'webpack-rtl-plugin'"}],"quickstart":{"code":"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst WebpackRTLPlugin = require('webpack-rtl-plugin');\nconst path = require('path');\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: [\n          MiniCssExtractPlugin.loader,\n          'css-loader'\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new MiniCssExtractPlugin({ filename: 'style.css' }),\n    new WebpackRTLPlugin({\n      filename: 'style.rtl.css',\n      minify: true\n    })\n  ]\n};","lang":"javascript","description":"Shows basic usage: add plugin after MiniCssExtractPlugin, output LTR and RTL CSS bundles."},"warnings":[{"fix":"Add mini-css-extract-plugin to your devDependencies and instantiate it before WebpackRTLPlugin.","message":"Plugin does not work without mini-css-extract-plugin; ensure it is installed and configured.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to version 2.0.0 and use bracket placeholders like '[name].rtl.css'.","message":"The 'filename' option has changed between versions; earlier versions used a different placeholder syntax.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Always specify the 'filename' option with a pattern that includes the original extension, e.g., '[name].rtl.css'.","message":"The default filename overrides the original CSS file name if not set explicitly; you may get 'style.rtl.css' instead of expected pattern.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'2.0.0':32 'addit':10 'alongsid':18 'bundl':17 'content':70 'css':16,26,43,87 'cssnano':80 'current':29 'custom':82 'dedic':50 'diff':75 'diff-on':74 'differenti':46 'extract':27 'filenam':73 'generat':8 'hash':71 'hood':38 'irregular':34 'javascript':85 'key':45 'left':14 'loader':63 'ltr':21 'mini':25 'mini-css-extract-plugin':24 'minif':78 'options/plugins':84 'origin':20 'output':77 'plugin':4,6,28,52 'post':66 'post-process':65 'postcss':58 'postcss-rtl':57 'process':67 'releas':35 'requir':61 'right':12 'right-to-left':11 'rtl':3,15,59,88 'rtlcss':41,55,83 'separ':62 'stabl':30 'standalon':54 'stylesheet':22 'support':69 'transform':44 'unlik':53 'use':23,40 'version':31 'via':79 'webpack':2,5,51,86 'webpack-rtl-plugin':1","created_at":"2026-04-25T11:25:09.155504+00:00","updated_at":"2026-04-25T11:25:09.155504+00:00","problems":[{"fix":"Run 'npm install webpack-rtl-plugin --save-dev' and use 'const WebpackRTLPlugin = require('webpack-rtl-plugin');'","cause":"Package not installed or required incorrectly.","error":"Error: Cannot find module 'webpack-rtl-plugin'"},{"fix":"Use CommonJS require: const WebpackRTLPlugin = require('webpack-rtl-plugin');","cause":"Importing as default export incorrectly (e.g., import WebpackRTLPlugin from 'webpack-rtl-plugin') when using ESM.","error":"TypeError: WebpackRTLPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/romainberger/webpack-rtl-plugin","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-rtl-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}