Replace Less

[silverwind]

Less is a rather dead project which does not support recent CSS features as seen in #15520. I suggest moving to either SCSS or plain CSS.

Thoughts on SCSS:

• Supports pretty much everything and more that Less does
• Is 4 times more populare then Less
• Might be slower to compile with their Dart implementation
• Like less, it encourages the bad practice of deeply nesting selectors, resulting in unnecessarily big CSS output

Thoughts on CSS:

• Instant build, no compilation required
• Obviously supports all CSS features out of the box
• Does not support nesting which can be both a blessing (lightweight output) and a curse (impractical sometimes)
• Best tooling support

[silverwind]

I think plain CSS with https://www.npmjs.com/package/postcss-nesting is the way to go nowadays. Once enough browsers support native CSS nesting, the plugin can just be removed. This is btw also what vite recommends.

[silverwind]

I wonder whether we should just convert the Less to CSS and commit the output as-is, without any nesting.

It will produce long selectors for the nesting cases, but personally I prefer no nesting because it'll make the selectors from browser devtools CTRL-F able in the source which is very helpful when searching for specific selectors.

Also, not using nesting encourages developers to write shorter and better selectors. I think it's a net benefit to not have nesting.

[delvh]

Absolutely agreed.
It has another huge benefit: You can tell immediately what style classes will interfere with what you are doing.
At the moment, I simply cannot do anything untested in the frontend, simply because there might be a four times nested selector I of course didn't think about that destroys what I'm trying to do.
Let's use the following hypothetical example:
I add a link somewhere.
Unfortunately, that link is inside a div that is inside an element with the ui class, and hence there is a selector that hides the link. Yay. Who would've guessed that my link isn't shown at all?