Update to postcss-loader 4.0.4.

- postcss-loader 4.0 improves compatibility with webpack 5.
- the 4.0.2 and 4.0.3 release notes also mention improved PostCSS 8 compatibility (see issue #17242)
- postcss-loader by default now detects external PostCss configs and merges them with loader options,
so I have disabled this to preserve Next’s current behaviour. For example, Next accepts JSON configs with comments,
but postcss-loader fails to load them.
-  when patching the loader configuration, I try to detect the `postcssOptions` field instead of `ident`
as now passing an `ident` field to the postcss-loader options triggers a schema validation error
-  in one error overlay integration test, I check whether the error message contains the expected strings
   instead of matchin a snapshot exactly, as now the postcss loader inserts the file path from the filesystem
   root in the error message, which we can’t match exactly across test runs

packages/next/build/webpack/config/blocks/css/loaders/global.ts

@@ -40,8 +40,7 @@ export function getGlobalCssLoader(
   loaders.push({
     loader: require.resolve('next/dist/compiled/postcss-loader'),
     options: {
-      ident: '__nextjs_postcss',
-      plugins: postCssPlugins,
+      postcssOptions: { plugins: postCssPlugins, config: false },
       sourceMap: true,
     },
   })

packages/next/build/webpack/config/blocks/css/loaders/modules.ts

@@ -56,8 +56,7 @@ export function getCssModuleLoader(
   loaders.push({
     loader: require.resolve('next/dist/compiled/postcss-loader'),
     options: {
-      ident: '__nextjs_postcss',
-      plugins: postCssPlugins,
+      postcssOptions: { plugins: postCssPlugins, config: false },
       sourceMap: true,
     },
   })

packages/next/build/webpack/config/blocks/css/overrideCssConfiguration.ts

@@ -12,9 +12,9 @@ export async function __overrideCssConfiguration(
     if (
       rule.options &&
       typeof rule.options === 'object' &&
-      rule.options['ident'] === '__nextjs_postcss'
+      typeof rule.options.postcssOptions === 'object'
     ) {
-      rule.options.plugins = postCssPlugins
+      rule.options.postcssOptions.plugins = postCssPlugins
     } else if (Array.isArray(rule.oneOf)) {
       rule.oneOf.forEach(patch)
     } else if (Array.isArray(rule.use)) {

packages/next/compiled/postcss-loader/LICENSE

@@ -1,20 +1,20 @@
-License (MIT)
+Copyright JS Foundation and other contributors
 
-Copyright 2017 Andrey Sitnik <andrey@sitnik.ru>
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/next/compiled/postcss-loader/package.json

@@ -1 +1 @@
-{"name":"postcss-loader","main":"index.js","author":"Andrey Sitnik <andrey@sitnik.ru>","license":"MIT"}
+{"name":"postcss-loader","main":"cjs.js","author":"Andrey Sitnik <andrey@sitnik.ru>","license":"MIT"}

packages/next/package.json

@@ -195,7 +195,7 @@
     "ora": "4.0.4",
     "path-to-regexp": "6.1.0",
     "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "4.0.4",
     "postcss-preset-env": "6.7.0",
     "raw-body": "2.4.1",
     "recast": "0.18.5",

test/acceptance/ReactRefreshLogBox.test.js

@@ -812,13 +812,11 @@ test('css syntax errors', async () => {
   await session.patch('index.module.css', `.button {`)
   expect(await session.hasRedbox(true)).toBe(true)
   const source = await session.getRedboxSource()
-  expect(source).toMatchInlineSnapshot(`
-    "./index.module.css:1:1
-    Syntax error: Unclosed block
-
-    > 1 | .button {
-        | ^"
-  `)
+  expect(source).toMatch('./index.module.css:1:1')
+  expect(source).toMatch('Syntax error: ')
+  expect(source).toMatch('Unclosed block')
+  expect(source).toMatch('> 1 | .button {')
+  expect(source).toMatch('    | ^')
 
   // Not local error
   await session.patch('index.module.css', `button {}`)
@@ -829,7 +827,7 @@ test('css syntax errors', async () => {
     Syntax error: Selector \\"button\\" is not pure (pure selectors must contain at least one local class or id)
 
     > 1 | button {}
-        |         ^"
+        | ^"
   `)
 
   await cleanup()

test/integration/typescript-ignore-errors/next.config.js

@@ -0,0 +1 @@
+module.exports = { typescript: { ignoreBuildErrors: false } }

yarn.lock

@@ -3212,7 +3212,7 @@
   dependencies:
     "@types/jest-diff" "*"
 
-"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
@@ -3831,6 +3831,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.4, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.5:
+  version "6.12.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.5.tgz#19b0e8bae8f476e5ba666300387775fb1a00a4da"
+  integrity sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ally.js@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/ally.js/-/ally.js-1.4.1.tgz#9fb7e6ba58efac4ee9131cb29aa9ee3b540bcf1e"
@@ -5743,6 +5753,17 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 coveralls@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.3.tgz#83b1c64aea1c6afa69beaf50b55ac1bc4d13e2b8"
@@ -8629,7 +8650,7 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   dependencies:
@@ -10253,6 +10274,11 @@ klona@^2.0.3:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.3.tgz#98274552c513583ad7a01456a789a2a0b4a2a538"
   integrity sha512-CgPOT3ZadDpXxKcfV56lEQ9OQSZ42Mk26gnozI+uN/k39vzD8toUhRQoqsX0m9Q3eMPEfsLWmtyUpK/yqST4yg==
 
+klona@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
+  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
+
 ky-universal@0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/ky-universal/-/ky-universal-0.6.0.tgz#a91c265c80c38f750e65bbc6d72df16f5b58691f"
@@ -12893,6 +12919,17 @@ postcss-loader@3.0.0:
     postcss-load-config "^2.0.0"
     schema-utils "^1.0.0"
 
+postcss-loader@4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.4.tgz#b2d005b52e008a44991cf8123bee207e635eb53e"
+  integrity sha512-pntA9zIR14drQo84yGTjQJg1m7T0DkXR4vXYHBngiRZdJtEeCrojL6lOpqUanMzG375lIJbT4Yug85zC/AJWGw==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
 postcss-logical@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
@@ -14938,6 +14975,15 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
+  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
+  dependencies:
+    "@types/json-schema" "^7.0.6"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -17160,6 +17206,11 @@ yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
 
+yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yaml@^1.7.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.9.2.tgz#f0cfa865f003ab707663e4f04b3956957ea564ed"