Nested BEM selectors not unwrapping

[Eevee Kreevee]

It appears that version 4.0 requires whitespace between the ampersand and nested selectors. This breaks a pattern that we have adopted for BEM style naming conventions, which had been working on the 3.0 releases.

It looks like the rule validation was the major change from 3 and 4. I was unable to decipher if this is valid based on the written spec.

Is this the expected results?

Input:

.box {
  & a { color: pink; }

  &__element {
    color: red;
  }

  &--modifier {
    color: yellow;

    & a {
      color: green;

      &:hover { text-decoration: underline; }
    }
  }
}

Output:

.box a {
    color: pink;
}
.box {
    &__element { color: red; }
    &--modifier { color: yellow; }
    &--modifier a { color: green; }
    &--modifier a:hover { text-decoration: underline; }
}

[Tom Bremer]

This is expected… The spec is set up so it matches another element, it is not a string / selector concatenation type of utility (like Sass).

selector {
    & child-element {} /* valid */
    &.same-element {} /* valid */
    & > direct-child {} /* valid */
}

There are other plugins for BEM style css: https://github.com/tbremer/postcss-atrule-bem or https://github.com/kezzbracey/postcss-bem.

You could also use postcss-nested to have Sass-like nesting: https://github.com/postcss/postcss-nested

[Jonathan Neal]

@tbremer, your response is a gold standard for clarity, accuracy, and helpfulness. Thank you.

[Eevee Kreevee]

Thanks folks. The clarity between sass using concatenation and nesting using selectors is really helpful here! Maybe the language on the README could be improved to lead people towards that understanding. since most of us will have come to this feature from sass, that conceptual jump seems important.

PostCSS Nesting lets you nest style rules selectors inside each other

My original hope was that we were using standard track stuff, but it looks like we will end up using postcss-nested instead.

[Tom Bremer]

@jonathantneal glad to help, thanks for your kind words!

@krambuhl good luck with your project!