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

Coming to this one a little late here, but some initial thoughts - 

1. I tend to agree with @matthewp that allowing these references to be used in selectors would be preferable. Could we not have a rule that when a reference is applied to an element, the stylesheet is automatically attached to the first stylesheet context wrapping that element (eg shadow dom / document?). Would this perhaps get around some of the apply issues for composition mentioned in having standard selector composition rules over inline composition rules here?

I do worry otherwise about how easily it would be to end up with templates looking like:

```html
import { styleA, styleB, styleC } from './style.css';
import html from 'template';
export default html`
<div cssReferences=${styleA}>
  <h1 cssReferences=${styleB}>
  <p cssReferences=${styleC}>
</div>
`;
```

sort of thing, which seems like it would get pretty ugly?

2. For minification of reference names, I'm a little concerned about exposing `stylesheet.references` globally as that can then be referenced in non-analyzable in ways that will break under minification. I would much prefer to to keep references to module references only to ensure that references are encapsulated in a way that minification is not likely to break applications.

3. ES modules have the ability to avoid reference collisions by using `import { x as y }`. Ideally it would be nice to support `@import {foo as bar} from './styles.css';` so that reference name collisions can be avoided with a similar encapsulation. It would be worth checking these types of encapsulation problems further against optimization approaches, and it would be super interesting to get some bundling tooling experiments going here too.

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

Received on Tuesday, 25 June 2019 19:40:35 UTC