Renaming your css modules styles

I promise, I am not paid by Jetbrains. But I love their editor for Javascript, WebStorm. I know, the cool thing now is to use VisualCode. Before it was Atom, and before that it was Sublime. The former ones are “free”. For example you don’t have to pay to use Sublime but the author accepts donations for their excellent work. Webstorm is different, you have to pay to use it. At the moment of writting this you can get WebStorm for a price of £99.00. Call me stupid but I’m a developer and I make a living out off writting code, so I’m more than happy to pay a reasonable amount for a piece of software, specially if it is a tool that I use every day.

But yeah, WebStorm doesn’t come short of “WOW” moments to me. Yesterday I had one of those again.

  1. I wanted to rename a css class defined in a CSS Module and used in my React component. You know how hard it is to refactor CSS code, a simple renaming can break a few pages, that’s why many people don’t do it.

CSS class

  1. Click Ctrl+R+R in the style class in the JS file (refactor-rename) and I get this popup:

CSS class

  1. Write the new name and…

CSS class

Your css class renamed everywhere it was used, JS and CSS. How cool is that?

Written on February 18, 2018