From bba21cdeb34ff74f6f2f538780849e6ccbec21fd Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 4 Mar 2021 17:37:13 +0100 Subject: [PATCH] fix(gatsby-plugin-sass): Change `modules` option around (#29986) --- .../__snapshots__/gatsby-node.js.snap | 72 +++++++++---------- .../src/__tests__/gatsby-node.js | 3 + .../gatsby-plugin-sass/src/gatsby-node.js | 10 ++- 3 files changed, 46 insertions(+), 39 deletions(-) diff --git a/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap index 14857ffe8e6aa..43c7707f26bdd 100644 --- a/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -12,7 +12,7 @@ exports[`gatsby-plugin-sass Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -64,7 +64,7 @@ exports[`gatsby-plugin-sass Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -116,7 +116,7 @@ exports[`gatsby-plugin-sass Stage: build-html / Sass options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -178,7 +178,7 @@ exports[`gatsby-plugin-sass Stage: build-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -230,7 +230,7 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule modules test options 1 Object { "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -282,7 +282,7 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule test options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -335,7 +335,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -350,7 +350,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -390,7 +390,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -405,7 +405,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -445,7 +445,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / Sass options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -465,7 +465,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / Sass options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -510,7 +510,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / css-loader options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -525,7 +525,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / css-loader options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -565,7 +565,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule modules test opt "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -580,7 +580,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule modules test opt "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -620,7 +620,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule test options 1`] "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -635,7 +635,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule test options 1`] "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -675,7 +675,7 @@ exports[`gatsby-plugin-sass Stage: develop / No options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -690,7 +690,7 @@ exports[`gatsby-plugin-sass Stage: develop / No options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -730,7 +730,7 @@ exports[`gatsby-plugin-sass Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -745,7 +745,7 @@ exports[`gatsby-plugin-sass Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -785,7 +785,7 @@ exports[`gatsby-plugin-sass Stage: develop / Sass options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -805,7 +805,7 @@ exports[`gatsby-plugin-sass Stage: develop / Sass options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -850,7 +850,7 @@ exports[`gatsby-plugin-sass Stage: develop / css-loader options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -865,7 +865,7 @@ exports[`gatsby-plugin-sass Stage: develop / css-loader options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -905,7 +905,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule modules test options 1`] "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -920,7 +920,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule modules test options 1`] "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -960,7 +960,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule test options 1`] = ` "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -975,7 +975,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule test options 1`] = ` "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1014,7 +1014,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1066,7 +1066,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1118,7 +1118,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / Sass options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1180,7 +1180,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1232,7 +1232,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule modules test options Object { "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1284,7 +1284,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule test options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "css({\\"importLoaders\\":2,\\"modules\\":true})", + "css({\\"importLoaders\\":2})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", diff --git a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js index 09dd53053c9d0..80dcb615d0585 100644 --- a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js @@ -37,6 +37,9 @@ describe(`gatsby-plugin-sass`, () => { "css-loader options": { cssLoaderOptions: { camelCase: false, + modules: { + exportLocalsConvention: `camelCaseOnly`, + }, }, }, "sass rule test options": { diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js index 19c91a989ae9b..0ac3d4761ecf9 100644 --- a/packages/gatsby-plugin-sass/src/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -32,7 +32,11 @@ exports.onCreateWebpackConfig = ( ? [loaders.null()] : [ loaders.miniCssExtract(), - loaders.css({ importLoaders: 2, ...cssLoaderOptions }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: false, + }), loaders.postcss({ plugins: postCssPlugins }), ], } @@ -40,7 +44,7 @@ exports.onCreateWebpackConfig = ( test: sassRuleModulesTest || /\.module\.s(a|c)ss$/, use: [ !isSSR && loaders.miniCssExtract({ modules: true }), - loaders.css({ importLoaders: 2, ...cssLoaderOptions, modules: true }), + loaders.css({ importLoaders: 2, ...cssLoaderOptions }), loaders.postcss({ plugins: postCssPlugins }), ].filter(Boolean), } @@ -83,7 +87,7 @@ exports.pluginOptionsSchema = function ({ Joi }) { cssLoaderOptions: Joi.object({}) .unknown(true) .description( - `Pass in options for css-loader: https://github.com/webpack-contrib/css-loader/tree/version-1#options` + `Pass in options for css-loader: https://github.com/webpack-contrib/css-loader#options` ), postCssPlugins: Joi.array() .items(Joi.any())