postcss-nested VS postcss-plugins

And we have to make sure that it runs before the nesting plugin, otherwise it will not work at all due to an issue when using both plugins together.

postcss-nested

What you're describing is nesting, which is currently in the proposal stages for CSS. That being said, nesting has long been a feature in many preprocessors, such as sass and less. You can also use this PostCSS plugin if you only want the nesting and nothing else.

My PostCSS Config contains postcss-preset-env already which should support for CSS nesting. I also installed postcss-nested & postcss-css-variables, just in case.

PostCSS Nested - so I can use Sass-like nesting.

A quick example that demonstrates what I've said would be the postcss nesting plugin: https://github.com/postcss/postcss-nested

Media query has limitations. @media(min-width: var(--breakpoint-lg)) won't work. PostCSS plugins support custom media query @custom-media --small-viewport (max-width: 30rem);, then @media (--small-viewport). Still duplications, but at least I can have breakpoints all defined in one file.

Who likes modern CSS? PostCSS Preset Env can help you convert modern CSS into readable browser code, by determining the polyfills needed based on the target browser or runtime environment. The latest version brings support for CSS nesting to align with the latest specifications, and the order of nested declarations and rules are preserved to better support mixins. This new update only supports Node.js 18 or higher. Check out the full list of changes in the release notes.

To bring modern CSS features to older browsers, we can use postcss-preset-env. PostCSS allows you to use modern and or future CSS features and automatically adds prefixes and, most importantly, polyfills as needed. If you don't know PostCSS, you probably already heard of Tailwind, right? It's just another PostCSS-Plugin ;)

Sass variables and CSS Custom Properties (a.k.a. CSS variables) are pretty different from each other [1].

If you want to use CSS Nesting and be backwards compatible with older browsers, the PostCSS plugin postcss-preset-env handles that and lots of other new CSS features that older browsers don't support [2].

[1]: https://sass-lang.com/blog/sass-and-native-nesting/

[2]: https://preset-env.cssdb.org

> If you want to use the normal non-& syntax, then you will need to use Safari 17.2, yes.

Non-& is not “the normal syntax”. It was a late addition to the specification. Both with and without & are normal, but with & has better compatibility.

Even if you don’t use the &, you can still write nested CSS and support older versions of Safari, like I said. Use PostCSS or Lightning CSS. There are normally several areas where you can start writing modern CSS today and fill in the backwards compatibility with these tools. It’s not just nesting.

https://preset-env.cssdb.org

https://lightningcss.dev/transpilation.html

the author of the most popular PostCSS plugin himself recommended the postcss-preset-env over his own creation which is cssnex, and

The example in A) won't work as the plugin can't convert the functions with variables in it. https://github.com/csstools/postcss-plugins/tree/main/plugin...

You can use this today if you're using PostCSS in your build process (which is the case if you use autoprefixer)! https://preset-env.cssdb.org/

Switching from a ready-made tool like Sass or a recommendation package like cssnext (deprecated since 2019) or PostCSS Preset Env (archived in 2022), to the modular PostCSS Preset Env plugin set we can choose a helpful and convenient set of future CSS features beyond the current stable client CSS.