Re: [w3c/webcomponents] CSS Modules (#759)

So something I've been playing around with is creating a transform system that is a superset of this proposal with the things I mentioned [here](https://github.com/w3c/csswg-drafts/issues/3714#issuecomment-490811668) supported as well.

In particular I hope to be able to solve ICSS modules use cases (but not necessarily be syntax compatible) while also supporting Shadow DOM well and keeping the door open for future extension.

In particular I aim to have imports from both CSS and JS of values, keyframes, selectors, custom property names and custom names (e.g. for `paint($name)`) working within a few weeks.

I haven't decided exactly how selectors will work, but I'm leaning towards treating them more like classes than rulesets, so that generic selectors work e.g.:

```css
/* metrics.css */

$gridBaseline: 8px;
```

```css
/* mixin.css */

@import "./metrics.css" {
  names: $gridBaseline;
}

$mixin {
  background-color: red;
  color: black;
}

$mixin > p + p {
  margin-start: calc($gridBaseline * 2);
}

$mixin > h1 {
  margin-start: calc($gridBaseline * 4);
}

$large {
  @extends $mixin;
  font-size: 1.2em;
}
```

```css
/* myComponent.css */
@import "/path/to/mixin.css" {
  names: $mixin;
}

#main {
  @extends $mixin;
}
```

```js
/* myComponent.js */
import styles from './styles.css';
import { large as largeStyles } from '/path/to/mixin.css';

/* ... */
this.shadowRoot.adoptedStyleSheets = [styles];

/* ... onChange */

if (this.getAttribute('size') === 'large') {
  this.shadowRoot.querySelector('#main').adoptedClasses.add(largeStyles);
}
/* ... */
```


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