gatsby-plugin-react-css-modules styleName generated class not matching

[Hitunen]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Starting with a default starter project, after adding sass & react-css-modules, generated class names' hash parts are not matching.

Probably related to gajus/babel-plugin-react-css-modules#291

Reproduction Link

https://gitlab.com/Hitunen/gatsby-css-module-stylename-bug

Steps to Reproduce

1. Clone reproduction repo, npm install & npm start
2. Compare generated class names in markup & css. In my case "index-module--test---j_NR" vs "index-module--test---2PAo".

Expected Result

The generated component class name should match the generated css class name, and the style should be applied.

Actual Result

The generated component class name does not match the generated css class name, so the style is NOT applied.
In my case "index-module--test---j_NR" vs "index-module--test---2PAo".

Environment

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 95.0.1
    Safari: 15.0
  npmPackages:
    gatsby: ^4.4.0 => 4.4.0
    gatsby-plugin-gatsby-cloud: ^4.4.0 => 4.4.0
    gatsby-plugin-image: ^2.4.0 => 2.4.0
    gatsby-plugin-manifest: ^4.4.0 => 4.4.0
    gatsby-plugin-offline: ^5.4.0 => 5.4.0
    gatsby-plugin-react-css-modules: ^4.4.0 => 4.4.0
    gatsby-plugin-react-helmet: ^5.4.0 => 5.4.0
    gatsby-plugin-sass: ^5.4.0 => 5.4.0
    gatsby-plugin-sharp: ^4.4.0 => 4.4.0
    gatsby-source-filesystem: ^4.4.0 => 4.4.0
    gatsby-transformer-sharp: ^4.4.0 => 4.4.0

Config Flags

No response

[LekoArts]

Hi!
You don't need to use the plugin as Gatsby handles CSS modules by default already (including SASS). If you still want to use the babel plugin you'll need to adapt the plugin and use the fork that is mentioned in the issue you linked.