Re: [WICG/webcomponents] define behavior of `@import` in Cascading Style Sheet (CSS) modules (#870)

This is important because one of the main reasons someone could want to move away from putting this,

```js
this.shadowRoot.innerHTML = `
  <div> ... </div>
  <style>
    @import "/css/animations/wobble.css"

    div {
      animation: 1s ease wobble;
    }
  </style>
`
```

into their custom elements is that they want to move to using `import`, so that a build tool can inline all the CSS instead of the browser having to fetch all the re-usable bits of CSS. F.e.:

```css
/* me-el.css */
@import "/css/animations/wobble.css"

div {
  animation: 1s ease wobble;
}
```
```js
import sheet from "./my-el.css" // build tool inlines

// ...
this.shadowRoot.innerHTML = `
  <div> ... </div>
`
this.shadowRoot.adoptedStyleSheet = [sheet]
```

---

Perhaps making an `@import` alternative (f.e. similar LESS's import-once) in order to solve some of these problems in an alternative way, and leaving `@import` as-is so it is not confusing depending on usage (people **_do_** inspect the CSS OM, we can't prevent it), would be a better approach:

- https://github.com/w3c/csswg-drafts/issues/6130

If we agree to keep `@import` as-is, and agree to later add an alternative that fixes some of the issues outlines here and in that thread, then `@import` can simply do what it does exactly like inside a `<style>` element, and then the new alternative can be added for use later.

This might get more people further along today, than having them wait on debating how to change `@import`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/870#issuecomment-1703247114
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/870/1703247114@github.com>