From 48260c8dc7ae75c5dd35812d9543164e83eca709 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 6 Jan 2022 15:39:36 +0100 Subject: [PATCH 1/2] Revert "fix(gatsby): Update mini-css-extract-plugin to fix inc builds issue (#33979)" This partially reverts commit 725dc3609a85728e3dbcbd77e740b5fed488c515. --- integration-tests/artifacts/gatsby-browser.js | 3 +- .../gatsby-plugin-less/src/gatsby-node.js | 1 - .../gatsby-plugin-netlify-cms/package.json | 2 +- .../gatsby-plugin-postcss/src/gatsby-node.js | 1 - .../gatsby-plugin-sass/src/gatsby-node.js | 1 - .../gatsby-plugin-stylus/src/gatsby-node.js | 1 - packages/gatsby/package.json | 4 +- packages/gatsby/src/utils/webpack-utils.ts | 68 +++++++++---------- yarn.lock | 49 ++++++++++--- 9 files changed, 78 insertions(+), 52 deletions(-) diff --git a/integration-tests/artifacts/gatsby-browser.js b/integration-tests/artifacts/gatsby-browser.js index 1a0a374d24012..86e3c8d855932 100644 --- a/integration-tests/artifacts/gatsby-browser.js +++ b/integration-tests/artifacts/gatsby-browser.js @@ -3,7 +3,8 @@ 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") +// TODO: Uncomment imported.css to test issue https://github.com/gatsbyjs/gatsby/issues/33450 +// require("./imported.css") exports.wrapRootElement = ({ element }) => { return ( diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js index 767e367fcf651..0845a60649f21 100644 --- a/packages/gatsby-plugin-less/src/gatsby-node.js +++ b/packages/gatsby-plugin-less/src/gatsby-node.js @@ -34,7 +34,6 @@ exports.onCreateWebpackConfig = ( } const lessRuleModules = { test: /\.module\.less$/, - // TODO(v5): Remove obsolete modules option from miniCssExtract use: [ !isSSR && loaders.miniCssExtract({ diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json index 31b30e001eace..e19da9e879026 100644 --- a/packages/gatsby-plugin-netlify-cms/package.json +++ b/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": "^2.4.4", + "mini-css-extract-plugin": "1.6.2", "netlify-identity-widget": "^1.9.2" }, "devDependencies": { diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 366a6c541482a..98ef0bfbb7a58 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -50,7 +50,6 @@ exports.onCreateWebpackConfig = ( } const postcssRuleModules = { test: MODULE_CSS_PATTERN, - // TODO(v5): Remove obsolete modules option from miniCssExtract use: [ !isSSR && loaders.miniCssExtract({ diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js index 0512a17869a53..dc8bd2f05be7b 100644 --- a/packages/gatsby-plugin-sass/src/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -43,7 +43,6 @@ exports.onCreateWebpackConfig = ( const sassRuleModules = { test: sassRuleModulesTest || /\.module\.s(a|c)ss$/, - // TODO(v5): Remove obsolete modules option from miniCssExtract use: [ !isSSR && loaders.miniCssExtract({ diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js index 9036c39d50886..2a8e9425c17f0 100644 --- a/packages/gatsby-plugin-stylus/src/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js @@ -54,7 +54,6 @@ exports.onCreateWebpackConfig = ( const stylusRuleModules = { test: /\.module\.styl$/, - // TODO(v5): Remove obsolete modules option from miniCssExtract use: [ !isSSR && loaders.miniCssExtract({ diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index cdc2e2fead4da..2784bf399f531 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -48,7 +48,7 @@ "cookie": "^0.4.1", "core-js": "^3.17.2", "cors": "^2.8.5", - "css-loader": "^6.5.1", + "css-loader": "^5.2.7", "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": "^2.4.4", + "mini-css-extract-plugin": "1.6.2", "mitt": "^1.2.0", "moment": "^2.29.1", "multer": "^1.4.3", diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index 6d1449e4c4add..92a75778a7b3c 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/packages/gatsby/src/utils/webpack-utils.ts @@ -1,5 +1,5 @@ import * as path from "path" -import { RuleSetRule, WebpackPluginInstance, Configuration } from "webpack" +import { RuleSetRule, WebpackPluginInstance } from "webpack" import { GraphQLSchema } from "graphql" import { Plugin as PostCSSPlugin } from "postcss" import autoprefixer from "autoprefixer" @@ -65,16 +65,12 @@ type CSSModulesOptions = exportOnlyLocals?: boolean } -interface IMiniCSSExtractLoaderModuleOptions { - filename?: Required["output"]["filename"] | undefined - chunkFilename?: Required["output"]["chunkFilename"] | undefined - experimentalUseImportModule?: boolean | undefined - ignoreOrder?: boolean | undefined - insert?: string | ((linkTag: any) => void) | undefined - attributes?: Record | undefined - linkType?: string | false | "text/css" | undefined - runtime?: boolean | undefined -} +type MiniCSSExtractLoaderModuleOptions = + | undefined + | boolean + | { + namedExport?: boolean + } /** * Utils that produce webpack `loader` objects */ @@ -238,13 +234,27 @@ export const createWebpackUtils = ( } }, - miniCssExtract: (options: IMiniCSSExtractLoaderModuleOptions = {}) => { - // @ts-ignore - legacy modules + miniCssExtract: ( + options: { + modules?: MiniCSSExtractLoaderModuleOptions + } = {} + ) => { + let moduleOptions: MiniCSSExtractLoaderModuleOptions = undefined + const { modules, ...restOptions } = options + if (typeof modules === `boolean` && options.modules) { + moduleOptions = { + namedExport: true, + } + } else { + moduleOptions = modules + } + return { loader: MiniCssExtractPlugin.loader, options: { + modules: moduleOptions, ...restOptions, }, } @@ -273,15 +283,13 @@ 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: { - filter: function (url: string): boolean { - // When an url starts with / - if (url.startsWith(`/`)) { - return false - } - - return true - }, + url: function (url: string): boolean { + // When an url starts with / + if (url.startsWith(`/`)) { + return false + } + + return true }, sourceMap: !PRODUCTION, modules: modulesOptions, @@ -342,7 +350,6 @@ export const createWebpackUtils = ( } }, - // TODO(v5): Consider removing this (as not used anymore internally) url: (options = {}) => { return { loader: require.resolve(`url-loader`), @@ -538,11 +545,8 @@ 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]`, - }, } } @@ -552,11 +556,8 @@ 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]`, - }, } } @@ -566,11 +567,8 @@ 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]`, - }, } } diff --git a/yarn.lock b/yarn.lock index 31955cabb65c9..3c14fb9afe757 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7930,10 +7930,26 @@ 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@^6.2.0, 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== +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== + 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== dependencies: icss-utils "^5.1.0" postcss "^8.2.15" @@ -15996,12 +16012,14 @@ 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@^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== +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== dependencies: - schema-utils "^3.1.0" + loader-utils "^2.0.0" + schema-utils "^3.0.0" + webpack-sources "^1.1.0" mini-svg-data-uri@^1.4.3: version "1.4.3" @@ -21760,6 +21778,11 @@ 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" @@ -24556,6 +24579,14 @@ 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" From 9a493b668118adf210ab25ddb9b18e9e9f518631 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 6 Jan 2022 15:44:22 +0100 Subject: [PATCH 2/2] add todo --- packages/gatsby/src/utils/webpack-utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index 92a75778a7b3c..5e0fd428fd3bb 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/packages/gatsby/src/utils/webpack-utils.ts @@ -234,6 +234,7 @@ export const createWebpackUtils = ( } }, + // TODO(v5): Re-Apply https://github.com/gatsbyjs/gatsby/pull/33979 with breaking change in inline loader syntax miniCssExtract: ( options: { modules?: MiniCSSExtractLoaderModuleOptions