tailwindcss-mangle / astro-rename

[RodrigoTomeES]

Hi!,

A while back, I embarked on a quest to discover a utility capable of compressing my CSS classes. Alas, my search proved fruitless (in hindsight, I realize my search terms were less than ideal; the correct term is "mangle" rather than "compress"). However I found a plugin of postcss developed by Google that could helped me to develop a plugin to make similar things like this but it is more limited.

The Google PostCSS plugin is postcss-rename.
My plugin for Astro that replace the classes mangled by postcss-rename is astro-rename.

Also, I have realized that the plugin that I developed has the issue that you describe here, I think your solution is pretty good.

Another issue that I found is to manage multiple CSS files for example when you work with CSS modules.

I write this issue because I think it's interesting to work together in this problem. And because I think postcss-rename and your plugin tailwindcss-patch make similar things and postcss-rename support any CSS classes and IDs so maybe can be adapted the code of tailwindcss-patch to support not only tailwindcss if not any CSS framework or just CSS. In addition, in an issue of postcss-rename was exploring to mangled CSS vars also!

How do you think?

Cheers!

P.S.: I will test your new version of unplugin-tailwindcss-mangle that fix NextJS problems with SSR, it is awesome 🚀

[sonofmagic]

hi,
I'm interested in your suggestion,
and I'm going to spend some time getting to know postcss-rename and your astro-rename first.

I write this issue because I think it's interesting to work together in this problem. And because I thinks postcss-rename and your plugin tailwindcss-patch make similar things and postcss-rename support any CSS classes and IDs so maybe can be adapted the code of tailwindcss-patch to support not only tailwindcss if not any CSS framework or just CSS. In addition, in an issue of postcss-rename was exploring to mangled CSS vars also!

That's such a cool idea.

[RodrigoTomeES]

Great! I'm really excited to hear what you think about that. I also, will check tailwind-mangle and how it works when I arrive to home (I'm on holidays right now).

On the other hand, I was thinking that it should be interesting to make a flag to enable dangerous mangles like flex if you are not using that words in JS because it compress a lot the code. In one of my projects the HTML files is reduced more or less about 50%.

You can see the report in the README of astro-rename.

[hckhanh]

And postcss-variable-compress is really insteresting to consider.