@wordpress/build 0.5.1-next.ba3aee3a2.0 → 0.5.1-next.v.0

package/lib/build.mjs

@@ -17,6 +17,7 @@ import rtlcss from 'rtlcss';
 import cssnano from 'cssnano';
 import babel from 'esbuild-plugin-babel';
 import { camelCase } from 'change-case';
+import { NodePackageImporter } from 'sass-embedded';
 
 /**
  * Internal dependencies
@@ -107,26 +108,59 @@ const wordpressExternalsPlugin = createWordpressExternalsPlugin(
 	HANDLE_PREFIX
 );
 
-const styleBundlingPlugins = [
-	// Handle CSS modules (.module.css and .module.scss)
-	sassPlugin( {
-		embedded: true,
-		filter: /\.module\.(css|scss)$/,
-		transform: postcssModules( {
-			generateScopedName: '[name]__[local]__[hash:base64:5]',
+/**
+ * Get SASS options for the given working directory.
+ *
+ * Uses NodePackageImporter from sass-embedded for resolving package imports
+ * (like @wordpress/base-styles) which works with any package manager (npm, pnpm, yarn).
+ *
+ * @param {string} workingDir - The directory where we're working (for NodePackageImporter).
+ * @return {Object} SASS options object with importers and loadPaths.
+ */
+function getSassOptions( workingDir ) {
+	return {
+		importers: [ new NodePackageImporter( workingDir ) ],
+		// loadPaths for resolving @wordpress/base-styles imports and local base-styles imports
+		loadPaths: [
+			// Package's own node_modules (for pnpm isolated deps)
+			path.join( workingDir, 'node_modules' ),
+			// Root node_modules (for npm hoisted deps)
+			path.join( ROOT_DIR, 'node_modules' ),
+			// For local imports like @use "mixins"
+			path.join( PACKAGES_DIR, 'base-styles' ),
+		],
+	};
+}
+
+/**
+ * Create style bundling plugins with the given working directory.
+ *
+ * @param {string} workingDir - The directory where we're working (for NodePackageImporter).
+ * @return {object[]} Array of esbuild plugins for handling CSS/SCSS.
+ */
+function createStyleBundlingPlugins( workingDir ) {
+	const sassOptions = getSassOptions( workingDir );
+	return [
+		// Handle CSS modules (.module.css and .module.scss)
+		sassPlugin( {
+			embedded: true,
+			filter: /\.module\.(css|scss)$/,
+			transform: postcssModules( {
+				generateScopedName: '[name]__[local]__[hash:base64:5]',
+			} ),
+			type: 'style',
+			...sassOptions,
 		} ),
-		type: 'style',
-		loadPaths: [ 'node_modules', path.join( PACKAGES_DIR, 'base-styles' ) ],
-	} ),
-	// Handle regular CSS/SCSS files
-	// Note: .module.css and .module.scss already handled by plugin above
-	sassPlugin( {
-		embedded: true,
-		filter: /\.(css|scss)$/,
-		type: 'style',
-		loadPaths: [ 'node_modules', path.join( PACKAGES_DIR, 'base-styles' ) ],
-	} ),
-];
+		// Handle regular CSS/SCSS files
+		// Note: .module.css and .module.scss already handled by plugin above
+		sassPlugin( {
+			embedded: true,
+			filter: /\.(css|scss)$/,
+			type: 'style',
+			...sassOptions,
+		} ),
+	];
+}
 
 /**
  * Normalize path separators for cross-platform compatibility.
@@ -193,56 +227,36 @@ function transformPhpContent( content, transforms ) {
 function momentTimezoneAliasPlugin() {
 	return {
 		name: 'moment-timezone-alias',
-		async setup( build ) {
-			const { createRequire } = await import( 'module' );
-			const require = createRequire( import.meta.url );
-
-			// Cached paths - resolved lazily on first use
-			let preBuiltBundlePath;
-			let momentTimezoneUtilsPath;
-			const resolvePaths = () => {
-				if ( preBuiltBundlePath ) {
-					return;
-				}
-				preBuiltBundlePath = require.resolve(
-					'moment-timezone/builds/moment-timezone-with-data-1970-2030'
-				);
-				momentTimezoneUtilsPath = require.resolve(
-					'moment-timezone/moment-timezone-utils.js'
-				);
-			};
+		setup( build ) {
+			// Alias path that esbuild will resolve
+			const aliasPath =
+				'moment-timezone/builds/moment-timezone-with-data-1970-2030.js';
 
 			// Redirect main moment-timezone files to pre-built bundle
 			build.onResolve(
-				{ filter: /^moment-timezone\/moment-timezone$/ },
-				() => {
-					resolvePaths();
-					return { path: preBuiltBundlePath };
-				}
-			);
-
-			// For utils, we need to load it but ensure it works with the pre-built bundle.
-			// The utils file tries to require('./') which would load index.js.
-			// We need to make sure it gets the pre-built bundle instead.
-			build.onResolve(
-				{ filter: /^moment-timezone\/moment-timezone-utils$/ },
-				() => {
-					resolvePaths();
-					return { path: momentTimezoneUtilsPath };
-				}
+				{ filter: /^moment-timezone\/moment-timezone\.js$/ },
+				( { importer, resolveDir, kind } ) =>
+					build.resolve( aliasPath, {
+						importer,
+						resolveDir,
+						kind,
+					} )
 			);
 
 			// Intercept the require('./') call inside moment-timezone-utils
 			// and redirect it to the pre-built bundle.
-			build.onResolve( { filter: /^\.\/$/ }, ( args ) => {
-				if (
-					args.importer &&
-					args.importer.includes( 'moment-timezone-utils' )
-				) {
-					resolvePaths();
-					return { path: preBuiltBundlePath };
+			build.onResolve(
+				{ filter: /^\.\/$/ },
+				( { importer, resolveDir, kind } ) => {
+					if ( importer.includes( 'moment-timezone-utils' ) ) {
+						return build.resolve( aliasPath, {
+							importer,
+							resolveDir,
+							kind,
+						} );
+					}
 				}
-			} );
+			);
 		},
 	};
 }
@@ -1092,7 +1106,7 @@ async function transpilePackage( packageName ) {
 	const plugins = [
 		needsEmotionPlugin && emotionPlugin,
 		externalizeAllExceptCssPlugin,
-		...styleBundlingPlugins,
+		...createStyleBundlingPlugins( packageDir ),
 	].filter( Boolean );
 
 	if ( packageJson.main ) {
@@ -1226,10 +1240,7 @@ async function compileStyles( packageName ) {
 				plugins: [
 					sassPlugin( {
 						embedded: true,
-						loadPaths: [
-							'node_modules',
-							path.join( PACKAGES_DIR, 'base-styles' ),
-						],
+						...getSassOptions( packageDir ),
 						async transform( source ) {
 							// Process with autoprefixer for LTR version
 							const ltrResult = await postcss( [
@@ -1414,7 +1425,7 @@ async function buildRoute( routeName ) {
 						[],
 						true // Generate asset file for minified build
 					),
-					...styleBundlingPlugins,
+					...createStyleBundlingPlugins( routeDir ),
 				],
 			} ),
 			esbuild.build( {
@@ -1432,7 +1443,7 @@ async function buildRoute( routeName ) {
 						[],
 						false // Skip asset file for non-minified build
 					),
-					...styleBundlingPlugins,
+					...createStyleBundlingPlugins( routeDir ),
 				],
 			} ),
 		] );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/build",
-	"version": "0.5.1-next.ba3aee3a2.0",
+	"version": "0.5.1-next.v.0+500f87dd8",
 	"description": "Build tool for WordPress plugins.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,7 +48,8 @@
 		"moment-timezone": "^0.5.40",
 		"postcss": "8.4.38",
 		"postcss-modules": "6.0.1",
-		"rtlcss": "4.3.0"
+		"rtlcss": "4.3.0",
+		"sass-embedded": "^1.97.2"
 	},
 	"devDependencies": {
 		"@types/node": "^20.17.10"
@@ -76,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
+	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
 }