[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.

[sbarfurth]

We also need to compile Sass with a dependency from a node module (Angular CDK). Has there been any progress since the last activity here that would make this easier or more intuitive? What about an example?

[alexeagle]

@sbarfurth I haven't found time for this - if you could make the example (even with broken CSS files) that would be super-helpful, then a maintainer here just has to fix it.

[sbarfurth]

@sbarfurth I haven't found time for this - if you could make the example (even with broken CSS files) that would be super-helpful, then a maintainer here just has to fix it.

Will make you a simple example tomorrow. To be clear: this can be solved today, but it's neither intuitive nor efficient since it currently requires creating a sass library with the entire node module as a source or manually plucking files with additional rules. Doable but not nice :)

[sbarfurth]

Here's a simple example: https://github.com/sbarfurth/rules_js_sass_lib

This works. Not sure if this has inefficiencies with the sass_library looking at the TreeArtifact.

[sbarfurth]

Made it public now, my bad.