gatsby-plugin-sass prevents configuration of CSS Loader

[Titou325]

Description

When setting the following options to gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        cssLoaderOptions: {
          modules: {
            exportLocalsConvention: 'camelCaseOnly'
          }
        }
      }
    }
  ]
}

We expect the exports of css-loader to be camelCaseOnly and not dashesOnly (default).

Steps to reproduce

Very straightforward, just place this in a Gatsby SASS project.

Expected result

The webpack configuration should be modified accordingly and the exported values should be in camel case.

Actual result

Nothing changes. After investigation, it seems that the culprit is in gatsby-plugin-sass/gatsby-node.js where there is the following:

const sassRuleModules = {
    test: sassRuleModulesTest || /\.module\.s(a|c)ss$/,
    use: [!isSSR && loaders.miniCssExtract({
      modules: true
    }), loaders.css({
      importLoaders: 2,
      ...cssLoaderOptions,
      modules: true
    }), loaders.postcss({
      plugins: postCssPlugins
    })].filter(Boolean)
  };

This causes the modules option to be overwritten even if it was provided. There should be a check to see if there is already a modules option to prevent overwriting.

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 15.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - ~\AppData\Roaming\npm\npm.CMD
  Languages:
    Python: 3.6.4
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
  npmPackages:
    gatsby: ^3.0.0 => 3.0.0
    gatsby-plugin-mdx: ^2.0.0 => 2.0.0
    gatsby-plugin-sass: ^4.0.0 => 4.0.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-telemetry: ^2.0.0 => 2.0.0
  npmGlobalPackages:
    undefined: 0.1.0

[juanbiberretta]

+1! I opened up the issues tab to report this very same thing!

[LekoArts]

Hi, thanks for the issue!

Just to make sure: Did this only occur with gatsby@3.0.0 and gatsby-plugin-sass@4.0.0 or already with gatsby@2.32.0 and gatsby-plugin-sass@3.0.0?

[Titou325]

Hello!

I believe it might have existed before, I am only impacted now since we are moving to Gatsby 3.0.0 and refactoring our imports. We did not use gatsby-plugin-sass before, hence I can't be sure of the behavior but from the source code I believe it did not before Gatsby V3 as it was still using css-loader@^1.0.1, which has now been upgraded to ^5. (As a side note the documentation at https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/ is wrong for V3 as css-loader has been upgraded).

I believe the overwrite occurs because it used to be a boolean only option, but it can now be an object. I might be mistaken though.

If I can provide any further help, feel free to reach out,

Thanks and have a nice day

[LekoArts]

Thanks for the info and the note that the README will need an update. We'll look into both things :)

[juanbiberretta]

@LekoArts Thanks for the quick turnaround on this! Much appreciated

[juanbiberretta]

@LekoArts Just for my own understanding but when/how will the hotfix make it out to users? Sorry not incredibly well versed in open source cycles

[LekoArts]

@juanbiberretta It's been released in gatsby-plugin-sass@4.0.1 :)

We publish a minor every two weeks and hotfixes ad-hoc.