From b2d66171081dffbfdd9e5def281d09c011a6a821 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Fri, 26 Feb 2021 16:20:42 +0100 Subject: [PATCH] fix(mini-css-extract): don't use loader in ssr (#29801) --- .../__snapshots__/gatsby-node.js.snap | 12 --- .../gatsby-plugin-less/src/gatsby-node.js | 4 +- .../gatsby-plugin-netlify-cms/package.json | 2 +- .../__snapshots__/gatsby-node.test.js.snap | 8 -- .../gatsby-plugin-postcss/src/gatsby-node.js | 4 +- .../__snapshots__/gatsby-node.js.snap | 12 --- .../gatsby-plugin-sass/src/gatsby-node.js | 4 +- .../__snapshots__/gatsby-node.js.snap | 96 ++----------------- .../src/__tests__/gatsby-node.js | 3 +- .../gatsby-plugin-stylus/src/gatsby-node.js | 4 +- packages/gatsby/package.json | 2 +- packages/gatsby/src/utils/webpack-utils.ts | 4 +- yarn.lock | 8 +- 13 files changed, 26 insertions(+), 137 deletions(-) diff --git a/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap index 0dca9da84c798..321e1f1d064ed 100644 --- a/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -12,7 +12,6 @@ exports[`gatsby-plugin-less Stage: build-html / Less options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -62,7 +61,6 @@ exports[`gatsby-plugin-less Stage: build-html / Less options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -111,7 +109,6 @@ exports[`gatsby-plugin-less Stage: build-html / Loader options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -157,7 +154,6 @@ exports[`gatsby-plugin-less Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -202,7 +198,6 @@ exports[`gatsby-plugin-less Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -247,7 +242,6 @@ exports[`gatsby-plugin-less Stage: build-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -968,7 +962,6 @@ exports[`gatsby-plugin-less Stage: develop-html / Less options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -1018,7 +1011,6 @@ exports[`gatsby-plugin-less Stage: develop-html / Less options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -1067,7 +1059,6 @@ exports[`gatsby-plugin-less Stage: develop-html / Loader options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -1113,7 +1104,6 @@ exports[`gatsby-plugin-less Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -1158,7 +1148,6 @@ exports[`gatsby-plugin-less Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -1203,7 +1192,6 @@ exports[`gatsby-plugin-less Stage: develop-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "miniCssExtract", "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js index a50e765691e76..fe09faaceec73 100644 --- a/packages/gatsby-plugin-less/src/gatsby-node.js +++ b/packages/gatsby-plugin-less/src/gatsby-node.js @@ -31,11 +31,11 @@ exports.onCreateWebpackConfig = ( const lessRuleModules = { test: /\.module\.less$/, use: [ - loaders.miniCssExtract({ modules: true }), + !isSSR && loaders.miniCssExtract({ modules: true }), loaders.css({ ...cssLoaderOptions, modules: true, importLoaders: 2 }), loaders.postcss({ plugins: postCssPlugins }), lessLoader, - ], + ].filter(Boolean), } const configRules = [ diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json index 3c6b8450fe5b6..9f831156a5d65 100644 --- a/packages/gatsby-plugin-netlify-cms/package.json +++ b/packages/gatsby-plugin-netlify-cms/package.json @@ -12,7 +12,7 @@ "html-webpack-plugin": "^5.2.0", "html-webpack-tags-plugin": "^3.0.0", "lodash": "^4.17.21", - "mini-css-extract-plugin": "^1.3.8", + "mini-css-extract-plugin": "1.3.9", "netlify-identity-widget": "^1.9.1", "webpack": "^5.23.00" }, diff --git a/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap b/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap index 25c9d4a1d2314..ca037758a3bab 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap +++ b/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap @@ -12,7 +12,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -31,7 +30,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -145,7 +143,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -189,7 +186,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -213,7 +209,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -812,7 +807,6 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -926,7 +920,6 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", @@ -970,7 +963,6 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 17a31dc19f5c1..6a2cfd2d0cffa 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -47,10 +47,10 @@ exports.onCreateWebpackConfig = ( const postcssRuleModules = { test: MODULE_CSS_PATTERN, use: [ - loaders.miniCssExtract({ modules: true }), + !isSSR && loaders.miniCssExtract({ modules: true }), loaders.css({ ...cssLoaderOptions, importLoaders: 1, modules: true }), postcssLoader, - ], + ].filter(Boolean), } const postcssRules = { oneOf: [postcssRuleModules, postcssRule] } 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 45489f3dcef6e..14857ffe8e6aa 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,6 @@ exports[`gatsby-plugin-sass Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -65,7 +64,6 @@ exports[`gatsby-plugin-sass Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -118,7 +116,6 @@ exports[`gatsby-plugin-sass Stage: build-html / Sass options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -181,7 +178,6 @@ exports[`gatsby-plugin-sass Stage: build-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", "postcss({})", Object { @@ -234,7 +230,6 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule modules test options 1 Object { "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -287,7 +282,6 @@ exports[`gatsby-plugin-sass Stage: build-html / sass rule test options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -1020,7 +1014,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -1073,7 +1066,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -1126,7 +1118,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / Sass options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -1189,7 +1180,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", "postcss({})", Object { @@ -1242,7 +1232,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule modules test options Object { "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { @@ -1295,7 +1284,6 @@ exports[`gatsby-plugin-sass Stage: develop-html / sass rule test options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ - "miniCssExtract", "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js index 7a6f6852e2f81..19c91a989ae9b 100644 --- a/packages/gatsby-plugin-sass/src/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -39,10 +39,10 @@ exports.onCreateWebpackConfig = ( const sassRuleModules = { test: sassRuleModulesTest || /\.module\.s(a|c)ss$/, use: [ - loaders.miniCssExtract({ modules: true }), + !isSSR && loaders.miniCssExtract({ modules: true }), loaders.css({ importLoaders: 2, ...cssLoaderOptions, modules: true }), loaders.postcss({ plugins: postCssPlugins }), - ], + ].filter(Boolean), } if (useResolveUrlLoader && !isSSR) { sassRule.use.push({ diff --git a/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap index 2e3983eec3429..41579eba10bf0 100644 --- a/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -12,7 +12,6 @@ exports[`gatsby-plugin-stylus Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -24,13 +23,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object {}, - }, + "null", ], }, ], @@ -61,7 +54,6 @@ exports[`gatsby-plugin-stylus Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -73,13 +65,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({\\"plugins\\":[\\"test1\\"]})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object {}, - }, + "null", ], }, ], @@ -110,7 +96,6 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -126,17 +111,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object { - "use": Array [ - "foo", - ], - }, - }, + "null", ], }, ], @@ -167,7 +142,6 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -187,21 +161,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object { - "import": Array [ - "file.js", - "file2.js", - ], - "use": Array [ - "foo", - ], - }, - }, + "null", ], }, ], @@ -672,7 +632,6 @@ exports[`gatsby-plugin-stylus Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -684,13 +643,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object {}, - }, + "null", ], }, ], @@ -721,7 +674,6 @@ exports[`gatsby-plugin-stylus Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { @@ -733,13 +685,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({\\"plugins\\":[\\"test1\\"]})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object {}, - }, + "null", ], }, ], @@ -770,7 +716,6 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -786,17 +731,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object { - "use": Array [ - "foo", - ], - }, - }, + "null", ], }, ], @@ -827,7 +762,6 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", "css({\\"modules\\":true,\\"importLoaders\\":2})", "postcss({})", Object { @@ -847,21 +781,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.styl\\$/, "use": Array [ - "miniCssExtract", - "css({\\"importLoaders\\":2})", - "postcss({})", - Object { - "loader": "/resolved/path/stylus-loader", - "options": Object { - "import": Array [ - "file.js", - "file2.js", - ], - "use": Array [ - "foo", - ], - }, - }, + "null", ], }, ], diff --git a/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js index 8ed8948d0f526..4f45c975e175b 100644 --- a/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js @@ -10,6 +10,7 @@ describe(`gatsby-plugin-stylus`, () => { miniCssExtract: () => `miniCssExtract`, css: args => `css(${JSON.stringify(args)})`, postcss: args => `postcss(${JSON.stringify(args)})`, + null: () => `null`, } const { onCreateWebpackConfig } = require(`../gatsby-node`) @@ -45,7 +46,7 @@ describe(`gatsby-plugin-stylus`, () => { { actions, loaders, - stage: `develop`, + stage, }, options ) diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js index 34ca66662f01b..e56ee7e732210 100644 --- a/packages/gatsby-plugin-stylus/src/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js @@ -51,11 +51,11 @@ exports.onCreateWebpackConfig = ( const stylusRuleModules = { test: /\.module\.styl$/, use: [ - loaders.miniCssExtract({ modules: true }), + !isSSR && loaders.miniCssExtract({ modules: true }), loaders.css({ modules: true, importLoaders: 2 }), loaders.postcss({ plugins: postCssPlugins }), stylusLoader, - ], + ].filter(Boolean), } const configRules = [ diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 83c15a65ddd37..c4bf1655fd12d 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -111,7 +111,7 @@ "memoizee": "^0.4.15", "micromatch": "^4.0.2", "mime": "^2.4.6", - "mini-css-extract-plugin": "1.3.8", + "mini-css-extract-plugin": "1.3.9", "mitt": "^1.2.0", "mkdirp": "^0.5.1", "moment": "^2.27.0", diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index 1ccd986d54ac7..53c973731133d 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/packages/gatsby/src/utils/webpack-utils.ts @@ -585,10 +585,10 @@ export const createWebpackUtils = ( const css: IRuleUtils["css"] = (options = {}): RuleSetRule => { const { browsers, ...restOptions } = options const use = [ - loaders.miniCssExtract(restOptions), + !isSSR && loaders.miniCssExtract(restOptions), loaders.css({ ...restOptions, importLoaders: 1 }), loaders.postcss({ browsers }), - ] + ].filter(Boolean) return { use, diff --git a/yarn.lock b/yarn.lock index 511928e7cc0a0..89ff50655d363 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18717,10 +18717,10 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-css-extract-plugin@1.3.8, mini-css-extract-plugin@^1.3.8: - version "1.3.8" - resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.8.tgz#639047b78c2ee728704285aa468d2a5a8d91d566" - integrity sha512-u+2kVov/Gcs74iz+x3phEBWMAGw2djjnKfYez+Pl/b5dyXL7aM4Lp5QQtIq16CDwRHT/woUJki49gBNMhfm1eA== +mini-css-extract-plugin@1.3.9: + version "1.3.9" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.9.tgz#47a32132b0fd97a119acd530e8421e8f6ab16d5e" + integrity sha512-Ac4s+xhVbqlyhXS5J/Vh/QXUz3ycXlCqoCPpg0vdfhsIBH9eg/It/9L1r1XhSCH737M1lqcWnMuWL13zcygn5A== dependencies: loader-utils "^2.0.0" schema-utils "^3.0.0"