Gatsby v3 migration doesn't recognize dashed css (only camelCased)

[wslyvh]

Description

We're trying to migrate from Gatsby v2 to v3. Following the guide at:
https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
But our 'dashed-css' doesn't work afterwards anymore.

Steps to reproduce

1/ Upgraded the packages.
2/ Update gatsby-plugin-sass config to avoid updating all our CSS imports, as described at:
https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules

      resolve: 'gatsby-plugin-sass',
      options: {
        implementation: require('sass'),
        cssLoaderOptions: {
          camelCase: false,
          esModule: false,
          modules: {
            namedExport: false,
          },
        },
      },

Results

We can run the solution without error, but our dashed css classes aren't recognized anymore.
Only camelCased classes work.

E.g.
Before migration
className={css['top-section']} works
className={css['topSection']} doesn't work

After migration it's the other way around
className={css['topSection']} works
className={css['top-section']} doesn't work

We use the dashed approach throughout our solution and would prefer to keep it that way.
I guess we should be able to update some configs, but not exactly sure which?

Environment

System:
OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 12.18.2 - /tmp/yarn--1617287919281-0.6887781334559739/node
Yarn: 1.22.5 - /tmp/yarn--1617287919281-0.6887781334559739/yarn
npm: 6.14.8 - /usr/bin/npm
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
npmPackages:
gatsby: ^3.2.0 => 3.2.0
gatsby-image: ^3.2.0 => 3.2.0
gatsby-plugin-intl: ^0.3.3 => 0.3.3
gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2
gatsby-plugin-manifest: ^3.2.0 => 3.2.0
gatsby-plugin-matomo: ^0.8.3 => 0.8.3
gatsby-plugin-netlify-cms: ^5.2.0 => 5.2.0
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
gatsby-plugin-root-import: ^2.0.6 => 2.0.6
gatsby-plugin-sass: ^4.2.0 => 4.2.0
gatsby-plugin-sharp: ^3.2.0 => 3.2.0
gatsby-plugin-sitemap: ^3.2.0 => 3.2.0
gatsby-plugin-ts-config: ^1.1.5 => 1.1.5
gatsby-plugin-typescript: ^3.2.0 => 3.2.0
gatsby-remark-embed-video: ^3.1.1 => 3.1.1
gatsby-remark-responsive-iframe: ^3.2.0 => 3.2.0
gatsby-source-filesystem: ^3.2.0 => 3.2.0
gatsby-transformer-json: ^3.2.0 => 3.2.0
gatsby-transformer-remark: ^3.2.0 => 3.2.0
gatsby-transformer-remark-frontmatter: ^0.1.0 => 0.1.0
gatsby-transformer-sharp: ^3.2.0 => 3.2.0
gatsby-transformer-yaml: ^3.2.0 => 3.2.0

[juanbiberretta]

Yo! We had a similar issue, technically if namedExport=false then it should default to exporting the names as they are, with dashes and all, but for some reason that doesn't seem to work. Our workaround was to explicitly ask for "asIs" naming convention:

      cssLoaderOptions: {
        esModule: false,
        modules: {
          namedExport: false,
          exportLocalsConvention: 'asIs',
        },
      },

[wslyvh]

Awesome! That did the trick. Thanks
I did try that, but apparently have to leave out 'camelCase: false' then.