Nested directives bubbling and selector propagation

[rjgotten]

A rather unique case came up today, where I had to nest a font-face directive inside a library mixin, which in turn is mixed into a basic class selector.

My real-world case involves scaffolding a quite complex grid layout where I have to include a font with a zero horizontal advance for white-space characters, which effectively makes the inline-block grid column elements line up snugly together.

A reduced test case of the structure is:

.mixin() {
  @font-face {
    font-family: "wf-blank";
    src: url("../fonts/wf-blank.woff");
  }
  font-family: "wf-blank";
}
.class {
  .mixin();
}

Currently, this test case produces the output:

@font-face {
  .class {
    font-family: "wf-blank";
    src: url("../fonts/wf-blank.woff");
  }
}

.class {
  font-family: "wf-blank";
}

I'd expect directives that have block context but cannot have nested rulesets, to not propagate scope selectors inside when the directive is bubbled outwards to the global scope.

I.e. I'd expect the above to produce:

@font-face {
    font-family: "wf-blank";
    src: url("../fonts/wf-blank.woff");
}

.class {
  font-family: "wf-blank";
}

I think I have an idea on how I can get the compiler to support this and I can look at authoring a pull request for it, if you agree that this is indeed something to fix.

[seven-phases-max]

It looks like it's a regression introduced with #2473. Nested @keyframes, @fontface and similar directives are semi-broken by it (they behave like @supports and @document now while they should not).

E.g.:

.class {
  color: red;
  @keyframes - {
    100% {color: green}
  }
}

result before #2473:

.class {
  color: red;
}
@keyframes - {
  100% {
    color: green;
  }
}

now it's:

.class {
  color: red;
}
@keyframes - {
  .class 100% {
    color: green;
  }
}

[rjgotten]

@seven-phases-max
You're welcome. ;-)