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

In looking at the current status of `@sheet` and how it might export stylesheets, I wonder if an at-rule would be better for this.

Something like `@block`:

```css
@block foo {
  color: red;
}
```

Then this block is importable from JS and CSS:

```ts
import {foo} from './styles.css' with {type: 'css'};
document.querySelector('#app').styleBlocks = [foo];
```

And to support userland css-modules-like use cases of exporting class names, we could invent a `@name` rule that exports a simple string name, possibly with a different value locally to help support CSS minification:

```css
@name {bar} 'long-bar-classname';

.long-bar-classname {
  background: blue;
}
// Or maybe a new pseudoclass to reference by name:
:class(bar) {
  background: blue;
}
```

```js
import {bar} from './styles.css' with {type: 'css'};
document.body.innerHTML = `<div class="${bar}"></div>`
```

The interaction with `@sheet` is that we would beed to define which at-rules define named exports, and authors would need to know that they share a single namespace. Alternatively we could add an `@export` rule to make it consistent and explicit.


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


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

Received on Friday, 7 February 2025 19:36:24 UTC