Spec for the @at-root directive

I’d like to nail down the exact spec for how @at-root will work.

So here’s some test cases:

inline selector mode

.foo { @at-root .bar { color: gray; } }

.bar { color: gray; }

& still works when not in script mode

.foo { @at-root .bar & { color: gray; } }

.bar .foo { color: gray; }

& works when in script mode

.foo { @at-root .bar #{&} { color: gray; } }

.bar .foo { color: gray; }

@at-root can take a block

.foo { @at-root { .bar #{&} { color: gray; } } }

.bar .foo { color: gray; }

@at-root blocks only affect the nearest child selectors.

.foo { @at-root { .bar { .baz { color: gray; } } } }

.bar .baz { color: gray; }

@at-root doesn’t remove selectors from directives by default.

@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root {
        .bar #{&} {
          color: gray; } } } } }

@media print { @supports ( transform-origin: 5% 5% ) { .bar .foo { color: gray; } } }

@at-root in block form can remove a selector from all directives.

@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root without-directives {
        .bar #{&} {
          color: gray; } } } } }

.bar .foo { color: gray; }

@at-root in block form can remove a selector from specific directives.

Media:

@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root without-media {
        .bar #{&} {
          color: gray; } } } } }

@supports ( transform-origin: 5% 5% ) { .bar .foo { color: gray; } }

Supports:

@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root without-supports {
        .bar #{&} {
          color: gray; } } } } }

@media print { .bar .foo { color: gray; } }

Several directives removed:

@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root without-supports, without-media {
        .bar #{&} {
          color: gray; } } } } }

.bar .foo { color: gray; }

Selector inheritance uses the resulting selector and directive context.

%outside-the-media-block { color: gray }
@media print {
  @supports ( transform-origin: 5% 5% ) {
    .foo {
      @at-root without-directives {
        .bar #{&} {
          // not an error because the directives were removed.
          @extend %outside-the-media-block;  } } } } }

.bar .foo { color: gray; }

In theory we can make without-xxx be agnostic of directive type, but this may have issues with prefixed directives. Or we can have a whitelist of directive names.

The cases around directive removal will solve a big problem with the limitations around using @extend within media blocks. Specifically, this allows you to extend a selector via a mixin for all media contexts instead of just within the current media block.

[davestewart]

Yeah, an @at-node(n) construct to traverse back up the selector tree would be great. I’ve needed that a few times.

[nex3]

@at-root without-whatever is syntactically ambiguous with the @at-root <selector> syntax. If we’re going to add flags like that, I think we’d need to find a better syntax for it. One possibility is using the !important flag syntax, as in @at-root !without-supports.