Tools: Add rtlcss to build RTL stylesheet

README.md

@@ -15,8 +15,9 @@ Over time, this is intended to become the canonical source repository for all `m
 
 ## Development
 
-* `npm run start` during development
-* `npm run build` before commit/sync/deploy
+* `npm run start` during development, only builds `style.css`
+* `npm run build` before commit/sync/deploy, builds `style.css` and `style-rtl.css`.
+* `npm run build:rtl` to build `style-rtl.css`
 
 
 ## Sync/Deploy

mu-plugins/blocks/global-header-footer/blocks.php

@@ -22,11 +22,13 @@
  * showing up in the Block Inserter, regardless of which theme is running.
  */
 function register_block_types() {
+	$suffix = is_rtl() ? '-rtl' : '';
+
 	wp_register_style(
 		'wporg-global-header-footer',
-		plugins_url( '/build/style.css', __FILE__ ),
+		plugins_url( "/build/style$suffix.css", __FILE__ ),
 		array( 'wp-block-library' ), // Load `block-library` styles first, so that our styles override them.
-		filemtime( __DIR__ . '/build/style.css' )
+		filemtime( __DIR__ . "/build/style$suffix.css" )
 	);
 
 	wp_register_script(

package.json

@@ -21,17 +21,21 @@
 		"postcss-import": "^14.0.2",
 		"postcss-nesting": "^8.0.1",
 		"postcss-preset-env": "^6.7.0",
-		"postcss-reporter": "^7.0.2"
+		"postcss-reporter": "^7.0.2",
+		"rtlcss": "3.5.0"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
 	],
 	"scripts": {
-		"start": "npm run build -- --watch",
+		"start": "npm run build:css -- --watch",
 		"lint:css": "wp-scripts lint-style mu-plugins/blocks/global-header-footer/postcss/**/*.pcss",
 		"pre-build": "mkdir -p mu-plugins/blocks/global-header-footer/build",
-		"build": "npm run pre-build && postcss mu-plugins/blocks/global-header-footer/postcss/style.pcss --output mu-plugins/blocks/global-header-footer/build/style.css"
+		"build": "npm run pre-build && npm run build:css && npm run build:rtl",
+		"build:css": "postcss mu-plugins/blocks/global-header-footer/postcss/style.pcss --output mu-plugins/blocks/global-header-footer/build/style.css",
+		"build:rtl": "rtlcss mu-plugins/blocks/global-header-footer/build/style.css mu-plugins/blocks/global-header-footer/build/style-rtl.css"
 	},
+	"rtlcssConfig": {},
 	"stylelint": {
 		"extends": "@wordpress/stylelint-config",
 		"rules": {