Re: [csswg-drafts] [CSS Import Once] @import-once, or some syntax for importing a stylesheet only once (#6130)

@LeaVerou hello! The use main use case trying to be solved is:

- make a library with various features (f.e. classy-based styles for button, input, dropdown, etc)
- we'd like the user to be able to easily import any one CSS feature without them having to import the whole library (imagine the library has many "components" that the user may not need)
- currently the user needs to manually traverse (look at) all files in the library, and come up with a list of all files they should manually `@import`. I.e. they would need to determine the dependency graph themselves, much like how jQuery users had to list all dependencies in a sequence of `<script>` tags in their HTML file
  - (ES Modules solved this: `import 'some-library'` and the dependencies are automatic)
- A dance with `@layer` is possible for managing this, but I feel it is much too complex compared to what is desired.

As for cascade, indeed if you have my-feature-1 and my-feature-2, then the order things load would depend on the order those two are imported, and that would determine the order of sub-dependencies. It would be the same as with ES modules: import order determines load order.

In JS, the order in which ES modules are loaded would indeed impact the order in which globals are defined or modified (for example one global polyfill can override another, or vice versa, when import statements are swapped, possibly causing something to break).

It just happens to be that in CSS pretty much everything is a "global API", which is great.

Ordering is what a CSS module graph will solve, not by relying on cascade, but by nature of all dependencies defining what they depend on. Just like in JS, the deepest CSS module dependencies in a module tree will be loaded/applied first before dependent CSS modules will be applied.

In essence, the problem is solved without cascade needing to be referenced. However layers could still be applied for certain cases (just like TS modules can augment global namespaces).

-- 
GitHub Notification of comment by trusktr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6130#issuecomment-4338839150 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 April 2026 20:31:52 UTC