Merge branch 'canary' into sokra/update-turbopack

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.4.5-canary.1"
+  "version": "13.4.5-canary.2"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "13.4.5-canary.1",
+    "@next/eslint-plugin-next": "13.4.5-canary.2",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.42.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

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

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "private": true,
   "scripts": {
     "clean": "node ../../scripts/rm.mjs native",

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -83,7 +83,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "13.4.5-canary.1",
+    "@next/env": "13.4.5-canary.2",
     "@swc/helpers": "0.5.1",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001406",
@@ -139,11 +139,11 @@
     "@jest/types": "29.5.0",
     "@napi-rs/cli": "2.14.7",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "13.4.5-canary.1",
-    "@next/polyfill-nomodule": "13.4.5-canary.1",
-    "@next/react-dev-overlay": "13.4.5-canary.1",
-    "@next/react-refresh-utils": "13.4.5-canary.1",
-    "@next/swc": "13.4.5-canary.1",
+    "@next/polyfill-module": "13.4.5-canary.2",
+    "@next/polyfill-nomodule": "13.4.5-canary.2",
+    "@next/react-dev-overlay": "13.4.5-canary.2",
+    "@next/react-refresh-utils": "13.4.5-canary.2",
+    "@next/swc": "13.4.5-canary.2",
     "@opentelemetry/api": "1.4.1",
     "@segment/ajv-human-errors": "2.1.2",
     "@taskr/clear": "1.1.0",

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -92,6 +92,66 @@ const pluginState = getProxiedPluginState({
   injectedClientEntries: {} as Record<string, string>,
 })
 
+function deduplicateCSSImportsForEntry(mergedCSSimports: CssImports) {
+  // If multiple entry module connections are having the same CSS import,
+  // we only need to have one module to keep track of that CSS import.
+  // It is based on the fact that if a page or a layout is rendered in the
+  // given entry, all its parent layouts are always rendered too.
+  // This can avoid duplicate CSS imports in the generated CSS manifest,
+  // for example, if a page and its parent layout are both using the same
+  // CSS import, we only need to have the layout to keep track of that CSS
+  // import.
+  // To achieve this, we need to first collect all the CSS imports from
+  // every connection, and deduplicate them in the order of layers from
+  // top to bottom. The implementation can be generally described as:
+  // - Sort by number of `/` in the request path (the more `/`, the deeper)
+  // - When in the same depth, sort by the filename (template < layout < page and others)
+
+  // Sort the connections as described above.
+  const sortedCSSImports = Object.entries(mergedCSSimports).sort((a, b) => {
+    const [aPath] = a
+    const [bPath] = b
+
+    const aDepth = aPath.split('/').length
+    const bDepth = bPath.split('/').length
+
+    if (aDepth !== bDepth) {
+      return aDepth - bDepth
+    }
+
+    const aName = path.parse(aPath).name
+    const bName = path.parse(bPath).name
+
+    const indexA = ['template', 'layout'].indexOf(aName)
+    const indexB = ['template', 'layout'].indexOf(bName)
+
+    if (indexA === -1) return 1
+    if (indexB === -1) return -1
+    return indexA - indexB
+  })
+
+  const dedupedCSSImports: CssImports = {}
+  const trackedCSSImports = new Set<string>()
+  for (const [entryName, cssImports] of sortedCSSImports) {
+    for (const cssImport of cssImports) {
+      if (trackedCSSImports.has(cssImport)) continue
+
+      // Only track CSS imports that are in files that can inherit CSS.
+      const filename = path.parse(entryName).name
+      if (['template', 'layout'].includes(filename)) {
+        trackedCSSImports.add(cssImport)
+      }
+
+      if (!dedupedCSSImports[entryName]) {
+        dedupedCSSImports[entryName] = []
+      }
+      dedupedCSSImports[entryName].push(cssImport)
+    }
+  }
+
+  return dedupedCSSImports
+}
+
 export class ClientReferenceEntryPlugin {
   dev: boolean
   appDir: string
@@ -196,6 +256,8 @@ export class ClientReferenceEntryPlugin {
         ClientComponentImports[0]
       >()
       const actionEntryImports = new Map<string, string[]>()
+      const clientEntriesToInject = []
+      const mergedCSSimports: CssImports = {}
 
       for (const connection of compilation.moduleGraph.getOutgoingConnections(
         entryModule
@@ -204,7 +266,7 @@ export class ClientReferenceEntryPlugin {
         const entryDependency = connection.dependency
         const entryRequest = connection.dependency.request
 
-        const { clientImports, actionImports } =
+        const { clientComponentImports, actionImports, cssImports } =
           this.collectComponentInfoFromDependencies({
             entryRequest,
             compilation,
@@ -219,7 +281,7 @@ export class ClientReferenceEntryPlugin {
 
         // Next.js internals are put into a separate entry.
         if (!isAbsoluteRequest) {
-          clientImports.forEach((value) =>
+          clientComponentImports.forEach((value) =>
             internalClientComponentEntryImports.add(value)
           )
           continue
@@ -240,14 +302,30 @@ export class ClientReferenceEntryPlugin {
           relativeRequest.replace(/\.[^.\\/]+$/, '').replace(/^src[\\/]/, '')
         )
 
+        Object.assign(mergedCSSimports, cssImports)
+        clientEntriesToInject.push({
+          compiler,
+          compilation,
+          entryName: name,
+          clientComponentImports,
+          cssImports,
+          bundlePath,
+          absolutePagePath: entryRequest,
+        })
+      }
+
+      // Make sure CSS imports are deduplicated before injecting the client entry
+      // and SSR modules.
+      const dedupedCSSImports = deduplicateCSSImportsForEntry(mergedCSSimports)
+      for (const clientEntryToInject of clientEntriesToInject) {
         addClientEntryAndSSRModulesList.push(
           this.injectClientEntryAndSSRModules({
-            compiler,
-            compilation,
-            entryName: name,
-            clientImports,
-            bundlePath,
-            absolutePagePath: entryRequest,
+            ...clientEntryToInject,
+            clientImports: [
+              ...clientEntryToInject.clientComponentImports,
+              ...(dedupedCSSImports[clientEntryToInject.absolutePagePath] ||
+                []),
+            ],
           })
         )
       }
@@ -453,6 +531,8 @@ export class ClientReferenceEntryPlugin {
       forEachEntryModule(compilation, ({ name, entryModule }) => {
         const clientEntryDependencyMap = collectClientEntryDependencyMap(name)
         const tracked = new Set<string>()
+        const mergedCSSimports: CssImports = {}
+
         for (const connection of compilation.moduleGraph.getOutgoingConnections(
           entryModule
         )) {
@@ -471,9 +551,14 @@ export class ClientReferenceEntryPlugin {
             clientEntryDependencyMap,
           })
 
-          if (!cssManifest.cssImports) cssManifest.cssImports = {}
-          Object.assign(cssManifest.cssImports, cssImports)
+          Object.assign(mergedCSSimports, cssImports)
         }
+
+        if (!cssManifest.cssImports) cssManifest.cssImports = {}
+        Object.assign(
+          cssManifest.cssImports,
+          deduplicateCSSImportsForEntry(mergedCSSimports)
+        )
       })
     })
 
@@ -540,8 +625,8 @@ export class ClientReferenceEntryPlugin {
     dependency: any /* Dependency */
     clientEntryDependencyMap?: Record<string, any>
   }): {
-    clientImports: ClientComponentImports
     cssImports: CssImports
+    clientComponentImports: ClientComponentImports
     actionImports: [string, string[]][]
     clientActionImports: [string, string[]][]
   } {
@@ -611,13 +696,12 @@ export class ClientReferenceEntryPlugin {
         CSSImports.add(modRequest)
       }
 
-      // Check if request is for css file.
-      if ((!inClientComponentBoundary && isClientComponent) || isCSS) {
+      if (!inClientComponentBoundary && isClientComponent) {
         clientComponentImports.push(modRequest)
 
         // Here we are entering a client boundary, and we need to collect dependencies
         // in the client graph too.
-        if (isClientComponent && clientEntryDependencyMap) {
+        if (clientEntryDependencyMap) {
           if (clientEntryDependencyMap[modRequest]) {
             filterClientComponents(clientEntryDependencyMap[modRequest], true)
           }
@@ -643,7 +727,7 @@ export class ClientReferenceEntryPlugin {
     }
 
     return {
-      clientImports: clientComponentImports,
+      clientComponentImports,
       cssImports: CSSImports.size
         ? {
             [entryRequest]: Array.from(CSSImports),

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "13.4.5-canary.1",
+  "version": "13.4.5-canary.2",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

test/e2e/app-dir/app-css/app/css/css-conflict-layers/blue-button.js

@@ -0,0 +1,6 @@
+import { Button } from './button'
+import styles from './blue-button.module.css'
+
+export function BlueButton() {
+  return <Button className={'btn-blue ' + styles['blue-button']}>Button</Button>
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/blue-button.module.css

@@ -0,0 +1,4 @@
+.blue-button {
+  color: white;
+  background: blue;
+}

test/e2e/app-dir/app-css/app/css/css-conflict-layers/button.js

@@ -0,0 +1,5 @@
+import styles from './button.module.css'
+
+export function Button({ className = '' }) {
+  return <div className={'btn ' + styles.button + ' ' + className}>Button</div>
+}