build: configure custom sass compiler to allow for module imports

Workaround until https://docs.google.com/document/d/1yVRAJptClM1YNH2XqdpPOef9rmLMVeo_qTJLM5j1gDo/edit
is addressed/resolved.

We need to tell Sass how `@angular/<cdk,material,etc>` imports can be resolved so that
we can start using them, similar to how NPM-consumers would.

This is a key part of making our NPM packages work with Yarn berry, or more
generally making our packages not rely on unspecified behavior (our package
exports should not allow for deep imports, but currently we rely on those!)

Author: devversion

WORKSPACE

@@ -100,11 +100,6 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
 
 web_test_repositories()
 
-# Fetch transitive dependencies which are needed to use the Sass rules.
-load("@io_bazel_rules_sass//:package.bzl", "rules_sass_dependencies")
-
-rules_sass_dependencies()
-
 # Setup the Sass rule repositories.
 load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
 

package.json

@@ -92,6 +92,7 @@
     "@bazel/rollup": "5.3.0",
     "@bazel/runfiles": "5.3.0",
     "@bazel/terser": "5.3.0",
+    "@bazel/worker": "5.3.0",
     "@firebase/app-types": "^0.7.0",
     "@material/animation": "14.0.0-canary.9736ddce9.0",
     "@material/auto-init": "14.0.0-canary.9736ddce9.0",

scripts/create-legacy-tests-bundle.mjs

@@ -5,20 +5,33 @@ import child_process from 'child_process';
 import esbuild from 'esbuild';
 import fs from 'fs';
 import glob from 'glob';
+import module from 'module';
 import {dirname, join, relative} from 'path';
 import sass from 'sass';
 import url from 'url';
+import tsNode from 'ts-node';
 
 const containingDir = dirname(url.fileURLToPath(import.meta.url));
 const projectDir = join(containingDir, '../');
+const packagesDir = join(projectDir, 'src/');
 const legacyTsconfigPath = join(projectDir, 'src/tsconfig-legacy.json');
 
+// Some tooling utilities might be written in TS and we do not want to rewrite them
+// in JavaScript just for this legacy script. We can use ts-node for such scripts.
+tsNode.register({project: join(containingDir, 'tsconfig.json')});
+
+const require = module.createRequire(import.meta.url);
+const sassImporterUtil = require('../tools/sass/local-sass-importer.ts');
+
 const distDir = join(projectDir, 'dist/');
 const nodeModulesDir = join(projectDir, 'node_modules/');
 const outFile = join(distDir, 'legacy-test-bundle.spec.js');
 const ngcBinFile = join(nodeModulesDir, '@angular/compiler-cli/bundles/src/bin/ngc.js');
 const legacyOutputDir = join(distDir, 'legacy-test-out');
 
+/** Sass importer used for resolving `@angular/<..>` imports. */
+const localPackageSassImporter = sassImporterUtil.createLocalAngularPackageImporter(packagesDir);
+
 /**
  * This script builds the whole library in `angular/components` together with its
  * spec files into a single IIFE bundle.
@@ -136,11 +149,12 @@ async function createEntryPointSpecFile() {
 
 /** Helper function to render a Sass file asynchronously using promises. */
 async function renderSassFileAsync(inputFile) {
-  return new Promise((resolve, reject) => {
-    sass.render({file: inputFile, includePaths: [nodeModulesDir]}, (err, result) =>
-      err ? reject(err) : resolve(result.css),
-    );
-  });
+  return sass
+    .compileAsync(inputFile, {
+      loadPaths: [nodeModulesDir, projectDir],
+      importers: [localPackageSassImporter],
+    })
+    .then(result => result.css);
 }
 
 /**

src/material/core/theming/tests/BUILD.bazel

@@ -48,6 +48,8 @@ ts_library(
     devmode_module = "commonjs",
     deps = [
         "//tools/postcss",
+        "//tools/sass:sass_lib",
+        "@npm//@bazel/runfiles",
         "@npm//@types/jasmine",
         "@npm//@types/node",
         "@npm//@types/sass",

src/material/core/theming/tests/theming-api.spec.ts

@@ -1,7 +1,17 @@
 import {parse, Root, Rule} from 'postcss';
-import {renderSync} from 'sass';
+import {compileString} from 'sass';
+import {runfiles} from '@bazel/runfiles';
+import * as path from 'path';
 
 import {compareNodes} from '../../../../../tools/postcss/compare-nodes';
+import {createLocalAngularPackageImporter} from '../../../../../tools/sass/local-sass-importer';
+
+// Note: For Windows compatibility, we need to resolve the directory paths through runfiles
+// which are guaranteed to reside in the source tree.
+const testDir = path.join(runfiles.resolvePackageRelative('../_all-theme.scss'), '../tests');
+const packagesDir = path.join(runfiles.resolveWorkspaceRelative('src/cdk/_index.scss'), '../..');
+
+const localPackageSassImporter = createLocalAngularPackageImporter(packagesDir);
 
 describe('theming api', () => {
   /** Map of known selectors for density styles and their corresponding AST rule. */
@@ -298,19 +308,20 @@ describe('theming api', () => {
 
   /** Transpiles given Sass content into CSS. */
   function transpile(content: string) {
-    return renderSync({
-      data: `
+    return compileString(
+      `
         @import '../_all-theme.scss';
         @import '../../color/_all-color.scss';
         @import '../../density/private/_all-density.scss';
         @import '../../typography/_all-typography.scss';
+
         ${content}
       `,
-      // Ensures that files can be resolved through Bazel runfile resolution. This
-      // is necessary because the imported Sass files are not necessarily in the
-      // bazel output directory. e.g. `_all-theme.scss` is a source file.
-      importer: url => ({file: require.resolve(url)}),
-    }).css.toString();
+      {
+        loadPaths: [testDir],
+        importers: [localPackageSassImporter],
+      },
+    ).css.toString();
   }
 
   /**

tools/defaults.bzl

@@ -75,6 +75,7 @@ def _getDefaultTsConfig(testonly):
 def sass_binary(sourcemap = False, **kwargs):
     _sass_binary(
         sourcemap = sourcemap,
+        compiler = "//tools/sass:compiler",
         **kwargs
     )
 

tools/sass/BUILD.bazel

@@ -0,0 +1,28 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "sass_lib",
+    srcs = [
+        "compiler-main.ts",
+        "local-sass-importer.ts",
+    ],
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
+    deps = [
+        "@npm//@bazel/worker",
+        "@npm//@types/node",
+        "@npm//@types/yargs",
+        "@npm//sass",
+        "@npm//yargs",
+    ],
+)
+
+nodejs_binary(
+    name = "compiler",
+    data = [":sass_lib"],
+    entry_point = "compiler-main.ts",
+    templated_args = ["--bazel_patch_module_resolver"],
+)

tools/sass/compiler-main.ts

@@ -0,0 +1,72 @@
+import * as worker from '@bazel/worker';
+import * as fs from 'fs';
+import * as sass from 'sass';
+import * as path from 'path';
+import yargs from 'yargs';
+
+import {createLocalAngularPackageImporter} from './local-sass-importer';
+
+const workerArgs = process.argv.slice(2);
+
+// Note: This path is relative to the current working directory as build actions
+// are always spawned in the execroot (which is exactly what we want).
+const execrootProjectDir = path.resolve('./src/');
+const localPackageSassImporter = createLocalAngularPackageImporter(execrootProjectDir);
+
+if (require.main === module) {
+  main().catch(e => {
+    console.error(e);
+    process.exitCode = 1;
+  });
+}
+
+async function main() {
+  if (worker.runAsWorker(workerArgs)) {
+    await worker.runWorkerLoop(args =>
+      processBuildAction(args)
+        .then(() => true)
+        .catch(error => {
+          worker.log(error);
+          return false;
+        }),
+    );
+  } else {
+    // For non-worker mode, we parse the flag/params file ourselves. The Sass rule
+    // uses a multi-line params file (with `\n` used as separator).
+    const configFile = workerArgs[0].replace(/^@+/, '');
+    const configContent = fs.readFileSync(configFile, 'utf8').trim();
+    const args = configContent.split('\n');
+
+    await processBuildAction(args);
+  }
+}
+
+/**
+ * Processes a build action expressed through command line arguments
+ * as composed by the `sass_binary` rule.
+ */
+async function processBuildAction(args: string[]) {
+  const {loadPath, style, sourceMap, embedSources, inputExecpath, outExecpath} = await yargs(args)
+    .showHelpOnFail(false)
+    .strict()
+    .parserConfiguration({'greedy-arrays': false})
+    .command('$0 <inputExecpath> <outExecpath>', 'Compiles a Sass file')
+    .positional('inputExecpath', {type: 'string', demandOption: true})
+    .positional('outExecpath', {type: 'string', demandOption: true})
+    .option('embedSources', {type: 'boolean'})
+    .option('errorCss', {type: 'boolean'})
+    .option('sourceMap', {type: 'boolean'})
+    .option('loadPath', {type: 'array', string: true})
+    .option('style', {type: 'string'})
+    .parseAsync();
+
+  const result = sass.compile(inputExecpath, {
+    style: style as sass.OutputStyle,
+    sourceMap,
+    sourceMapIncludeSources: embedSources,
+    loadPaths: loadPath,
+    importers: [localPackageSassImporter],
+  });
+
+  await fs.promises.writeFile(outExecpath, result.css);
+}

tools/sass/local-sass-importer.ts

@@ -0,0 +1,21 @@
+import {pathToFileURL} from 'url';
+import {join} from 'path';
+import * as sass from 'sass';
+
+/** Prefix indicating Angular-owned Sass imports. */
+const angularPrefix = '@angular/';
+
+/**
+ * Creates a Sass `FileImporter` that resolves `@angular/<..>` packages to the
+ * specified local packages directory.
+ */
+export function createLocalAngularPackageImporter(packageDirAbsPath: string): sass.FileImporter {
+  return {
+    findFileUrl: (url: string) => {
+      if (url.startsWith(angularPrefix)) {
+        return pathToFileURL(join(packageDirAbsPath, url.substring(angularPrefix.length)));
+      }
+      return null;
+    },
+  };
+}