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
This commit is contained in:
Greg Ziółkowski
2022-09-26 11:20:43 +00:00
parent decd9468e5
commit 00d2562fe2
3 changed files with 24 additions and 22 deletions

View File

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

View File

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

View File

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