Scripts: Add RTLCSS to wp-scripts.

packages/scripts/config/webpack.config.js

@@ -9,6 +9,7 @@ const browserslist = require( 'browserslist' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const { basename, dirname, resolve } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
@@ -382,6 +383,10 @@ const scriptConfig = {
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 		// MiniCSSExtractPlugin to extract the CSS thats gets imported into JavaScript.
 		new MiniCSSExtractPlugin( { filename: '[name].css' } ),
+		// RtlCssPlugin to generate RTL CSS files.
+		new RtlCssPlugin( {
+			filename: `[name]-rtl.css`,
+		} ),
 		// React Fast Refresh.
 		hasReactFastRefresh && new ReactRefreshWebpackPlugin(),
 		// WP_NO_EXTERNALS global variable controls whether scripts' assets get

packages/scripts/package.json

@@ -79,6 +79,7 @@
 		"react-refresh": "^0.14.0",
 		"read-pkg-up": "^7.0.1",
 		"resolve-bin": "^0.4.0",
+		"rtlcss-webpack-plugin": "4.0.7",
 		"sass": "^1.35.2",
 		"sass-loader": "^12.1.0",
 		"source-map-loader": "^3.0.0",