[FR]: Document how to work with CSS files published by @angular/material

[gonzojive]

What is the current behavior?

Error encountered when trying to depend on a file within an npm dependency:

no such target '//:node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css'

It's unclear how to depend on this file.

Describe the feature

With rules_nodejs and rules_sass, I used to have this:

sass_binary(
    name = "styles",
    src = "styles.scss",
    deps = [
        ":styles_deps",
        #"//:node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
    ],
)

sass_library(
    name = "styles_deps",
    srcs = [
        "//:node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
        # //:node_modules/@angular/material
    ],
)

It no longer works due to the build error above. Do the npm rules in rules_js make such files available as bazel targets? How/why not?

Fund our work

• [ ] Sponsor our open source work by donating a feature bounty

[gonzojive]

The //:node_modules/@angular/material/dir filegroup target is available, but there is no label for referencing a particular file.

One solution: A genrule could be written to pull deeppurple-amber.css out of the runfiles for the dir filegroup.

I wonder if this type of issue might be made easier if npm_translate_lock's behavior could be more easily customized. If it doesn't quite do what the user wants, it's not simple to fix things up. The gazelle-style repo rule generation described here could use more attention: https://github.com/aspect-build/rules_js/blob/c00279c6a2b886d4c58f7e97f0b4bb90ba46f4cd/docs/pnpm.md?plain=1#L283

[alexeagle]

Technically we already have a rule to select a file out of a directory: https://docs.aspect.build/rules/aspect_bazel_lib/docs/directory_path/ however I don't think that's the right answer here.

I'd expect it to look like this:

sass_binary(
    name = "styles",
    src = "styles.scss",
    deps = [
        "//:node_modules/@angular/material",
    ],
)

where styles.scss references deeppurple-amber.css so the sass compiler uses normal node resolution semantics to locate it. This is presumably how Sass works with this code in a normal, non-Bazel project. rules_js always tries to mimic the outside-of-Bazel semantics.

[alexeagle]

Seems like the first step here is to add an example under https://github.com/aspect-build/bazel-examples somewhere so we have our own copy of it to play with and confirm the working pattern.