[csswg-drafts] Do we need real CSS modules? (#10518)

mayank99 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Do we need real CSS modules? ==
Now that [`@sheet`](https://github.com/w3c/csswg-drafts/issues/5629), [functions and mixins](https://github.com/w3c/csswg-drafts/issues/9350) have all been greelit, I think it's a great time to visit the idea of "CSS modules".

There is currently such a thing as ["CSS module scripts"](https://web.dev/articles/css-module-scripts), but that's not really CSS modules. It's a purely JS thing (hence the name "scripts"). I expect real CSS modules to bring a module system into CSS itself, enabling CSS files to properly import other CSS files.

A CSS module would be guaranteed to only be evaluated once. So if a CSS file is imported in two places, they would both get the same module instance. (There was some discussion about this in #6130).

With `@sheet`, it would also be possible to write CSS files that do not have any side-effects and are therefore safe to import in multiple places.

CSS modules open up the possibility of lexical scoping and private module members.

**Example**:

```css
@sheet A {…}
@mixin --B {…}
@function --private-fn {}

@export (A, --B);
```

```css
@import module("utils.css") sheets(A) mixins(--B);

@layer {
  @apply-sheet A;

  p {
    @apply --B;
  }
}
```

```html
<style type="module" src="styles.css"></style>
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10518 using your GitHub account


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

Received on Monday, 1 July 2024 22:27:46 UTC