Skip to content

Commit bba21cd

Browse files
LekoArtsLekoArts
authored
fix(gatsby-plugin-sass): Change modules option around (#29986)
1 parent 9fd287b commit bba21cd

3 files changed

Lines changed: 46 additions & 39 deletions

File tree

‎packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`gatsby-plugin-sass Stage: build-html / No options 1`] = `
1212
Object {
1313
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
1414
"use": Array [
15-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
15+
"css({\\"importLoaders\\":2})",
1616
"postcss({})",
1717
Object {
1818
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -64,7 +64,7 @@ exports[`gatsby-plugin-sass Stage: build-html / PostCss plugins 1`] = `
6464
Object {
6565
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
6666
"use": Array [
67-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
67+
"css({\\"importLoaders\\":2})",
6868
"postcss({\\"plugins\\":[\\"test1\\"]})",
6969
Object {
7070
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -116,7 +116,7 @@ exports[`gatsby-plugin-sass Stage: build-html / Sass options 1`] = `
116116
Object {
117117
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
118118
"use": Array [
119-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
119+
"css({\\"importLoaders\\":2})",
120120
"postcss({})",
121121
Object {
122122
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -178,7 +178,7 @@ exports[`gatsby-plugin-sass Stage: build-html / css-loader options 1`] = `
178178
Object {
179179
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
180180
"use": Array [
181-
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})",
181+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})",
182182
"postcss({})",
183183
Object {
184184
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -230,7 +230,7 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule modules test options 1
230230
Object {
231231
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
232232
"use": Array [
233-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
233+
"css({\\"importLoaders\\":2})",
234234
"postcss({})",
235235
Object {
236236
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -282,7 +282,7 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule test options 1`] = `
282282
Object {
283283
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
284284
"use": Array [
285-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
285+
"css({\\"importLoaders\\":2})",
286286
"postcss({})",
287287
Object {
288288
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -335,7 +335,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / No options 1`] = `
335335
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
336336
"use": Array [
337337
"miniCssExtract",
338-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
338+
"css({\\"importLoaders\\":2})",
339339
"postcss({})",
340340
Object {
341341
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -350,7 +350,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / No options 1`] = `
350350
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
351351
"use": Array [
352352
"miniCssExtract",
353-
"css({\\"importLoaders\\":2})",
353+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
354354
"postcss({})",
355355
Object {
356356
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -390,7 +390,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / PostCss plugins 1`] = `
390390
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
391391
"use": Array [
392392
"miniCssExtract",
393-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
393+
"css({\\"importLoaders\\":2})",
394394
"postcss({\\"plugins\\":[\\"test1\\"]})",
395395
Object {
396396
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -405,7 +405,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / PostCss plugins 1`] = `
405405
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
406406
"use": Array [
407407
"miniCssExtract",
408-
"css({\\"importLoaders\\":2})",
408+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
409409
"postcss({\\"plugins\\":[\\"test1\\"]})",
410410
Object {
411411
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -445,7 +445,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / Sass options 1`] = `
445445
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
446446
"use": Array [
447447
"miniCssExtract",
448-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
448+
"css({\\"importLoaders\\":2})",
449449
"postcss({})",
450450
Object {
451451
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -465,7 +465,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / Sass options 1`] = `
465465
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
466466
"use": Array [
467467
"miniCssExtract",
468-
"css({\\"importLoaders\\":2})",
468+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
469469
"postcss({})",
470470
Object {
471471
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -510,7 +510,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / css-loader options 1`] = `
510510
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
511511
"use": Array [
512512
"miniCssExtract",
513-
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})",
513+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})",
514514
"postcss({})",
515515
Object {
516516
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -525,7 +525,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / css-loader options 1`] = `
525525
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
526526
"use": Array [
527527
"miniCssExtract",
528-
"css({\\"importLoaders\\":2,\\"camelCase\\":false})",
528+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})",
529529
"postcss({})",
530530
Object {
531531
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -565,7 +565,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule modules test opt
565565
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
566566
"use": Array [
567567
"miniCssExtract",
568-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
568+
"css({\\"importLoaders\\":2})",
569569
"postcss({})",
570570
Object {
571571
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -580,7 +580,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule modules test opt
580580
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
581581
"use": Array [
582582
"miniCssExtract",
583-
"css({\\"importLoaders\\":2})",
583+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
584584
"postcss({})",
585585
Object {
586586
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -620,7 +620,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule test options 1`]
620620
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
621621
"use": Array [
622622
"miniCssExtract",
623-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
623+
"css({\\"importLoaders\\":2})",
624624
"postcss({})",
625625
Object {
626626
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -635,7 +635,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule test options 1`]
635635
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
636636
"use": Array [
637637
"miniCssExtract",
638-
"css({\\"importLoaders\\":2})",
638+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
639639
"postcss({})",
640640
Object {
641641
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -675,7 +675,7 @@ exports[`gatsby-plugin-sass Stage: develop / No options 1`] = `
675675
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
676676
"use": Array [
677677
"miniCssExtract",
678-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
678+
"css({\\"importLoaders\\":2})",
679679
"postcss({})",
680680
Object {
681681
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -690,7 +690,7 @@ exports[`gatsby-plugin-sass Stage: develop / No options 1`] = `
690690
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
691691
"use": Array [
692692
"miniCssExtract",
693-
"css({\\"importLoaders\\":2})",
693+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
694694
"postcss({})",
695695
Object {
696696
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -730,7 +730,7 @@ exports[`gatsby-plugin-sass Stage: develop / PostCss plugins 1`] = `
730730
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
731731
"use": Array [
732732
"miniCssExtract",
733-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
733+
"css({\\"importLoaders\\":2})",
734734
"postcss({\\"plugins\\":[\\"test1\\"]})",
735735
Object {
736736
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -745,7 +745,7 @@ exports[`gatsby-plugin-sass Stage: develop / PostCss plugins 1`] = `
745745
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
746746
"use": Array [
747747
"miniCssExtract",
748-
"css({\\"importLoaders\\":2})",
748+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
749749
"postcss({\\"plugins\\":[\\"test1\\"]})",
750750
Object {
751751
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -785,7 +785,7 @@ exports[`gatsby-plugin-sass Stage: develop / Sass options 1`] = `
785785
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
786786
"use": Array [
787787
"miniCssExtract",
788-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
788+
"css({\\"importLoaders\\":2})",
789789
"postcss({})",
790790
Object {
791791
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -805,7 +805,7 @@ exports[`gatsby-plugin-sass Stage: develop / Sass options 1`] = `
805805
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
806806
"use": Array [
807807
"miniCssExtract",
808-
"css({\\"importLoaders\\":2})",
808+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
809809
"postcss({})",
810810
Object {
811811
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -850,7 +850,7 @@ exports[`gatsby-plugin-sass Stage: develop / css-loader options 1`] = `
850850
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
851851
"use": Array [
852852
"miniCssExtract",
853-
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})",
853+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})",
854854
"postcss({})",
855855
Object {
856856
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -865,7 +865,7 @@ exports[`gatsby-plugin-sass Stage: develop / css-loader options 1`] = `
865865
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
866866
"use": Array [
867867
"miniCssExtract",
868-
"css({\\"importLoaders\\":2,\\"camelCase\\":false})",
868+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})",
869869
"postcss({})",
870870
Object {
871871
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -905,7 +905,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule modules test options 1`]
905905
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
906906
"use": Array [
907907
"miniCssExtract",
908-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
908+
"css({\\"importLoaders\\":2})",
909909
"postcss({})",
910910
Object {
911911
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -920,7 +920,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule modules test options 1`]
920920
"test": /\\\\\\.s\\(a\\|c\\)ss\\$/,
921921
"use": Array [
922922
"miniCssExtract",
923-
"css({\\"importLoaders\\":2})",
923+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
924924
"postcss({})",
925925
Object {
926926
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -960,7 +960,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule test options 1`] = `
960960
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
961961
"use": Array [
962962
"miniCssExtract",
963-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
963+
"css({\\"importLoaders\\":2})",
964964
"postcss({})",
965965
Object {
966966
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -975,7 +975,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule test options 1`] = `
975975
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
976976
"use": Array [
977977
"miniCssExtract",
978-
"css({\\"importLoaders\\":2})",
978+
"css({\\"importLoaders\\":2,\\"modules\\":false})",
979979
"postcss({})",
980980
Object {
981981
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1014,7 +1014,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / No options 1`] = `
10141014
Object {
10151015
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
10161016
"use": Array [
1017-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
1017+
"css({\\"importLoaders\\":2})",
10181018
"postcss({})",
10191019
Object {
10201020
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1066,7 +1066,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / PostCss plugins 1`] = `
10661066
Object {
10671067
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
10681068
"use": Array [
1069-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
1069+
"css({\\"importLoaders\\":2})",
10701070
"postcss({\\"plugins\\":[\\"test1\\"]})",
10711071
Object {
10721072
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1118,7 +1118,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / Sass options 1`] = `
11181118
Object {
11191119
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
11201120
"use": Array [
1121-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
1121+
"css({\\"importLoaders\\":2})",
11221122
"postcss({})",
11231123
Object {
11241124
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1180,7 +1180,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / css-loader options 1`] = `
11801180
Object {
11811181
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
11821182
"use": Array [
1183-
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})",
1183+
"css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":{\\"exportLocalsConvention\\":\\"camelCaseOnly\\"}})",
11841184
"postcss({})",
11851185
Object {
11861186
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1232,7 +1232,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule modules test options
12321232
Object {
12331233
"test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/,
12341234
"use": Array [
1235-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
1235+
"css({\\"importLoaders\\":2})",
12361236
"postcss({})",
12371237
Object {
12381238
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",
@@ -1284,7 +1284,7 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule test options 1`] = `
12841284
Object {
12851285
"test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/,
12861286
"use": Array [
1287-
"css({\\"importLoaders\\":2,\\"modules\\":true})",
1287+
"css({\\"importLoaders\\":2})",
12881288
"postcss({})",
12891289
Object {
12901290
"loader": "<PROJECT_ROOT>/node_modules/sass-loader/dist/cjs.js",

‎packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ describe(`gatsby-plugin-sass`, () => {
3737
"css-loader options": {
3838
cssLoaderOptions: {
3939
camelCase: false,
40+
modules: {
41+
exportLocalsConvention: `camelCaseOnly`,
42+
},
4043
},
4144
},
4245
"sass rule test options": {

‎packages/gatsby-plugin-sass/src/gatsby-node.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,19 @@ exports.onCreateWebpackConfig = (
3232
? [loaders.null()]
3333
: [
3434
loaders.miniCssExtract(),
35-
loaders.css({ importLoaders: 2, ...cssLoaderOptions }),
35+
loaders.css({
36+
importLoaders: 2,
37+
...cssLoaderOptions,
38+
modules: false,
39+
}),
3640
loaders.postcss({ plugins: postCssPlugins }),
3741
],
3842
}
3943
const sassRuleModules = {
4044
test: sassRuleModulesTest || /\.module\.s(a|c)ss$/,
4145
use: [
4246
!isSSR && loaders.miniCssExtract({ modules: true }),
43-
loaders.css({ importLoaders: 2, ...cssLoaderOptions, modules: true }),
47+
loaders.css({ importLoaders: 2, ...cssLoaderOptions }),
4448
loaders.postcss({ plugins: postCssPlugins }),
4549
].filter(Boolean),
4650
}
@@ -83,7 +87,7 @@ exports.pluginOptionsSchema = function ({ Joi }) {
8387
cssLoaderOptions: Joi.object({})
8488
.unknown(true)
8589
.description(
86-
`Pass in options for css-loader: https://github.com/webpack-contrib/css-loader/tree/version-1#options`
90+
`Pass in options for css-loader: https://github.com/webpack-contrib/css-loader#options`
8791
),
8892
postCssPlugins: Joi.array()
8993
.items(Joi.any())

0 commit comments

Comments
 (0)