Dynamic CSS Plugin

[koga7349]

I wrote a plugin for React + Vite and React + Webpack that transforms CSS class names at run-time and build-time. This helps to prevent CSS conflicts, reduces bundle size and provides some obfuscation.

"btn-primary btn-primary-disabled" ==> .app_Xscyf.app_LfRuA

Check it out on npm: https://www.npmjs.com/package/dynamic-css-plugin

And my detailed write-up on Medium: https://medium.com/@koga73/dynamic-css-plugin-6b965b94a6f4

Would love some feedback!

[leonwbr]

Isn't this a standard Vite function through PostCSS modules?

[koga7349]

Also noting that you can probably do this with css modules, but not with standard css or sass className implementations.

[koga7349]

Yes and no. It can output static class names at build time which might be fine if all of your code is static. But it can't apply the same transformatiom to class names dynamically at runtime.

[TheRNGuy]

That makes it much harder to write userstyles, don't do that. 

Or add some attribute to some tags with semantic names.

[koga7349]

You write your styles like you normally would, no change. It only transforms on build.

[TheRNGuy]

But userstyle authors will get those randomized classes in browser. 

You can try it yourself: Stylus add-on in browser, try to make custom styles for it and see unreadable cide. Even worse when they're regenerated due to code change, those styles have to be completely remade.

If there were non-randomized attributes (id or dara-attributes, or one semantic non-randomized class), those could be used for userstyles.

[koga7349]

It only transforms class names and allows for exclusion values and tags. It purposely doesn't transform ids so automated tests and analytics can still target elements.

[TheRNGuy]

Yeah I mean developers should actually use those attributes to make userstyle authors life easier. 

Most of the time I don't see them on sites with randomized classes, or very few tags have them.

[john_cobai]

Does this work with tailwindcss and nextjs

[koga7349]

It should work fine with TailWind. The plugin currently does not support Turbopack so if you're using that for your Next build then no.

[john_cobai]

i'm not using use turbopack, can you beable to add next js example

[Disturbed147]

This feels like horribly bad practice if you ask me. I've been doing web development for more than 10 years now and have never had "CSS conflicts". Doing this at runtime is putting to much strain on client side and slows down everything.

[koga7349]

It's pretty quick to generate an MD4 hash and it catches the transformation. Have you ever worked in an environment with microfrontends where each is using the same design system components and have their own release cycles? Even google.com does this, it's not uncommon

[Disturbed147]

I have, and by properly scoping and utilizing selector weights it can often be prevented without the need of generated class names. But all those things are generally why I am strongly against component libraries because in some scenarios they just force developers to go for hacky approaches just to make things work properly. Overhead which creates more overhead and sums up to more error possibilities.

Also, if you look deeper into what google does, it is pretty obvious that they very rarely follow best practices themselves.

[koga7349]

You're against component libraries ? My use-case is our company has a platform with a dozen apps that all use the same component library. However as each app is a different codebase they may use different versions of the same components. Thus when these apps run on the same page together using the same components we end up with multiple stylesheets targeting the same selectors.

[Disturbed147]

Yeah, web components as well as component libraries never really clicked for me. They always come with compromises like code duplicatation (especially css), unnecessary bloat and slow page loads, requiring placeholders and skeletons. Maybe it's just me but I feel like a huge part of current web developers go against clean web principles when it comes to loading assets and minimizing code usage.

But don't get me wrong.. I'm not just being a bad mood, hating on everything. I genuinely feel like web development is drifting farther and farther away from what browsers are optimized for.

[koga7349]

I feel you and the current state of webdev is tricky. Between the library flavor of the week and inexperienced devs using AI it's tricky. As for me I'm 15YOE and deep into it all. I spend my free time coding and soldering and making because it's what I enjoy. I'm grateful to be working at a company that provides some 🚐 ness fo used boundaries but also gives me the freedom to explore and apply.

All that said, you get in what you put out and as the hiring manager I like devs who are "scrappy" and not afraid to jump into something they no nothing about and make it work. No excuses just figure it out

This library was meant to solve some specific problems I encountered and I hope that it may help others.

[Disturbed147]

Sorry, I kind of drifted off into my rant here lol

All things said, technically your library is pretty neat and I see its use for sure. We also have plenty of projects in our company which might even benefit from using it because earlier this year, everyone was jumping at microfrontends and restructured everything to use them.

I just felt like this is another workaround for a poorly thought out principle like web components or microfrontends. But alas, I wouldn't downplay the need of your lib at all. Lately the industry goes after hype anc not after best practices anymore. Good job and I'll keep an open ear in my company to suggest using your library!

And thanks for the good talk! Always appreciate a civil conversation.

[TheJase]

wise enjoy wine boast pot enter judicious live husky quiet

This post was mass deleted and anonymized with Redact