Originally detected in #74135

Description

The @wordpress/build package fails to compile SCSS files when used in a pnpm monorepo because the SASS load paths are hardcoded to assume npm's hoisted node_modules structure.

When using pnpm (which doesn't hoist dependencies by default), SCSS imports like @import "@wordpress/base-styles/mixins" fail because the SASS compiler can't find the dependency in the expected location.

Expected behavior: SCSS compilation should work regardless of the package manager used.

Actual behavior: SCSS compilation fails with errors like:

Error: Can't find stylesheet to import.
  @import "@wordpress/base-styles/mixins";

Resproduction link

• Go to https://codesandbox.io/p/devbox/8h24pj
• Open terminal (Ctrl + `)
• Run pnpm install && pnpm run build

Step-by-step reproduction instructions

1. Create a new pnpm monorepo:

mkdir my-wp-plugin && cd my-wp-plugin
pnpm init

2. Create pnpm-workspace.yaml:

packages:
  - "packages/*"

3. Create a package at packages/my-editor/package.json:

{
  "name": "@my-plugin/editor",
  "version": "1.0.0",
  "wpScript": true,
  "main": "build/index.cjs",
  "module": "build-module/index.js",
  "dependencies": {
    "@wordpress/base-styles": "^5.0.0"
  }
}

4. Create packages/my-editor/src/index.js:

export const hello = 'world';

5. Create packages/my-editor/src/style.scss:

@import "@wordpress/base-styles/mixins";

.my-editor {
  @include break-small() {
    padding: 16px;
  }
}

6. Add root package.json config:

{
  "name": "my-wp-plugin",
  "private": true,
  "wpPlugin": {
    "scriptGlobal": "myPlugin",
    "packageNamespace": "my-plugin"
  },
  "devDependencies": {
    "@wordpress/build": "^0.4.0"
  }
}

7. Install dependencies and build:

pnpm install
pnpm exec wp-build

Result: Build fails with the following error:

🔨 Building packages...

📝 Phase 1: Transpiling packages...

✘ [ERROR] Error: Can't find stylesheet to import.
  ╷
1 │ @import "@wordpress/base-styles/mixins";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  - 1:9  root stylesheet [plugin sass-plugin]

❌ Build failed: Error: Build failed with 1 error

This happens because @wordpress/base-styles is in packages/editor/node_modules/@wordpress/base-styles (pnpm's non-hoisted structure), but @wordpress/build only looks in the root node_modules/.

Root Cause

In packages/wp-build/src/build.mjs, the SASS load paths are hardcoded:

This assumes:

1. All dependencies are hoisted to the root node_modules (npm behavior)
2. @wordpress/base-styles lives in packages/base-styles (Gutenberg's internal structure)

Neither assumption holds for external consumers using pnpm.

Proposed Solution

Use @manypkg/get-packages to dynamically discover all workspace packages and include each package's node_modules directory in the SASS load paths:

import { getPackages } from '@manypkg/get-packages';

async function getSassLoadPaths() {
  const { packages, rootDir } = await getPackages( ROOT_DIR );

  return [
    // Each workspace package's node_modules (for pnpm's non-hoisted deps)
    ...packages.map( ( pkg ) => path.join( pkg.dir, 'node_modules' ) ),
    // Root node_modules
    path.join( rootDir, 'node_modules' ),
    // Direct path to base-styles for @wordpress/base-styles imports
    path.join( PACKAGES_DIR, 'base-styles' ),
  ];
}

This ensures SCSS compilation works with:

• npm (hoisted dependencies)
• pnpm (non-hoisted, isolated dependencies)
• yarn (various hoisting modes)

Environment info

• @wordpress/build version: 0.4.0 (trunk)
• Node.js: 20.x
• pnpm: 9.x / 10.x

Checklist

• I have searched existing issues in the repo
• I have tested with all plugins deactivated except Gutenberg