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

* remove obsolete option

* update plugin

* update netlify

* clarify comment

* update e2e test

* types

* remove resolutions

* update css-loader

* tests(artifacts): add css import to test site (#33982)

* things work now?

* wip

* clean

* asset tests

* wrap with offline plugin

* add back url loader

Co-authored-by: Michal Piechowiak <[email protected]>
Co-authored-by: gatsbybot <[email protected]>

Author: 3 people

e2e-tests/production-runtime/cypress/integration/assets.js

@@ -0,0 +1,36 @@
+describe(`webpack assets`, () => {
+  beforeEach(() => {
+    cy.intercept("/gatsby-astronaut.png").as("static-folder-image")
+    // Should load two files: normal and italic
+    cy.intercept("/static/merriweather-latin-300**.woff2").as("font")
+    cy.intercept("/static/gatsby-astronaut-**.png").as("img-import")
+    cy.visit(`/assets/`).waitForRouteChange()
+  })
+
+  // Service worker is handling requests so this one is cached by previous runs
+  if (!Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
+    it(`should only create one font file (no duplicates with different hashes)`, () => {
+      // Check that there is no duplicate files (should have italic as second request, not another normal font)
+      cy.wait("@font").should(req => {
+        expect(req.response.url).to.match(/merriweather-latin-300-/i)
+      })
+      cy.wait("@font").should(req => {
+        expect(req.response.url).to.match(/merriweather-latin-300italic-/i)
+      })
+    })
+    it(`should load image import`, () => {
+      cy.wait("@img-import").should(req => {
+        expect(req.response.statusCode).to.be.gte(200).and.lt(400)
+      })
+    })
+    it(`should load file import`, () => {
+      cy.getTestElement('assets-pdf-import').should('have.attr', 'href').and('match', /\/static\/pdf-example-.*\.pdf/i)
+    })
+  }
+
+  it(`should load static folder asset`, () => {
+    cy.wait("@static-folder-image").should(req => {
+      expect(req.response.statusCode).to.be.gte(200).and.lt(400)
+    })
+  })
+})

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,10 +32,11 @@
   "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",
+    "clean": "gatsby clean",
     "test": "npm run build && npm run start-server-and-test && npm run test-env-vars",
     "test:offline": "npm run build:offline && yarn start-server-and-test:offline && npm run test-env-vars",
     "test-env-vars": " node __tests__/env-vars.js",
@@ -51,16 +52,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"
   }
 }

e2e-tests/production-runtime/src/files/pdf-example.pdf

@@ -15,6 +15,19 @@
   font-size: 18px;
 }
 
+.merriweather-300 {
+  font-family: "Merriweather";
+  font-weight: 300;
+  font-size: 18px;
+}
+
+.merriweather-300-italic {
+  font-family: "Merriweather";
+  font-weight: 300;
+  font-size: 18px;
+  font-style: italic;
+}
+
 .dog-background-flip {
   background: url("//localhost:9000/dog-thumbnail-flip.jpg");
   width: 640px;

e2e-tests/production-runtime/src/images/gatsby-astronaut.png

@@ -0,0 +1,16 @@
+import * as React from "react"
+import Layout from "../components/layout"
+import astronaut from "../images/gatsby-astronaut.png"
+import pdf from "../files/pdf-example.pdf"
+
+const Assets = () => (
+  <Layout>
+    <h2 className="merriweather-300">Font</h2>
+    <h2 className="merriweather-300-italic">Font Italic</h2>
+    <img data-testid="assets-img-static-folder" src="../gatsby-astronaut.png" alt="Gatsby Astronaut Static Folder" />
+    <img data-testid="assets-img-import" src={astronaut} alt="Gatsby Astronaut" />
+    <a data-testid="assets-pdf-import" href={pdf}>Download PDF</a>
+  </Layout>
+)
+
+export default Assets

e2e-tests/production-runtime/src/index.css

@@ -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 (
     <>

e2e-tests/production-runtime/src/pages/assets.js

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

e2e-tests/production-runtime/static/gatsby-astronaut.png

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

integration-tests/artifacts/gatsby-browser.js

@@ -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": {

integration-tests/artifacts/imported.css

@@ -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-less/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-netlify-cms/package.json

@@ -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-plugin-postcss/src/gatsby-node.js

@@ -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-plugin-sass/src/gatsby-node.js

@@ -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,
@@ -350,6 +342,7 @@ export const createWebpackUtils = (
       }
     },
 
+    // TODO(v5): Consider removing this (as not used anymore internally)
     url: (options = {}) => {
       return {
         loader: require.resolve(`url-loader`),
@@ -545,8 +538,11 @@ export const createWebpackUtils = (
    */
   rules.fonts = (): RuleSetRule => {
     return {
-      use: [loaders.url()],
       test: /\.(eot|otf|ttf|woff(2)?)(\?.*)?$/,
+      type: `asset/resource`,
+      generator: {
+        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
+      },
     }
   }
 
@@ -556,8 +552,11 @@ export const createWebpackUtils = (
    */
   rules.images = (): RuleSetRule => {
     return {
-      use: [loaders.url()],
       test: /\.(ico|svg|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/,
+      type: `asset/resource`,
+      generator: {
+        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
+      },
     }
   }
 
@@ -567,8 +566,11 @@ export const createWebpackUtils = (
    */
   rules.media = (): RuleSetRule => {
     return {
-      use: [loaders.url()],
       test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
+      type: `asset/resource`,
+      generator: {
+        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
+      },
     }
   }