:root not possible in component CSS files

[jamesarosen]

I'd like to define some CSS variables for my component. For example,

// app/styles/components/my-component.scss
:root {
  --my-component-color: blue;
}

& {
  color: var(--my-component-color);
  some: other-style-that-cannot-be-customized;
}

This would let component authors allow certain aspects of their component to be customized, but not others.

See #281

[topaxi]

The CSS transform plugin already supports this, it should be easy to enable if the active maintainers agree that this is would be useful. I think I discussed this initially and agreed that the goal of ember-component-css was encapsulation and supporting :root {} was not in the spirit of the project. Anyways, as you bring this up and I've been spending a while with Angular component styles, I find myself using :root {} now and then. In my opinion it should possible to allow breaking out of the components selector and it is the responsibility of the developers to not abuse this too much.

[webark]

@jamesarosen I think you can use the sass @at-root directive, when using sass. Is :root a css next thing?

[webark]

hmm.. seems like it is in the spec. I’ll look into why it’s not using that feature from the namespacing addon @topaxi I thought we had supported it. Is there a config that isn’t being set or something?

[topaxi]

It is explicitely disabled here: lib/preprocess-class-names.js#L16 I've discussed this with ebryn quite a while back here (+ slack): https://github.com/ebryn/ember-component-css/issues/83#issuecomment-175633118

[webark]

oohh..!!! Ha! it is. hmmm.. I’d say that if it’s a language feature that exists in css, which it appears to be, https://developer.mozilla.org/en-US/docs/Web/CSS/:root then that should be something that we support.

[lougreenwood]

any movement on this?