postcss-nesting: nested conditionals

[romainmenke]

see : w3c/csswg-drafts#8738 (comment)

::before, ::after {
	color: blue;

	@media screen { color: cyan; }
}

Is now equivalent to :

::before, ::after {
	color: blue;

	@media screen {
		@nest {
			color: cyan;
		}
	}
}

Where @nest represents the parent rule and its selector directly.
There is no wrapping in :is().

@nest doesn't take any arguments/params.

@nest is not sure to remain as its value as an author writeable rule is questionable. Because of this I didn't want to add support for this new @nest just yet. We can transpile to unnested CSS without it.

[Antonio-Laguna]

Is this indent intentional?

Also, I assume you want to patch this after the major?

[romainmenke]

Before the major.

This is a minimally breaking change.
(Any change theoretically is a breaking change for someone.)

It is only breaking when having something like this :

a, .link {
  @media (min-width: 64rem) {
    color: blue;
  }
}

a {
  color: red;
}

Before this change blue would have specificity [0, 1, 0] because of :is() and would overrule red.

After this change blue will have specificity [0, 0, 1] and red will have win because it appears later.

So it only affects declarations in nested conditionals that became more specific as a result of :is() and had lower specificity declarations appearing after it.

User that do depend on the :is() behavior would need to opt-in by writing :

a, .link {
  @media (min-width: 64rem) {
    & {
      color: blue;
    }
  }
}

a {
  color: red;
}

---

Chrome had a use counter for this and other patterns that would be affected by this change as the result was extremely low:

CSSNestedGroupRuleSpecificity (0.00017%), which triggers when @nest-wrapping bare declarations within a nested group rule would make a difference to the cascade. Making this move would allow nesting e.g. @media in pseudo-element rules, which doesn't work currently since we're wrapping in an &-rule.

I am sure that our users will have a higher number (Chrome doesn't see what we transpile away) but hoping that the pattern is still sufficiently rare.

[Antonio-Laguna]

Ahh, makes sense!

[romainmenke]

Is this indent intentional?

Forgot to address this

This change is specific to that edition.
It doesn't affect the plugin as a whole.

That indent will make it a nested (no pun intended) list item.