Tools: Fix running build scripts on Windows does not generate CSS files for blocks

Starting with WordPress 6.0, when running `npm run build` or `npm run build:dev`, no CSS files were generated for the blocks within `wp-includes/blocks/**`.

Props wildworks, clorith, sergeybiryukov.
Fixes #56616.



git-svn-id: https://develop.svn.wordpress.org/trunk@54307 602fd350-edb4-49c9-b593-d223f7449a82

Author: gziolo

tools/webpack/blocks.js

@@ -3,7 +3,6 @@
  */
 const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const { join } = require( 'path' );
 
 /**
  * WordPress dependencies
@@ -13,7 +12,7 @@ const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-we
 /**
  * Internal dependencies
  */
-const { stylesTransform, baseConfig, baseDir } = require( './shared' );
+const { normalizeJoin, stylesTransform, baseConfig, baseDir } = require( './shared' );
 
 module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
 	const mode = env.environment;
@@ -131,33 +130,33 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 	};
 
 	const blockPHPCopies = Object.keys( blockPHPFiles ).map( ( filename ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
-		to: join( baseDir, `src/${ blockPHPFiles[ filename ] }` ),
+		from: normalizeJoin(baseDir, `node_modules/@wordpress/${ filename }` ),
+		to: normalizeJoin(baseDir, `src/${ blockPHPFiles[ filename ] }` ),
 	} ) );
 
 	const blockMetadataCopies = Object.keys( blockMetadataFiles ).map( ( filename ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
-		to: join( baseDir, `src/${ blockMetadataFiles[ filename ] }` ),
+		from: normalizeJoin(baseDir, `node_modules/@wordpress/${ filename }` ),
+		to: normalizeJoin(baseDir, `src/${ blockMetadataFiles[ filename ] }` ),
 	} ) );
 
 	const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
-		to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/[name]${ suffix }.css` ),
+		from: normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
+		to: normalizeJoin(baseDir, `${ buildTarget }/blocks/${ blockName }/[name]${ suffix }.css` ),
 		transform: stylesTransform( mode ),
 		noErrorOnMissing: true,
 	} ) );
 
 	const config = {
 		...baseConfig( env ),
 		entry: {
-			'file/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
-			'navigation/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view` ),
-			'navigation/view-modal': join( baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view-modal` ),
+			'file/view': normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
+			'navigation/view': normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view` ),
+			'navigation/view-modal': normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view-modal` ),
 		},
 		output: {
 			devtoolNamespace: 'wp',
 			filename: `[name]${ suffix }.js`,
-			path: join( baseDir, `${ buildTarget }/blocks` ),
+			path: normalizeJoin(baseDir, `${ buildTarget }/blocks` ),
 		},
 		plugins: [
 			new DefinePlugin( {

tools/webpack/packages.js

@@ -5,7 +5,6 @@ const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const UglifyJS = require( 'uglify-js' );
-const { join } = require( 'path' );
 
 /**
  * WordPress dependencies
@@ -18,7 +17,7 @@ const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-we
 /**
  * Internal dependencies
  */
-const { stylesTransform, baseConfig, baseDir } = require( './shared' );
+const { normalizeJoin, stylesTransform, baseConfig, baseDir } = require( './shared' );
 const { dependencies } = require( '../../package' );
 
 const exportDefaultPackages = [
@@ -42,8 +41,8 @@ const exportDefaultPackages = [
  */
 function mapVendorCopies( vendors, buildTarget ) {
 	return Object.keys( vendors ).map( ( filename ) => ( {
-		from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
-		to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
+		from: normalizeJoin(baseDir, `node_modules/${ vendors[ filename ] }` ),
+		to: normalizeJoin(baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
 	} ) );
 }
 
@@ -115,22 +114,22 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 	let vendorCopies = mode === "development" ? developmentCopies : [ ...minifiedCopies, ...minifyCopies ];
 
 	let cssCopies = packages.map( ( packageName ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
-		to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/[name]${ suffix }.css` ),
+		from: normalizeJoin(baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
+		to: normalizeJoin(baseDir, `${ buildTarget }/css/dist/${ packageName }/[name]${ suffix }.css` ),
 		transform: stylesTransform( mode ),
 		noErrorOnMissing: true,
 	} ) );
 
 	const phpCopies = Object.keys( phpFiles ).map( ( filename ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
-		to: join( baseDir, `src/${ phpFiles[ filename ] }` ),
+		from: normalizeJoin(baseDir, `node_modules/@wordpress/${ filename }` ),
+		to: normalizeJoin(baseDir, `src/${ phpFiles[ filename ] }` ),
 	} ) );
 
 	const config = {
 		...baseConfig( env ),
 		entry: packages.reduce( ( memo, packageName ) => {
 			memo[ packageName ] = {
-				import: join( baseDir, `node_modules/@wordpress/${ packageName }` ),
+				import: normalizeJoin(baseDir, `node_modules/@wordpress/${ packageName }` ),
 				library: {
 					name: [ 'wp', camelCaseDash( packageName ) ],
 					type: 'window',
@@ -145,7 +144,7 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 		output: {
 			devtoolNamespace: 'wp',
 			filename: `[name]${ suffix }.js`,
-			path: join( baseDir, `${ buildTarget }/js/dist` ),
+			path: normalizeJoin(baseDir, `${ buildTarget }/js/dist` ),
 		},
 		plugins: [
 			new DefinePlugin( {

tools/webpack/shared.js

@@ -69,8 +69,12 @@ const stylesTransform = ( mode ) => ( content ) => {
 	return content;
 };
 
+const normalizeJoin = ( ...paths ) => join( ...paths ).replace( /\\/g, '/' );
+
+
 module.exports = {
 	baseDir,
 	baseConfig,
+	normalizeJoin,
 	stylesTransform,
 };