Gatsby: CSS Modules not working with bracket notation (eg. `style['class-name']`)

[gvocale]

Currently writing CSS classes with dashes by using the bracket notation (eg. style['class-name']) doesn't seem to work in Gatsby. The CSS modules page says bracket notation should work https://github.com/css-modules/css-modules#naming.

Is it intended behavior in Gatsby to not support dashed classes in bracket notation?

The use case is: I am moving many components using SUIT classes to Gatsby. If dashed classes are not supported via bracket notation, I would have to rename most of my classes, since they are all the kind of:

.MyComponent {}
.MyComponent.is-animating {}
.MyComponent--modifier {}

.MyComponent-part {}
.MyComponent-anotherPart {}

[t2ca]

This should help https://github.com/gatsbyjs/gatsby/issues/10852

[sidharthachatterjee]

Hey @gvocale

From the documentation at https://www.gatsbyjs.org/docs/component-css/

If you’re used to writing CSS with the BEM methodology, a quick thing to note is that CSS Modules camelizes class names that contain dashes.

For example: block--modifier turns into blockModifier.

[DSchau]

@sidharthachatterjee exactly, yep.

@gvocale we specifically convert class names to camel case (e.g. my-class-name is available as styles.myClassName) for easier consumption in the JS files.

I'm going to close this as answered, but please feel free to continue the discussion if we can help further.

Thanks for using Gatsby! 💜

[m-allanson]

Note that you can change this behaviour by modifying Gatsby's webpack config - there's an example here: https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#update-css-modules-class-names-that-use-dashes

[joepin]

Thanks for the info! Any chance this behavior can be set more easily through a simple flag in gatsby-config.js? This would help people like myself migrate existing codebases to Gatsby.
@DSchau @sidharthachatterjee