Skip to content

Commit

Permalink
fix(gatsby-plugin-sass): Change modules option around (#29986)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LekoArts
LekoArts committed Mar 4, 2021
1 parent 9fd287b commit bba21cd
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 39 deletions.
72 changes: 36 additions & 36 deletions packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap
View file
Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand All @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down Expand Up @@ -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": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
Expand Down
3 changes: 3 additions & 0 deletions packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js
View file
Expand Up @@ -37,6 +37,9 @@ describe(`gatsby-plugin-sass`, () => {
"css-loader options": {
cssLoaderOptions: {
camelCase: false,
modules: {
exportLocalsConvention: `camelCaseOnly`,
},
},
},
"sass rule test options": {
Expand Down
10 changes: 7 additions & 3 deletions packages/gatsby-plugin-sass/src/gatsby-node.js
View file
Expand Up @@ -32,15 +32,19 @@ exports.onCreateWebpackConfig = (
? [loaders.null()]
: [
loaders.miniCssExtract(),
loaders.css({ importLoaders: 2, ...cssLoaderOptions }),
loaders.css({
importLoaders: 2,
...cssLoaderOptions,
modules: false,
}),
loaders.postcss({ plugins: postCssPlugins }),
],
}
const sassRuleModules = {
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),
}
Expand Down Expand Up @@ -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())
Expand Down

0 comments on commit bba21cd

Please sign in to comment.