How to use babel-plugin-react-css-modules without ejecting?

[davidalejandroaguilar]

TL;DR; Asking for pointers on using babel-plugin-react-css-modules without ejecting.

Hi fellow create-react-app users,

I'm a new user to this amazing tool, having only used React on Rails projects using Webpacker (I'm mostly a Ruby developer myself). I've been following courses on several resources and I got caught up on the whole styling React thing; so far choosing CSS modules as my favorite approach.

Previously, I configured CSS modules by ejecting, but now that create-react-app 2 is on the way I see CSS modules are coming with just an extension change. Great!

However, I also saw that babel-plugin-react-css-modules is being favored over react-css-modules, in order to be able to use styleName and gaining all the performance benefits.

So I read about having to use Babel Macros to use this without ejecting. But if I don't know how to create a plugin/macro, do I need to stick with importing styles as an object and using className?

Sources I've read: 1, 2, 3, 4, 5, 6

[transitive-bullshit]

It seems that you want too use babel-plugin-react-css-modules over react-css-modules, but CRA v2 doesn't use either. It's using postcss under the hood (relevant PR). It's probably useful to understand why CRA is using postcss at compile-time because it negates all the worry about runtime costs and bloat that the babel-plugin-react-css-modules talks about.

If you want to use babel-plugin-react-css-modules, then this isn't supported by CRA and imho likely won't be since its semantics deviate pretty heavily from the straightforward, opt-in version of CSS modules that CRA v2 currently supports.

My recommendation would be either to eject or use react-app-rewired@next to override the portions of the webpack / babel config that you need, but be aware that this essentially "voids the warranty" provided by base CRA in terms of guaranteeing how things work.

With that being said, my 95% recommendation would be to just use the built-in CRA support for CSS modules and not complicate things any further 😉

[davidalejandroaguilar]

Thanks @transitive-bullshit , didn't know CRA used postcss, I'll stick with it then if its recommended. This, however, does not support styleName, right? Can't find any info on it.

[transitive-bullshit]

Correct, this version uses className where you import styles from './styles.module.css'

[patricklafrance]

It's pretty easy to do with craco, here's a recipe to do it:

https://github.com/sharegate/craco/tree/master/recipes/use-babel-plugin-react-css-modules

If you want to learn more, you can find the documentation here: https://github.com/sharegate/craco/tree/master/packages/craco

[ervwalter]

Thank you @patricklafrance, that was super helpful.

FYI for all, just to be clear, babel-plugin-react-css-modules doesn't replace postcss for CSS Modules. It doesn't really do anything with processing the CSS files themselves at all. It's purely a React helper that lets you use an alternate syntax. So instead of this:

<nav className={`navbar ${styles["masthead"]}`}

You can use this:

<nav className="navbar" styleName="masthead">

The alternate syntax is nice, but the main benefit for me is that with the babel plugin in place, you get error messages when you fat finger a local class name and spell it wrong.