Tailwind-ish usage?

[wmertens]

Tailwind's popularity shows that there's something about their flavor of atomicity. It's certainly nice to just put the class antialias on a document and it translates to the incatation for antialiasing text.

So I wonder if it is possible to create a library file of tailwind-like classes (so a huge shared file), and then tree shaking will only keep the classes that are actually used?

[johanholmerin]

Tree shaking will only affect the javascript, so any unused CSS won't be removed. When the styles are used in the file they are defined the style9 compiler will skip any unused styles but it can't do so for exports. Apart from that your use case should work.

[wmertens]

Hmmm, would it be hard to implement tailwind's purge? I believe it to be a post-build step where all the used class names are scanned in the build output, and then in the CSS anything not matching a used class name is removed?

If you're interested, I'm trying to use style9 in Qwik but failing (blitz here), the qwik vite plugin seems to convert the style object to just {} somehow, and it exports it which style9 doesn't like (I commented out that test in the module). But more generally I think perhaps Qwik can offer lower-level support.

[johanholmerin]

Yes, you could implement something like that, it shouldn't be too hard. I don't think it belongs in style9 though.

Looking at your Qwik example the problem is indeed the added export statement. Without that it should work fine

[wmertens]

Looking at your Qwik example the problem is indeed the added export statement. Without that it should work fine

Hmm there's more going on, the output of the JS has const styles = {}, so something gets lost

[johanholmerin]

That's a result of the style9 compiler removing code that's not needed anymore. If you were to use styles.red that property would be kept.

[wmertens]

Hmm something's wrong with the client build. The server build gets transformed correctly but the client build only gets the code removal, not the styles(...) replacement. I'll investigate.