Tools: Update build process to use wp-scripts

bin/build.js

@@ -13,23 +13,26 @@ const { sync: spawn } = require( 'cross-spawn' );
 const postCssConfig = require( '../postcss.config.js' );
 
 /**
- * Build the JS files using webpack, if the `src` directory exists.
+ * Build the files, if the `src` directory exists.
+ *
+ * This builds JS and any SCSS, using wp-scripts. We can't use wp-scripts
+ * directly due to the folder structure of the blocks, but can pass through
+ * the folders with CLI args.
  *
  * @param {string} inputDir
  * @param {string} outputDir
  */
-async function maybeBuildJavaScript( inputDir, outputDir ) {
+async function maybeBuildBlock( inputDir, outputDir ) {
 	const project = path.basename( path.dirname( inputDir ) );
 	if ( fs.existsSync( inputDir ) ) {
-		// Set the src directory based on the relative location from projet root.
-		process.env.WP_SRC_DIRECTORY = path.relative( path.dirname( __dirname ), inputDir );
-		const { status, stdout } = spawn(
-			resolveBin( 'webpack' ),
+		// Run wp-scripts with a specific input and output directory.
+		const { status, output } = spawn(
+			resolveBin( '@wordpress/scripts', { executable: 'wp-scripts' } ),
 			[
-				'--config',
-				path.join( path.dirname( __dirname ), 'webpack.config.js' ),
-				'--output-path',
-				outputDir,
+				'build',
+				'--experimental-modules',
+				'--webpack-src-dir=' + path.relative( path.dirname( __dirname ), inputDir ),
+				'--output-path=' + outputDir,
 				'--color', // Enables colors in `stdout`.
 			],
 			{
@@ -38,10 +41,10 @@ async function maybeBuildJavaScript( inputDir, outputDir ) {
 		);
 		// Only output the webpack result if there was an issue.
 		if ( 0 !== status ) {
-			console.log( stdout.toString() );
-			console.log( chalk.red( `Error in JavaScript for ${ project }` ) );
+			console.log( output.toString() );
+			console.log( chalk.red( `Error in block for ${ project }` ) );
 		} else {
-			console.log( chalk.green( `JavaScript built for ${ project }` ) );
+			console.log( chalk.green( `Block built for ${ project }` ) );
 		}
 	}
 }
@@ -109,7 +112,10 @@ projects.forEach( async ( file ) => {
 
 		// We `await` because JS needs to be built first— the first webpack step deletes the build
 		// directory, and could remove the built CSS if it was truely async.
-		await maybeBuildJavaScript( path.resolve( path.join( basePath, 'src' ) ), outputDir );
+		await maybeBuildBlock( path.resolve( path.join( basePath, 'src' ) ), outputDir );
+
+		// `maybeBuildBlock` supports SCSS, but current blocks still have postCSS
+		// files. Until those are converted, we still need a separate PostCSS step.
 		await maybeBuildPostCSS( path.resolve( path.join( basePath, 'postcss' ) ), outputDir );
 	} catch ( error ) {
 		console.log( chalk.red( `Error in ${ file }:` ), error.message );

bin/watch.js

@@ -49,7 +49,7 @@ function isSourceFile( filename ) {
 	const relativePath = path.relative( process.cwd(), filename ).replace( /\\/g, '/' );
 
 	return (
-		[ /\/src\/.+\.(js|json|ts|tsx)$/, /\/postcss\/.+\.(pcss)$/ ].some( ( regex ) =>
+		[ /\/src\/.+\.(js|json|ts|tsx|scss)$/, /\/postcss\/.+\.(pcss)$/ ].some( ( regex ) =>
 			regex.test( relativePath )
 		) && ! [ /\/__tests__\/.+/, /.\.(spec|test)\.js$/ ].some( ( regex ) => regex.test( relativePath ) )
 	);

package.json

@@ -25,15 +25,14 @@
 		"postcss-preset-env": "9.3.0",
 		"resolve-bin": "1.0.1",
 		"rtlcss": "4.1.1",
-		"url-loader": "4.1.1",
-		"webpack": "5.90.0",
-		"webpack-cli": "5.1.4"
+		"url-loader": "4.1.1"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
 	],
 	"scripts": {
 		"build": "NODE_ENV=production ./bin/build.js",
+		"build:dev": "NODE_ENV=development ./bin/build.js",
 		"font-subset": "./bin/font-subset.js",
 		"prestart": "./bin/build.js",
 		"start": "NODE_ENV=development ./bin/watch.js",

yarn.lock

@@ -10772,7 +10772,7 @@ webpack-bundle-analyzer@^4.9.1:
     sirv "^2.0.3"
     ws "^7.3.1"
 
-webpack-cli@5.1.4, webpack-cli@^5.1.4:
+webpack-cli@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.4.tgz#c8e046ba7eaae4911d7e71e2b25b776fcc35759b"
   integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
@@ -10852,7 +10852,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@5.90.0, webpack@^5.88.2:
+webpack@^5.88.2:
   version "5.90.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.0.tgz#313bfe16080d8b2fee6e29b6c986c0714ad4290e"
   integrity sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==