Merge branch 'canary' into patch-1

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.3-canary.13"
+  "version": "9.5.3-canary.14"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "9.5.3-canary.13",
+  "version": "9.5.3-canary.14",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

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

@@ -33,6 +33,7 @@ export function getClientStyleLoader({
         },
       }
     : {
+        // @ts-ignore: TODO: remove when webpack 5 is stable
         loader: MiniCssExtractPlugin.loader,
         options: { publicPath: `${assetPrefix}/_next/` },
       }

packages/next/build/webpack/plugins/mini-css-extract-plugin.ts

@@ -1,4 +1,5 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+// @ts-ignore: TODO: remove when webpack 5 is stable
+import MiniCssExtractPlugin from './mini-css-extract-plugin/src'
 
 export default class NextMiniCssExtractPlugin extends MiniCssExtractPlugin {
   __next_css_remove = true

packages/next/build/webpack/plugins/mini-css-extract-plugin/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+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 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/build/webpack/plugins/mini-css-extract-plugin/src/CssDependency.js

@@ -0,0 +1,59 @@
+import webpack from 'webpack'
+
+class CssDependency extends webpack.Dependency {
+  constructor(
+    { identifier, content, media, sourceMap },
+    context,
+    identifierIndex
+  ) {
+    super()
+
+    this.identifier = identifier
+    this.identifierIndex = identifierIndex
+    this.content = content
+    this.media = media
+    this.sourceMap = sourceMap
+    this.context = context
+  }
+
+  getResourceIdentifier() {
+    return `css-module-${this.identifier}-${this.identifierIndex}`
+  }
+}
+
+const isWebpack5 = parseInt(webpack.version) === 5
+
+if (isWebpack5) {
+  // @ts-ignore TODO: remove ts-ignore when webpack 5 is stable
+  webpack.util.serialization.register(
+    CssDependency,
+    'next/dist/build/webpack/plugins/mini-css-extract-plugin/src/CssDependency',
+    null,
+    {
+      serialize(obj, { write }) {
+        write(obj.identifier)
+        write(obj.content)
+        write(obj.media)
+        write(obj.sourceMap)
+        write(obj.context)
+        write(obj.identifierIndex)
+      },
+      deserialize({ read }) {
+        const obj = new CssDependency(
+          {
+            identifier: read(),
+            content: read(),
+            media: read(),
+            sourceMap: read(),
+          },
+          read(),
+          read()
+        )
+
+        return obj
+      },
+    }
+  )
+}
+
+export default CssDependency

packages/next/build/webpack/plugins/mini-css-extract-plugin/src/CssModule.js

@@ -0,0 +1,97 @@
+import webpack from 'webpack'
+
+class CssModule extends webpack.Module {
+  constructor(dependency) {
+    super('css/mini-extract', dependency.context)
+    this.id = ''
+    this._identifier = dependency.identifier
+    this._identifierIndex = dependency.identifierIndex
+    this.content = dependency.content
+    this.media = dependency.media
+    this.sourceMap = dependency.sourceMap
+  } // no source() so webpack doesn't do add stuff to the bundle
+
+  size() {
+    return this.content.length
+  }
+
+  identifier() {
+    return `css ${this._identifier} ${this._identifierIndex}`
+  }
+
+  readableIdentifier(requestShortener) {
+    return `css ${requestShortener.shorten(this._identifier)}${
+      this._identifierIndex ? ` (${this._identifierIndex})` : ''
+    }`
+  }
+
+  nameForCondition() {
+    const resource = this._identifier.split('!').pop()
+
+    const idx = resource.indexOf('?')
+
+    if (idx >= 0) {
+      return resource.substring(0, idx)
+    }
+
+    return resource
+  }
+
+  updateCacheModule(module) {
+    this.content = module.content
+    this.media = module.media
+    this.sourceMap = module.sourceMap
+  }
+
+  needRebuild() {
+    return true
+  }
+
+  build(options, compilation, resolver, fileSystem, callback) {
+    this.buildInfo = {}
+    this.buildMeta = {}
+    callback()
+  }
+
+  updateHash(hash) {
+    super.updateHash(hash)
+    hash.update(this.content)
+    hash.update(this.media || '')
+    hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : '')
+  }
+}
+
+const isWebpack5 = parseInt(webpack.version) === 5
+
+if (isWebpack5) {
+  // @ts-ignore TODO: remove ts-ignore when webpack 5 is stable
+  webpack.util.serialization.register(
+    CssModule,
+    'next/dist/build/webpack/plugins/mini-css-extract-plugin/src/CssModule',
+    null,
+    {
+      serialize(obj, { write }) {
+        write(obj.context)
+        write(obj._identifier)
+        write(obj._identifierIndex)
+        write(obj.content)
+        write(obj.media)
+        write(obj.sourceMap)
+      },
+      deserialize({ read }) {
+        const obj = new CssModule({
+          context: read(),
+          identifier: read(),
+          identifierIndex: read(),
+          content: read(),
+          media: read(),
+          sourceMap: read(),
+        })
+
+        return obj
+      },
+    }
+  )
+}
+
+export default CssModule