feat: show a sass import

Works around sass/dart-sass#1765
so that the npmjs.com/sass package can run under hoist=false.

Author: alexeagle

angular-ngc/WORKSPACE.bazel

@@ -36,6 +36,7 @@ nodejs_register_toolchains(
 )
 
 load("@aspect_rules_js//npm:npm_import.bzl", "npm_translate_lock")
+load("//tools:sass_workaround.bzl", "SASS_DEPS")
 
 npm_translate_lock(
     name = "npm",
@@ -47,6 +48,9 @@ npm_translate_lock(
     custom_postinstalls = {
         "ng2-dragula": "ngcc --source .",
     },
+    # Workaround https://github.com/sass/dart-sass/issues/1765
+    # See comments in sass_workaround.bzl
+    public_hoist_packages = {p: ["packages/lib-a"] for p in SASS_DEPS},
     npmrc = "//:.npmrc",
     pnpm_lock = "//:pnpm-lock.yaml",
     verify_node_modules_ignored = "//:.bazelignore",

angular-ngc/defs.bzl

@@ -7,7 +7,6 @@ load("@npm//:html-insert-assets/package_json.bzl", html_insert_assets_bin = "bin
 load("@npm//:karma/package_json.bzl", _karma_bin = "bin")
 load("//tools:ng.bzl", "ng_esbuild", "ng_project")
 load("//tools:ts.bzl", "ts_project")
-load("//tools:sass.bzl", "sass")
 load("//tools:karma.bzl", "generate_karma_config", "generate_test_bootstrap", "generate_test_setup")
 
 # Common dependencies of Angular applications
@@ -224,7 +223,7 @@ def _pkg_web(name, entry_point, entry_deps, html_assets, assets, production, vis
         visibility = visibility,
     )
 
-def ng_pkg(name, deps = [], test_deps = [], visibility = ["//visibility:public"]):
+def ng_pkg(name, srcs, deps = [], test_deps = [], visibility = ["//visibility:public"]):
     """
     Bazel macro for compiling an npm-like Angular package project. Creates '{name}' and 'test' targets.
 
@@ -239,27 +238,14 @@ def ng_pkg(name, deps = [], test_deps = [], visibility = ["//visibility:public"]
 
     Args:
       name: the rule name
+      srcs: source files
       deps: package dependencies
       test_deps: additional dependencies for tests
       visibility: visibility of the primary targets ('{name}', 'test')
     """
 
     test_spec_srcs = native.glob(["src/**/*.spec.ts"])
 
-    srcs = native.glob(
-        ["src/**/*.ts", "src/**/*.css", "src/**/*.html"],
-        exclude = test_spec_srcs,
-    )
-
-    sass_srcs = native.glob(["src/**/*.scss"])
-    if len(sass_srcs) > 0:
-        sass(
-            name = "_sass",
-            srcs = sass_srcs,
-            visibility = ["//visibility:private"],
-        )
-        srcs = srcs + [":_sass"]
-
     # An index file to allow direct imports of the directory similar to a package.json "main"
     write_file(
         name = "_index",

angular-ngc/package.json

@@ -5,9 +5,11 @@
   "type": "module",
   "dependencies": {
     "@angular/animations": "15.0.1",
+    "@angular/cdk": "15.0.1",
     "@angular/common": "15.0.1",
     "@angular/core": "15.0.1",
     "@angular/forms": "15.0.1",
+    "@angular/material": "15.0.1",
     "@angular/platform-browser": "15.0.1",
     "@angular/platform-browser-dynamic": "15.0.1",
     "@angular/router": "15.0.1",

angular-ngc/packages/common/BUILD.bazel

@@ -7,4 +7,9 @@ npm_link_all_packages(name = "node_modules")
 
 ng_pkg(
     name = "common",
+    srcs = [
+        "src/lib/common.component.ts",
+        "src/lib/common.module.ts",
+        "src/public-api.ts",
+    ],
 )

angular-ngc/packages/lib-a/BUILD.bazel

@@ -1,12 +1,28 @@
 load("@npm//:defs.bzl", "npm_link_all_packages")
 load("//:defs.bzl", "ng_pkg")
+load("//tools:sass.bzl", "sass_binary")
 
 package(default_visibility = ["//visibility:public"])
 
 npm_link_all_packages(name = "node_modules")
 
+sass_binary(
+    name = "css",
+    srcs = glob(["src/**/*.scss"]),
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+    ],
+)
+
 ng_pkg(
     name = "lib-a",
+    srcs = [
+        "src/lib/lib-a.component.css",
+        "src/lib/lib-a.component.ts",
+        "src/lib/lib-a.module.ts",
+        "src/public-api.ts",
+    ],
     deps = [
         ":node_modules/@ngc-example/common",
         "//packages/lib-a/src/lib/strings",

angular-ngc/packages/lib-a/src/lib/lib-a.component.scss

@@ -1,3 +1,6 @@
+// Unused import, just to test that sass can correctly resolve it.
+@use '@angular/material' as mat;
+
 $color: red;
 
 :host {