Re: [csswg-drafts] [css-selectors] Reference selectors (#3714)

> In that example, there is a clear distinction between lexical naming, and things that are being exported.

I'm generally a fan of export, my example was mostly just illustrating extending `$name` beyond simply selectors, and instead to wider range of CSS things.

> On the JS side, it seems the main thing needed is rules, and applying those rules in order. That is a subset of features that could be achieved with lexically-scoped references in the CSS language itself.

I think most would be useful, but rules would certainly be the most important to support as you could wrap most of the others in a rule.

Although note that in either case, because we have `CSSStyleSheet` and all it's related APIs all these objects are going to have to be exposed to JS *anyway*, so for example we'd be able to see `@keyframes $myAnimation {}` as a `CSSKeyframesRule`. In which case we need all the serialization and stuff to work anyway, so we might as well just allow `someElement.style.animationName = myAnimationRule`.

---

Given that serialization needs work, I wonder if a good way to do this would be make css imports/lexical names also have a "dynamic" syntax, in way of a function.

In this case we'd have:

```css
@keyframes $localAnimation {
    
}

.myElement {
    @merge import(./path/to/module.css $myImport);
    animation-name: import(./animation.css $myAnimation);
}

.otherElement {
    animation-name: $localAnimation;
}
```

That way from JS, these would be equivalent:

```js
import { myAnimation } from "./sheet.css";

console.log(myAnimation); // CSSKeyframesRule
myElement.style.animationName = myAnimation;

// This would get serialized to the import function form:
// import(https://my.tld/path/to/sheet.css $animationName)
console.log(myElement.style.animationName);
```

```js
const cssModule = new URL("./sheet.css", import.meta.url);
myElement.style.myAnimation = `import(${ cssModule.href } $myAnimation)`;
```

-- 
GitHub Notification of comment by Jamesernator
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3714#issuecomment-813117108 using your GitHub account


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

Received on Sunday, 4 April 2021 23:39:10 UTC