[v2] css modules class names with dashes / camelCased locals

[pieh]

Currently in v2 css modules there is undocumented breaking change - dashed class names will be camelCased (

gatsby/packages/gatsby/src/utils/webpack-utils.js

Line 201 in c0e503d

camelCase: `dashesOnly`,

)

Omitting that setting or setting it to false will result in same behaviour as in v1. Setting it to true or 'dashes' would return both dashed and camelCased version of it - might be worth using that?

[jquense]

dashes is the most accepting setting, but it leads to larger bundles since most css classes are duplicated in the locals export (the camel and dash cases). I went with the dashesOnly setting a bit out of personal convenience, but i do think it's probably the community wide "best practice" (for lack of a better word) and fairly uncontroversial, saving on bytes while also allowing idiomatic casing for css and js

[pieh]

It makes sense - in this case we would "just" need to update the migration guide so it's documented.

I'll leave this issue opened just to get more input on the matter from other folks.

[KyleAMathews]

Yeah, there was a few discussions for this change in the past:

• Enable camelCase by default for CSS Modules #376
• Add camelCase option for css-loader #2393

[pieh]

I was just thinking about it - would it make sense to revert to v1 default and create plugin to easily overwrite css module rule options? Something that walks webpack config object rules and if loader is css-loader and options.modules === true replace/merge options with what user specify?

[m-allanson]

Maybe let's go the other way around? dashesOnly seems like a good option and v2 is the time to make breaking changes. I'll add a section to the migration guide.

[dustinhorton]

@pieh did you happen to write something to allow for v1 behavior? have multiple projects where this change is causing some pain.

[HamidReazaNikoonia]

what about pt-5 , pt5 not working

[dustinhorton]

@HamidReazaNikoonia what part 5?

[acalderongarcia]

@HamidReazaNikoonia what part 5?

pt-5 padding-top

[dustinhorton]

@acalderongarcia have you added this to your gatsby-config.js?

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-sass',
      options: {
        cssLoaderOptions: {
          camelCase: false,
        },
      },
    },
  ],
}