direct nesting stops working after rule with @nest syntax

[Christian Muñoz]

Given the following CSS snippet:

.icon {
  
  @nest .small & {
    font-size: 16px;
  }
}

.positive {
  background-color: green;

  &.outline {
    background-color: transparent;
  }
}

I expected the nested .positive.outline rule to be transformed to:

.positive.outline {
  background-color: transparent;
}

But it fails silently.

You can also reproduce this by copy/pasting the snippet into the cssnext playground.

However, if you add anything (including comments) to the empty .icon rule it works as expected:

.icon {
  /* whatever */

  @nest .small & {
    font-size: 16px;
  }
}

.positive {
  background-color: green;

  &.outline {
    background-color: transparent;
  }
}

[Mattia Astorino]

I can confirm, but why you should write

.icon {
  @nest .small & {
    font-size: 16px;
  }
}

If .icon doesn't have any declarations you can just write .small .icon or .small { & .icon {} }. I know that in a component view your code is more appropriate and there is a bug.

[Max Minkoff]

I suspect this is related. It's happening in v3.0.2, including in the cssnext Playground.

This code:

.my-style {
  padding: 1.5em;

  @nest :global(.media-mobile) & {
    padding: 1em;
  }

  @nest :global(.media-narrow) & {
    padding: 0.6em 0.5em;
  }

  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

results in:

.my-style {
  padding: 1.5em
}
:global(.media-mobile) .my-style {
  padding: 1em
}
:global(.media-narrow) .my-style {
  padding: 0.6em 0.5em
}
.my-style {
  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

but this, with just one @nest:

.my-style {
  padding: 1.5em;

  @nest :global(.media-mobile) & {
    padding: 1em;
  }

  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

works properly:

.my-style {
  padding: 1.5em
}
:global(.media-mobile) .my-style {
  padding: 1em
}
.my-style .sub-style {
  font-size: 30px;
  font-family: accent-light-font;
}

[Max Thirouin]

Should be opened at https://github.com/jonathantneal/postcss-nesting

[Mattia Astorino]

There is: csstools/postcss-nesting#42
I've reported other issues from here.

[Solomon Hawk]

This is fixed in postcss-nesting@4.1 via csstools/postcss-nesting#45. Is there anything preventing us from bumping our dep to 4.1 in this repo?

[chrilith]

I confirm this bug too and latest version of postcss-nesting does fix the problem for me.

[Dmitry Semigradsky]

@solomonhawk it's not necessary to bump dependency. Semver is working good, just reinstall cssnext

[Max Thirouin]

Closing as it has been solved upstream. Just reinstall postcss-cssnext and you should get the upgrade.