Recommended CSS Compiler for Solid

hey y'all. It's been a minute since I've worked with SASS or LESS, and I'm wondering if there are any new compilers that have come up in recent years that do a great job of supporting nested classes. I have a project where the goal is to compile custom CSS and ensure it works well with Solid hot reload. Are SASS and LESS still relevant, and are there any gotchas when implementing them in solid?

Noel (Shadow)OP•6/19/24, 5:35 PM

LESS supported this style of CSS code and i'm looking for something similar in the realm of modern Solid principles.

Noel (Shadow)OP•6/19/24, 5:42 PM

ALso guidance on minification for that too if possible.

peerreynders•6/19/24, 7:11 PM

That's all handlled by Vite.js.

With Sass just be prepared to lean more heavily into and given the way Vite handles things.

vitejs

Features

Next Generation Frontend Tooling

Max•6/20/24, 1:26 PM

I personally don't like using SASS or LESS, i think CSS preprocessors are useful if creating complex css for HTML when the rendering is not controlled by js.

With solid, even if you prerender, you have all the rendering logic in js/ts so you know where all the nodes are and can pass styles are classes in there. So from that point of view I prefer to keep css with minimal logic.

For your example, I think regular CSS now supports nested queries on all browsers, if you have to support older versions you can always use something like postcss with vite.

Personally, if I want to break down some more complex styles, I like using vanilla extract which is basically css in typescript, but can create type safe composable styles and even can almost implement type safe design systems. But that's pretty personal, I could see a lot of people probably not wanting to add more typescript then they need

Max•6/20/24, 1:28 PM

As for minification, vite should minify css according to the minify option that also minifies the js. You can chose between esbuild and lightningcss, both good.

Max•6/20/24, 1:29 PM

Here are links if interested

https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector#browser_compatibility

https://vanilla-extract.style/

https://vitejs.dev/config/build-options#build-cssminify

vanilla-extract

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

Zero-runtime Stylesheets-in-TypeScript.

vitejs

Build Options

Next Generation Frontend Tooling

MDN Web Docs

& nesting selector - CSS: Cascading Style Sheets | MDN

The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors relative to the parent element. Without the & nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were wit...