Scripts: Add RTLCSS to wp-scripts. (#61540)

* Scripts: Add RTLCSS to wp-scripts. * Update package-lock.json * Tests: Update create-block test with correct expected amount There are now two additional CSS files, `style-index-rtl.css` and `index-rtl.css`. * Update packages/scripts/package.json * Update CHANGELOG.md * Sync the lock file after changing the version signature --------- Co-authored-by: Greg Ziółkowski <[email protected]> Co-authored-by: ryelle <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: shivapoudel <[email protected]> Co-authored-by: swissspidy <[email protected]>
WordPress · May 10, 2024 · b2f8c25 · b2f8c25
1 parent f69bd7a
commit b2f8c25
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 1 deletion.
diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh
@@ -69,7 +69,7 @@ status "Building block..."
 ../node_modules/.bin/wp-scripts build
 
 status "Verifying build..."
-expected=7
+expected=9
 actual=$( find build -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`build\` directory, but found $actual."

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add RTL support when building CSS styles with `build` and `start` scripts ([#61540](https://github.com/WordPress/gutenberg/pull/61540)).
+
 ## 27.8.0 (2024-05-02)
 
 ## 27.7.0 (2024-04-19)

diff --git a/packages/scripts/config/webpack.config.js b/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

diff --git a/packages/scripts/package.json b/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",