29-08-22

A quick update on my last post about editors and CSS modules.

I’ve done a little more research on this and found a couple of things.

Built-in emmet solution

One, the most obvious solution was under my nose the whole time. I had no idea, and hadn’t thought to try, writing .{styles.classname} actually works.

Which is entirely enough for me not to really care whether or not I can just do the shorter .classname.

The only thing slight annoyance is the className autocomplete when you’re adding on to an existing element opens single quotes and have to backspace and replace with curly braces each time.

Babel plugin solution

The other option I actually stumbled on is quite interesting. There is a babel plugin (babel-plugin-react-css-modules) I found to switch out className with styleName. You simply just write in the class names without the ‘styles’ object reference as you would for global scoped CSS and it all complies down to the regular code you’d normally write.

Even better it allows you to still use className specifically for global styles only.

So overall I’m pretty satisfied with both these options and either would be enough to remove that disrupting feeling having to swap out autocompleted code every line or so.