Re: [w3ctag/design-reviews] Declarative CSS Modules and Declarative Shadow DOM `adoptedstylesheets` attribute (Issue #1000)

trusktr left a comment (w3ctag/design-reviews#1000)

> The idea of ensuring `<link>` and `@import` do deduplication is awesome!

Ok maybe it isn't fully off topic. :)

`@import` should just work the same regardless of a sheet is "constructible" or not. If a module sheet is imported once only, then it makes sense for an `@import`ed sheet to be fetched and created a single time and shared too.

But without diving into the details, it seems like the main issue is this:

```js
new CSSStyleSheet()
```

Is that treated as a classic sheet, or a module sheet?

One answer I imagine (the functionality details aside) is make `new CSSStyleSheet()` just be a classic sheet with classic behavior (non-breaking because no one can do that today to begin with), but allow an option for the module behavior:

```js
new CSSStyleSheet({ type: 'module' })
```

Or similar. Then, link type module, and JS import statements imply that type:module is used for the sheets.

---

But why do we even need two types of sheets????

Just like HTML that is not a module can import a module (script type=module) why not just keep existing features of CSS working as is (enable `@import` in CSS modules, working the same as classic sheets), and *then* add a new specific way to import modules that way we keep existing features non-confused.

Or in other words, CSS can simply gain a new feature to import CSS from the module map, while everything else the same.

Example:

```css
/* classic import */
@import "foo.css"

/* module import */
@import module "foo.css" /* or some syntax */
```

Then we only ever need `new CSSStyleSheet()`.

But that begs the question: why do we even need a new syntax for modules.

Can we just make `@import` look at the module map. The only reason I can think of is because that's not backwards compatible: someone's app may break if it suddenly starts importing something else the moment module map is enabled.

So, we simply add `@import module` or some similar syntax, and everything else behaves exactly the same: sheets imported with `@import module` simply go in the importing sheet's CSSImportRule in the CSSOM hierarchy just like classic sheets.

Later on we could add syntax for referencing things from module-mode imported sheets, but that's hypothetical.

# TLDR:

Literally the only difference would be is one syntax (classic `@import`) does not perform module map lookup for back compat, while a new syntax does.

There are otherwise no reasons for any other differences, and there will be no need to even keep the distinction of constructible vs non-constructible sheets. That distinction vanishes.


All sheets will be `new CSSStyleSheet()` with no confusion.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1000#issuecomment-5228116656
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1000/5228116656@github.com>