[CSS Import Once] @import-once, or some syntax for importing a stylesheet only once

[trusktr]

Cascade Layers (#4470) does give us the ability to manage duplication caused by files @importing the same shared files: it allows us to place the (duplicate) imports in a high-cascade layer so that duplicates will not override the overrides of files that import the shared code to override the shared values.

(If that's not clear, let me know and I'll make a live example of the unexpected problems it causes.)

Although this will help, it won't actually prevent the duplication.

Adding something like @import-once would solve the duplication problem regardless of cascade layers, but would still be complimentary to cascade layers.

@import-once would do what the name implies: it only does what @import normally does when a fully-qualified URL has not been imported before.

• On first occurrence of @import-once "/some.css" it behaves just like @import.
• On every occurrence after that for the same URL (based on it's fully-qualified value), it is effectively skipped (no-op).
  • Maybe it isn't a complete no-op: perhaps all style sheets that import the same style URL with @import-once will have a link to the same CSSStyleSheet in their import-once rule object.
  • The feature is a "no-op" behavior-wise when it comes to the style rules that are actually applied to the DOM.

Only one stylesheet with content from some.css will be loaded. The behavior is based on the fully-resolved URLs, otherwise differing relative paths pointing to the same file would still load, causing duplication.

So it's not completely a no-op after the first occurrence: it still needs to resolve the URL, and it determines whether to continue or not based on the fully-qualified URL.

Sidenote, CSS ES Modules will behave like @import-once. They also talked about making @import in CSS Modules behave like the @import-once idea here for various reasons (but that would be a hack, better to let the CSS work as expected, and give CSS @import-once in addition).

• CSS Modules v1 Explainer
• CSS Modules discussion issue

---

Also see the @import (once) syntax from Less. It is the default behavior for @import in Less.

@import-once syntax is bike-sheddable.

[nuxodin]

I would appreciate this syntax as it is polyfillable:
@import url("style.css") once;
Although once does not really represent a media in the literal sense.

[trusktr]

Here is @nuxodin's polyfill: https://twitter.com/tobiasbu/status/1374489633325674500

[trusktr]

Here's the issue described in ESBuild's "CSS caveats" section:

https://esbuild.github.io/content-types/#css-import-order

[trusktr]

This would import a style sheet once in the document where it is used. If used in a ShadowRoot it would import once within that ShadowRoot.

[trusktr]

Why is there not much attention to this issue?

This is the single most notable feature of native CSS preventing everyone from writing highly re-usable modular vanilla CSS code.

This has long been solved in non-native CSS-alternative languages like Less (see @import (once)) or Sass (see deprecation of @import and its replacement @use which strictly only imports once).

[emilio]

Some questions:

• What is the "deduplication key", just the whole resolved URI? That is potentially problematic if the same URI is imported from two different-origin stylesheets, I think...
• Is there any precedent in CSS where the first occurrence of something wins? Don't get me wrong, that is the only reasonable way to implement this I think, but seems like a weird thing which I'm not sure has a precedent.
• What happens if you import once conditionally, but with different conditions? What if those conditions change?

[romainmenke]

Is there any precedent in CSS where the first occurrence of something wins? Don't get me wrong, that is the only reasonable way to implement this I think, but seems like a weird thing which I'm not sure has a precedent.

Cascade layers.

---

• What happens if you import once with different cascade layers?

---

This is the single most notable feature of native CSS preventing everyone from writing highly re-usable modular vanilla CSS code.

I don't see how this would be solved by @import-once.

Can you give more detailed examples where vanilla CSS could have been more re-usable and modular but that this was prevented by this specific aspect of @import?

I feel like there is some step or aspect that I am missing.

[nuxodin]

Hi Emilio, good questions.

* What is the "deduplication key", just the whole resolved URI? That is potentially problematic if the same URI is imported from two different-origin stylesheets, I think...

I think this is exactly the purpose of this proposal.
Both require this stylesheet, but do not override any rules that may have been changed.....

* Is there any precedent in CSS where the _first_ occurrence of something wins? Don't get me wrong, that is the only reasonable way to implement this I think, but seems like a weird thing which I'm not sure has a precedent.

It also worked with es-modules.
And you can see that there is a need for this by the fact that both Less and Sass do exactly this. (by default!)

* What happens if you import once conditionally, but with different conditions? What if those conditions change?

Only the first appearance of @import_once should be taken into account.
This way, anyone who needs the stylesheet can still modify its rules, even if conditions vary over time.

[romainmenke]

And you can see that there is a need for this by the fact that both Less and Sass do exactly this.

I don't think this is necessarily true.

postcss-import for example also has the behavior of @import-once but that was just a mistake/bug and then it became too hard to change the default to the correct behavior.
Do we know that the same isn't true for Less and Sass?

I don't think we can say : "tools do this, so it's needed".
I think it needs to be demonstrated on it's own why it would be useful.