Mixins with Pseudo Elements Incorrectly Namespaced

This SCSS:

@mixin do-a-thing-with-pseudo-elements() {
  position: relative;
  &::before {
    content: '';
    // whatever else in here
  }
}

.some-class {
  @include do-a-thing-with-pseudo-elements();
}

… produces this CSS:

.___namespace_1234 .some-class {
  position: relative;
}
.___namespace_1234 .some-class ___namespace_1234::before {
  content: '';
  // whatever else in here
}

… but should produce:

.___namespace_1234 .some-class {
  position: relative;
}
.___namespace_1234 .some-class::before {
  content: '';
  // whatever else in here
}

cc/ @oligriffiths

[davearel]

@webark probably the best temporary fix. Or use something like & {} and just wrap everything inside it.

[webark]

@davearel hmm… That one is tricky. We namespace before we preprocess the style files. In your case, that would be somewhere you’d have to preprocess it before adding the namespaces, which opens up a whole other can of worms. I’d say, giving you access to some kine of :--component css property that refers to the component would be better. But maybe not.