PostCSS Preset Env 10

We're very mindful of the impact that major releases have, which is why we're trying to keep the changes well documented, well thought out and establish a good way to move forward.

As a quick summary, we're trying to achieve the following:

Closest to spec

A polyfill should be indistinguishable from the native behavior

This has been our motto for a while! We've seen that specs rarely change, but they do! And also, over time, some plugins got some features that were not spec-compliant. We've closely reviewed plugins and made corrections where needed.

Nesting changed (again 😛)

The previous edition (2021) was created before nesting shipped natively and the spec editors and implementers went through multiple rounds of (breaking) changes while shipping.

Even though it has been in browsers for a while now there are still more (also breaking) changes happening.

The most recent change is that rules and declarations will now preserve their order, even when nested.

.foo {
  color: blue;

  & { color: pink; }

  color: yellow;
}

In the previous version this would be re-ordered to :

.foo {
  color: blue;
  color: yellow;

  & { color: pink; }
}

But this re-ordering isn't ideal behavior for other future features, like mixins and custom functions as those look like at rules but often represent declarations. These should be inserted where the mixin was used, not after all other declarations.

postcss-preset-env will now use the 2024-02 edition for postcss-nesting by default.
This matches the current specification.

You can revert to the behavior of postcss-preset-env v9 with:

const postcssPresetEnv = require('postcss-preset-env');

const yourConfig = {
	plugins: [
		postcssPresetEnv({
			features: {
				'nesting-rules': ['auto', { edition: '2021' }],
			},
		})
	]
}

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#edition

Node 18

The minimum required node version for all packages and plugins is now node 18.