fix(gatsby): Update mini-css-extract-plugin to fix inc builds issue

e2e-tests/production-runtime/package.json

@@ -6,18 +6,18 @@
   "dependencies": {
     "babel-plugin-search-and-replace": "^1.1.0",
     "cypress": "^6.5.0",
-    "gatsby": "^3.0.0-next.6",
-    "gatsby-cypress": "^1.3.0",
-    "gatsby-plugin-image": "^1.0.0-next.5",
-    "gatsby-plugin-less": "^5.1.0-next.2",
-    "gatsby-plugin-manifest": "^3.0.0-next.0",
-    "gatsby-plugin-offline": "^4.0.0-next.1",
-    "gatsby-plugin-react-helmet": "^4.0.0-next.0",
-    "gatsby-plugin-sass": "^4.1.0-next.2",
-    "gatsby-plugin-sharp": "^3.0.0-next.5",
-    "gatsby-plugin-stylus": "^3.1.0-next.2",
+    "gatsby": "^4.1.6",
+    "gatsby-cypress": "^2.1.0",
+    "gatsby-plugin-image": "^2.1.3",
+    "gatsby-plugin-less": "^6.1.0",
+    "gatsby-plugin-manifest": "^4.1.4",
+    "gatsby-plugin-offline": "^5.1.4",
+    "gatsby-plugin-react-helmet": "^5.1.0",
+    "gatsby-plugin-sass": "^5.1.1",
+    "gatsby-plugin-sharp": "^4.1.4",
+    "gatsby-plugin-stylus": "^4.1.0",
     "gatsby-seo": "^0.1.0",
-    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-source-filesystem": "^4.1.3",
     "glob": "^7.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -32,7 +32,7 @@
   "scripts": {
     "build": "cross-env CYPRESS_SUPPORT=y gatsby build",
     "build:offline": "cross-env TEST_PLUGIN_OFFLINE=y CYPRESS_SUPPORT=y gatsby build",
-    "develop": "gatsby develop",
+    "develop": "cross-env CYPRESS_SUPPORT=y gatsby develop",
     "format": "prettier --write '**/*.js' --ignore-path .gitignore",
     "serve": "gatsby serve",
     "start": "npm run develop",
@@ -51,16 +51,13 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "fs-extra": "^7.0.1",
-    "gatsby-core-utils": "^2.12.0",
+    "gatsby-core-utils": "^3.1.3",
     "is-ci": "^2.0.0",
     "prettier": "2.0.4",
     "start-server-and-test": "^1.7.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "resolutions": {
-    "graphql-config": "3.3.0"
   }
 }

integration-tests/artifacts/gatsby-browser.js

@@ -2,6 +2,9 @@ const React = require(`react`)
 const { useMoreInfoQuery } = require("./src/hooks/use-more-info-query")
 const Github = require(`./src/components/github`).default
 
+// global css import (make sure warm rebuild doesn't invalidate every file when css is imported)
+require("./imported.css")
+
 exports.wrapRootElement = ({ element }) => {
   return (
     <>

integration-tests/artifacts/imported.css

@@ -0,0 +1,3 @@
+.foo {
+  background: blue;
+}

packages/gatsby-plugin-less/src/gatsby-node.js

@@ -34,6 +34,7 @@ exports.onCreateWebpackConfig = (
   }
   const lessRuleModules = {
     test: /\.module\.less$/,
+    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({

packages/gatsby-plugin-netlify-cms/package.json

@@ -14,7 +14,7 @@
     "html-webpack-skip-assets-plugin": "^1.0.3",
     "html-webpack-tags-plugin": "^3.0.2",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "1.6.2",
+    "mini-css-extract-plugin": "^2.4.4",
     "netlify-identity-widget": "^1.9.2"
   },
   "devDependencies": {

packages/gatsby-plugin-postcss/src/gatsby-node.js

@@ -50,6 +50,7 @@ exports.onCreateWebpackConfig = (
   }
   const postcssRuleModules = {
     test: MODULE_CSS_PATTERN,
+    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({

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

@@ -43,6 +43,7 @@ exports.onCreateWebpackConfig = (
 
   const sassRuleModules = {
     test: sassRuleModulesTest || /\.module\.s(a|c)ss$/,
+    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({

packages/gatsby-plugin-stylus/src/gatsby-node.js

@@ -54,6 +54,7 @@ exports.onCreateWebpackConfig = (
 
   const stylusRuleModules = {
     test: /\.module\.styl$/,
+    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({

packages/gatsby/package.json

@@ -48,7 +48,7 @@
     "cookie": "^0.4.1",
     "core-js": "^3.17.2",
     "cors": "^2.8.5",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "css.escape": "^1.5.1",
     "date-fns": "^2.25.0",
@@ -108,7 +108,7 @@
     "memoizee": "^0.4.15",
     "micromatch": "^4.0.4",
     "mime": "^2.5.2",
-    "mini-css-extract-plugin": "1.6.2",
+    "mini-css-extract-plugin": "^2.4.4",
     "mitt": "^1.2.0",
     "moment": "^2.29.1",
     "multer": "^1.4.3",

packages/gatsby/src/utils/webpack-utils.ts

@@ -1,5 +1,5 @@
 import * as path from "path"
-import { RuleSetRule, WebpackPluginInstance } from "webpack"
+import { RuleSetRule, WebpackPluginInstance, Configuration } from "webpack"
 import { GraphQLSchema } from "graphql"
 import { Plugin as PostCSSPlugin } from "postcss"
 import autoprefixer from "autoprefixer"
@@ -65,12 +65,16 @@ type CSSModulesOptions =
       exportOnlyLocals?: boolean
     }
 
-type MiniCSSExtractLoaderModuleOptions =
-  | undefined
-  | boolean
-  | {
-      namedExport?: boolean
-    }
+interface IMiniCSSExtractLoaderModuleOptions {
+  filename?: Required<Configuration>["output"]["filename"] | undefined
+  chunkFilename?: Required<Configuration>["output"]["chunkFilename"] | undefined
+  experimentalUseImportModule?: boolean | undefined
+  ignoreOrder?: boolean | undefined
+  insert?: string | ((linkTag: any) => void) | undefined
+  attributes?: Record<string, string> | undefined
+  linkType?: string | false | "text/css" | undefined
+  runtime?: boolean | undefined
+}
 /**
  * Utils that produce webpack `loader` objects
  */
@@ -234,27 +238,13 @@ export const createWebpackUtils = (
       }
     },
 
-    miniCssExtract: (
-      options: {
-        modules?: MiniCSSExtractLoaderModuleOptions
-      } = {}
-    ) => {
-      let moduleOptions: MiniCSSExtractLoaderModuleOptions = undefined
-
+    miniCssExtract: (options: IMiniCSSExtractLoaderModuleOptions = {}) => {
+      // @ts-ignore - legacy modules
       const { modules, ...restOptions } = options
 
-      if (typeof modules === `boolean` && options.modules) {
-        moduleOptions = {
-          namedExport: true,
-        }
-      } else {
-        moduleOptions = modules
-      }
-
       return {
         loader: MiniCssExtractPlugin.loader,
         options: {
-          modules: moduleOptions,
           ...restOptions,
         },
       }
@@ -283,13 +273,15 @@ export const createWebpackUtils = (
         loader: require.resolve(`css-loader`),
         options: {
           // Absolute urls (https or //) are not send to this function. Only resolvable paths absolute or relative ones.
-          url: function (url: string): boolean {
-            // When an url starts with /
-            if (url.startsWith(`/`)) {
-              return false
-            }
-
-            return true
+          url: {
+            filter: function (url: string): boolean {
+              // When an url starts with /
+              if (url.startsWith(`/`)) {
+                return false
+              }
+
+              return true
+            },
           },
           sourceMap: !PRODUCTION,
           modules: modulesOptions,

yarn.lock

@@ -8646,26 +8646,24 @@ css-list-helpers@^2.0.0:
   resolved "https://registry.yarnpkg.com/css-list-helpers/-/css-list-helpers-2.0.0.tgz#7cb3d6f9ec9e5087ae49d834cead282806e8818f"
   integrity sha512-9Bj8tZ0jWbAM3u/U6m/boAzAwLPwtjzFvwivr2piSvyVa3K3rChJzQy4RIHkNkKiZCHrEMWDJWtTR8UyVhdDnQ==
 
-css-loader@^5.2.7:
-  version "5.2.7"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
-  integrity sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==
+css-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.2.0.tgz#9663d9443841de957a3cb9bcea2eda65b3377071"
+  integrity sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==
   dependencies:
     icss-utils "^5.1.0"
-    loader-utils "^2.0.0"
     postcss "^8.2.15"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
     postcss-modules-values "^4.0.0"
     postcss-value-parser "^4.1.0"
-    schema-utils "^3.0.0"
     semver "^7.3.5"
 
-css-loader@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.2.0.tgz#9663d9443841de957a3cb9bcea2eda65b3377071"
-  integrity sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==
+css-loader@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.5.1.tgz#0c43d4fbe0d97f699c91e9818cb585759091d1b1"
+  integrity sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==
   dependencies:
     icss-utils "^5.1.0"
     postcss "^8.2.15"
@@ -17626,14 +17624,12 @@ 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.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
-  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
+mini-css-extract-plugin@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.4.tgz#c7e5d2d931dcf100ae50ae949ba757c506b54b0f"
+  integrity sha512-UJ+aNuFQaQaECu7AamlWOBLj2cJ6XSGU4zNiqXeZ7lZLe5VD0DoSPWFbWArXueo+6FZVbgHzpX9lUIaBIDLuYg==
   dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
+    schema-utils "^3.1.0"
 
 mini-svg-data-uri@^1.4.3:
   version "1.4.3"
@@ -23578,11 +23574,6 @@ source-list-map@^1.1.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
   integrity sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=
 
-source-list-map@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
 source-map-js@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@@ -26482,14 +26473,6 @@ webpack-sources@^0.2.0:
     source-list-map "^1.1.1"
     source-map "~0.5.3"
 
-webpack-sources@^1.1.0:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
 webpack-sources@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.0.tgz#b16973bcf844ebcdb3afde32eda1c04d0b90f89d"