Mixins with Pseudo Elements Incorrectly Namespaced

[mysterycommand]

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

[webark]

@topaxi is there any reason to ever namespace selectors who's parents are a type of atrule?

[webark]

@topaxi I guess the one reason would be media queries maybe? Maybe we could just exlude media quires at rules?

function parentIsAllowedAtRule(rule) {
  return rule.parent &&
    rule.parent.type === 'atrule' &&
    !/^@media/.test(rule.parent.name)
}

Something like that?

[topaxi]

@webark you're right, namespacing makes only sense in some atrules, i've made an exception for @media and @supports for now :)

Published as postcss-selector-namespace 1.2.8

[webark]

@topaxi sweet thanks! @mysterycommand just put our v0.2.7 with this in it.

[davearel]

FYI -- This doesn't work in an example of using a mixin for media queries (like bootstraps @media-breakpoint-*)

for example:

@include media-breakpoint-up(md) {
 .test { display: none; }
}

should produce

@media (min-width: 768px) {
  .___namespace_1234 .test { display: none; }
}

but instead it leaves the class exposed 'globally'

@media (min-width: 768px) {
  .test { display: none; }
}

[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.

[davearel]

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