postcss-nested VS less.js

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

🎨 LESS is recommended by the Umi team officially as a styles preprocessor which is a bit weird and original. I didn't see it often (never, actually) in other tools (which doesn't lessen LESS's awesomeness, of course) and it creates some vibe of exclusivity and rebellion (as everything in Umi, TBH).

Less Documentation

Consider using a preprocessor: SCSS or LESS can help you structure and reuse your styles effectively.

Supports Less/Sass/Stylus.

Less: A CSS extension with good compatibility and low learning curve.

Less is a CSS preprocessor that builds on traditional CSS's core capabilities by introducing features such as variables, nested rules, and mixins.

Styled System Styled System is a collection of utilities for building responsive, theme-based design systems with styled-components. It provides a set of functions for handling responsive styles, spacing, color, and typography.

Sass, Less and Stylus, extends CSS by adding variables, nesting mixins, and other features. It's an excellent solution for organizing huge and complex stylesheets.

I hate preprocessors. Be it SASS, SCSS, LESS, Stylus, or any other. Really, without any exceptions. Though, I think my hatred for preprocessors is not because of the technology itself, but because of how other people use them. Throughout my development career, I have often encountered tickets where a seemingly simple task, like changing the text size, which should take minutes, ended up taking me hours. This is because people often want to use the tool to its full extent. As a result, to find where I needed to change the text size in projects using preprocessors to the max, I had to go through several mixins, maybe a loop or even nested loops, and several nested selectors using the parent selector. Brr, just thinking about it gives me the shivers.