Gatsby: The properties of the object returned by css modules auto transform to `lowerCamelCase`

[xyy94813]

Summary

I am trying to migrate v1 to v2. In my project, i used gatsby-plugin-less, CSS Modules and React-CSS-Modules .
I found all properties of the object returned by css modules auto transform to lowerCamelCase, although i use - to split word.

Relevant information

My less file style.module.less:

:local {
    .float-card: {
        // ...
    }
}

My Component file MyComponent.js

import styles from './style.module.less'
console.log(styles); // { floatCard: "...." }

Environment (if relevant)

System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.1 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Safari: 11.0.3
npmPackages:
gatsby: ^2.0.8 => 2.0.8
gatsby-link: ^2.0.1 => 2.0.1
gatsby-plugin-antd: ^2.0.2 => 2.0.2
gatsby-plugin-import: ^2.0.1 => 2.0.1
gatsby-plugin-less: ^2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
npmGlobalPackages:
gatsby-cli: 2.4.2

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-less',
      options: {
        strictMath: false,
        // strictUnits: true,
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#EA0029',
          'layout-body-background': '#FFFFFF',
          'layout-header-background': '#323232',
          'layout-footer-background': '@layout-header-background',
          'menu-dark-item-active-bg': '@layout-header-background',
        },
      },
    },
    {
      resolve: 'gatsby-plugin-import',
      options: {
        style: 'css',
      },
    },
  ],
}

package.json:

// ...

gatsby-node.js:

// none

gatsby-browser.js:

// none

gatsby-ssr.js:

// none

[xyy94813]

How can I modify the configuration camelCase to false of css-loader

[kakadiadarpan]

@xyy94813 can you provide a reproduction repo for this? That would make it much simpler to diagnose this issue.

[CanRau]

@xyy94813 Have you checked out #onCreateWebpackConfig in docs?

And https://github.com/gatsbyjs/gatsby/issues/376#issuecomment-237067213 suggests that both should be available (kebab and camel case)? Don't have a way of trying it out quickly right now, maybe it has been changed?

[kakadiadarpan]

Thanks for providing the context @CanRau.

@xyy94813 This was mentioned in the migrating from v1 to v2 guide.

If you want to change this behavior you'll need to add custom webpack config.

You'll need make changes like below in gatsby-node.js

// gatsby-node.js
exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            loaders.css({ camelCase: false })
          ],
        },
      ],
    },
  })
}

Also in use array you'll need to add other loaders that you use like less-loader.

Let us know if you need more help. 😄

[CanRau]

@kakadiadarpan thanks for providing the code 👍 didn't had the patience to dig more into it at that time^^

[xyy94813]

@kakadiadarpan thanks for your help.

it is better, if there are some way to override it in gatsby-plugin-less 😄

[kakadiadarpan]

@xyy94813 It's not possible to override this from gatsby-plugin-less as this functionality is controlled by another loader css-loader:

https://github.com/gatsbyjs/gatsby/blob/c0e503d0df7cefb3b072e85155e2ce853e48fb53/packages/gatsby/src/utils/webpack-utils.js#L201

[CanRau]

could you get the desired result @xyy94813? If so we could close the issue, otherwise let us know how we can support you

[xyy94813]

@kakadiadarpan https://github.com/gatsbyjs/gatsby/blob/34b5e50b669c9792dd6435686fb617a0f16dfc7e/packages/gatsby-plugin-less/src/gatsby-node.js#L5
if the gatsby-plugin-less provide a option, i will become possible

exports.onCreateWebpackConfig = (
  { actions, stage, rules, plugins, loaders },
  { postCssPlugins, overrideCSSLoaderOpt, ...lessOptions }
) => {
 ....
 const lessRule = {
    test: /\.less$/,
    use: isSSR
      ? [loaders.null()]
      : [
          loaders.miniCssExtract(),
          loaders.css({ importLoaders: 2, ...overrideCSSLoaderOpt }),
          loaders.postcss({ plugins: postCssPlugins }),
          lessLoader,
        ],
  }
  // ...
}

https://github.com/gatsbyjs/gatsby/blob/34b5e50b669c9792dd6435686fb617a0f16dfc7e/packages/gatsby-plugin-less/src/gatsby-node.js#L25

But i am not sure it is a better way.