Sass watcher doesn't re-compile on changes to meta.load-css() loaded modules?

[mirisuzanne]

(I'm using v1.55.0)

In order to use CSS @layer efficiently on an existing code-base, I switched from e.g.:

/* screen.scss */
@use 'default';
@use 'layout';
@use 'theme';

to:

/* screen.scss */
@use 'sass:meta';

@layer default { @include meta.load-css('default'); }
@layer layout { @include meta.load-css('layout'); }
@layer theme { @include meta.load-css('theme'); }

That's by far the simplest upgrade path, rather than wrapping each module individually with a layer or mixin.

But since making that change, the watcher no longer compiles any changes to modules other than screen.scss itself. Changes to any of the loaded modules are ignored by the watcher. I don't see anything about that in the docs, or the specs, or any other issues mentioning it - but I was able to reproduce the problem consistently.

Is that the expected behavior? Are others able to reproduce this?

[nex3]

This is more or less expected. meta.load-css() is intended for dynamic loads, but one of the core issues with dynamic loads is that they aren't (in general) statically analyzable in the way we currently rely on to handle file watches.

We could potentially restructure the watcher logic to look at which files are actually loaded during a given compilation rather than relying on static analysis, but this would be a fairly substantial engineering effort. For now, I'll list this as a low-priority enhancement.

[mirisuzanne]

As CSS is adding more of these architectural tools (layers, scope, etc) - these issues are becoming more and more important. As we're designing these features at the CSSWG, the main question we always get is 'how can I load stylesheets into one of these structures'. In every case we end up adding additional @import/<link> tooling to make that possible. If Sass makes all those use cases more difficult, we become a major barrier to adoption.

I don't think that's a low priority to address somehow. It may be that we want to address it in some other way - but 'nested imports' are becoming more and more central to basic CSS functionality. We need to give that some attention.

[mirisuzanne]

(sorry, I meant to open this in the sass repo - not sure why I ended up in dart-sass)

[nex3]

Miriam and I talked about this, and we're going to handle it by special-casing @include meta.load-css() with a literal string argument as something the watcher can recognize.