Use it with babel-plugin-react-css-modules

[Igor-Vuk]

Is there a way to use it with babel-plugin-react-css-modules? There is no need for style object with this install. For example I use it like this.

import './titleComponent.local.scss'
const TitleComponent = () => (
  <div styleName="container">
    <h2 styleName="align-center">Home Scene</h2>
    <img src={logo} alt="logo" styleName="imageRotate" className="img-fluid mx-auto d-block" />
  </div>
)

styleName are CSS Modules and className are global (Bootstrap styles) and this is how my snapshot looks when testing with JEST. Instead of just the the name of the class it gives me the whole generated css module name.

exports[`should render TitleComponent correctly 1`] = `
<div
  className="scenes-home-components-___titleComponent-local__container___3XGZ-"
>
  <h2
    className="scenes-home-components-___titleComponent-local__align-center___weEgB"
  >
    Home Scene
  </h2>
  <img
    alt="logo"
    className="img-fluid mx-auto d-block scenes-home-components-___titleComponent-local__imageRotate___XkO9S"
    src="test-file-stub"
  />
</div>

[designbyadrian]

I added a new entry in .babelrc for the test environment:

"development": {},
"production": {},
"test": {
  "plugins": [
    ["babel-plugin-react-css-modules", {
      "generateScopedName": "[name]-[local]", ⬅️ name it whatever you wish
      ...
      }
    }]
  ]
}