RTLCSS Control Directive Fix + Source Maps

Author: SmushyTaco

package-lock.json

@@ -3,7 +3,7 @@
  */
 const babelJest = require( 'babel-jest' );
 
-// Remove this workaround when https://github.com/facebook/jest/issues/11444 gets resolved in Jest.
+// TODO: this was resolved so remove this workaround https://github.com/facebook/jest/issues/11444
 const babelJestInterop = babelJest.__esModule ? babelJest.default : babelJest;
 
 module.exports = babelJestInterop.createTransformer( {

packages/scripts/config/babel-transform.js

@@ -66,6 +66,7 @@ async function readConfig() {
 	return merge( {}, defaultConfig, localConfig );
 }
 
+// TODO: puppeteer now supports FireFox, this needs updating: https://hacks.mozilla.org/2024/08/puppeteer-support-for-firefox/
 function getPuppeteer( { browser } ) {
 	switch ( browser.toLowerCase() ) {
 		case 'chromium':

packages/scripts/config/jest-environment-puppeteer/config.js

@@ -14,7 +14,7 @@
 
 const newLine = /\n/g;
 const encodedNewLine = '%0A';
-const lineAndColumnInStackTrace = /^.*?:([0-9]+):([0-9]+).*$/;
+const lineAndColumnInStackTrace = /^.*?:(\d+):(\d+).*$/;
 
 class GithubActionsReporter {
 	async onRunComplete( _contexts, _aggregatedResults ) {

packages/scripts/config/jest-github-actions-reporter/index.js

@@ -9,6 +9,8 @@ const browserslist = require( 'browserslist' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const { basename, dirname, relative, resolve, sep } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
+const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
@@ -24,7 +26,6 @@ const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
  * Internal dependencies
  */
 const PhpFilePathsPlugin = require( '../plugins/php-file-paths-plugin' );
-const RtlCssPlugin = require( '../plugins/rtlcss-webpack-plugin' );
 const {
 	fromConfigRoot,
 	hasBabelConfig,
@@ -75,25 +76,7 @@ const cssLoaders = [
 				postcssOptions: {
 					ident: 'postcss',
 					sourceMap: ! isProduction,
-					plugins: isProduction
-						? [
-								...postcssPlugins,
-								require( 'cssnano' )( {
-									// Provide a fallback configuration if there's not
-									// one explicitly available in the project.
-									...( ! hasCssnanoConfig() && {
-										preset: [
-											'default',
-											{
-												discardComments: {
-													removeAll: true,
-												},
-											},
-										],
-									} ),
-								} ),
-						  ]
-						: postcssPlugins,
+					plugins: postcssPlugins,
 				},
 			} ),
 		},
@@ -152,12 +135,30 @@ const baseConfig = {
 				},
 				extractComments: false,
 			} ),
+			...( isProduction
+				? [
+						new CssMinimizerPlugin( {
+							minimizerOptions: {
+								preset: hasCssnanoConfig()
+									? undefined
+									: [
+											'default',
+											{
+												discardComments: {
+													removeAll: true,
+												},
+											},
+									  ],
+							},
+						} ),
+				  ]
+				: [] ),
 		],
 	},
 	module: {
 		rules: [
 			{
-				test: /\.m?(j|t)sx?$/,
+				test: /\.m?([jt])sx?$/,
 				exclude: /node_modules/,
 				use: [
 					{
@@ -212,7 +213,7 @@ const baseConfig = {
 			},
 			{
 				test: /\.svg$/,
-				issuer: /\.(j|t)sx?$/,
+				issuer: /\.([jt])sx?$/,
 				use: [ '@svgr/webpack', 'url-loader' ],
 				type: 'javascript/auto',
 			},
@@ -256,7 +257,7 @@ if ( ! isProduction ) {
 // Add source-map-loader if devtool is set, whether in dev mode or not.
 if ( baseConfig.devtool ) {
 	baseConfig.module.rules.unshift( {
-		test: /\.(j|t)sx?$/,
+		test: /\.([jt])sx?$/,
 		exclude: [ /node_modules/ ],
 		use: require.resolve( 'source-map-loader' ),
 		enforce: 'pre',
@@ -336,7 +337,7 @@ const scriptConfig = {
 					noErrorOnMissing: true,
 					transform( content, absoluteFrom ) {
 						const convertExtension = ( path ) => {
-							return path.replace( /\.m?(j|t)sx?$/, '.js' );
+							return path.replace( /\.m?([jt])sx?$/, '.js' );
 						};
 
 						if ( basename( absoluteFrom ) === 'block.json' ) {
@@ -419,7 +420,12 @@ const scriptConfig = {
 			filename: '[name].css',
 		} ),
 		// RtlCssPlugin to generate RTL CSS files.
-		new RtlCssPlugin(),
+		new RtlCssPlugin( {
+			fileNameMap: {
+				'.css': '[name]-rtl.css',
+			},
+			sourceMap: ! isProduction,
+		} ),
 		// Generate blocks manifest after changes.
 		hasBlocksManifest && new BlocksManifestPlugin(),
 		// React Fast Refresh.

packages/scripts/config/webpack.config.js

@@ -56,7 +56,7 @@
 		"copy-webpack-plugin": "^10.2.0",
 		"cross-spawn": "^7.0.6",
 		"css-loader": "^6.2.0",
-		"cssnano": "^6.0.1",
+		"css-minimizer-webpack-plugin": "^7.0.0",
 		"cwd": "^0.10.0",
 		"dir-glob": "^3.0.1",
 		"eslint": "^8.3.0",
@@ -81,7 +81,7 @@
 		"react-refresh": "^0.14.0",
 		"read-pkg-up": "^7.0.1",
 		"resolve-bin": "^0.4.0",
-		"rtlcss": "^4.3.0",
+		"rtlcss-webpack-plugin": "npm:@smushytaco/rtlcss-webpack-plugin@^2.0.3",
 		"sass": "^1.54.0",
 		"sass-loader": "^16.0.3",
 		"schema-utils": "^4.2.0",

packages/scripts/package.json

@@ -18,7 +18,7 @@ const zip = new AdmZip();
 const zipRootFolderArg = getArgFromCLI( '--root-folder' );
 const noRootFolderArg = getArgFromCLI( '--no-root-folder' );
 let zipRootFolder = `${ name }/`;
-let files = [];
+let files;
 
 if ( hasPackageProp( 'files' ) ) {
 	stdout.write(

packages/scripts/plugins/rtlcss-webpack-plugin/index.js

@@ -55,7 +55,7 @@ const hasCssnanoConfig = () =>
  *
  * @param {"e2e"|"unit"} suffix Suffix of configuration file to accept.
  *
- * @return {string= | undefined} Override or fallback configuration file path.
+ * @return {string | undefined} Override or fallback configuration file path.
  */
 function getJestOverrideConfigFile( suffix ) {
 	if ( hasArgInCLI( '-c' ) || hasArgInCLI( '--config' ) ) {