Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
Dec 14, 2021
Merged
36 changes: 36 additions & 0 deletions e2e-tests/production-runtime/cypress/integration/assets.js
Original file line number Diff line number Diff line change
@@ -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)`, () => {
LekoArts marked this conversation as resolved.
Show resolved Hide resolved
// 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)
})
})
})
30 changes: 14 additions & 16 deletions e2e-tests/production-runtime/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions e2e-tests/production-runtime/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 16 additions & 0 deletions e2e-tests/production-runtime/src/pages/assets.js
Original file line number Diff line number Diff line change
@@ -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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions integration-tests/artifacts/gatsby-browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down
3 changes: 3 additions & 0 deletions integration-tests/artifacts/imported.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.foo {
background: blue;
}
1 change: 1 addition & 0 deletions packages/gatsby-plugin-less/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ exports.onCreateWebpackConfig = (
}
const lessRuleModules = {
test: /\.module\.less$/,
// TODO(v5): Remove obsolete modules option from miniCssExtract
use: [
!isSSR &&
loaders.miniCssExtract({
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-netlify-cms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-postcss/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ exports.onCreateWebpackConfig = (
}
const postcssRuleModules = {
test: MODULE_CSS_PATTERN,
// TODO(v5): Remove obsolete modules option from miniCssExtract
use: [
!isSSR &&
loaders.miniCssExtract({
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-sass/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-stylus/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ exports.onCreateWebpackConfig = (

const stylusRuleModules = {
test: /\.module\.styl$/,
// TODO(v5): Remove obsolete modules option from miniCssExtract
use: [
!isSSR &&
loaders.miniCssExtract({
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
80 changes: 34 additions & 46 deletions packages/gatsby/src/utils/webpack-utils.ts
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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
*/
Expand All @@ -94,7 +98,6 @@ interface ILoaderUtils {
}>

file: LoaderResolver
url: LoaderResolver
js: LoaderResolver
json: LoaderResolver
null: LoaderResolver
Expand Down Expand Up @@ -234,27 +237,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,
},
}
Expand Down Expand Up @@ -283,13 +272,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,
Expand Down Expand Up @@ -350,18 +341,6 @@ export const createWebpackUtils = (
}
},

url: (options = {}) => {
return {
loader: require.resolve(`url-loader`),
options: {
limit: 10000,
name: `${assetRelativeRoot}[name]-[hash].[ext]`,
fallback: require.resolve(`file-loader`),
...options,
},
}
},

pieh marked this conversation as resolved.
Show resolved Hide resolved
js: options => {
return {
options: {
Expand Down Expand Up @@ -545,8 +524,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]`,
},
}
}

Expand All @@ -556,8 +538,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]`,
},
}
}

Expand All @@ -567,8 +552,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]`,
},
}
}

Expand Down
Loading