feat: show a sass import

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_deps.bzl", "SASS_DEPS")
 
 npm_translate_lock(
     name = "npm",
@@ -47,6 +48,10 @@ npm_translate_lock(
     custom_postinstalls = {
         "ng2-dragula": "ngcc --source .",
     },
+    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,19 @@ def ng_pkg(name, deps = [], test_deps = [], visibility = ["//visibility:public"]
 
     Args:
       name: the rule name
+      srcs: source files, if not set then we use **/*.{css,html,ts}
       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(
+    srcs = srcs or 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/lib-a/BUILD.bazel

@@ -1,12 +1,34 @@
 load("@npm//:defs.bzl", "npm_link_all_packages")
 load("//:defs.bzl", "ng_pkg")
+load("//tools:sass.bzl", sass_binary = "sass")
+load("//tools:sass_deps.bzl", "SASS_DEPS")
 
 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",
+    ] + [
+        ":node_modules/" + p
+        for p in SASS_DEPS
+    ],
+)
+
 ng_pkg(
     name = "lib-a",
+    srcs = [":css"] + glob(
+        [
+            "src/**/*.ts",
+            "src/**/*.css",
+            "src/**/*.html",
+        ],
+        exclude = ["src/**/*.spec.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,5 @@
+@use '@angular/material' as mat;
+
 $color: red;
 
 :host {