Merge branch 'canary' into fix/duplicated-styled-jsx-styles

.github/CODEOWNERS

@@ -12,6 +12,7 @@
 
 # Image Component (@styfle)
 
+/**/*image*                                                  @timneutkens @ijjk @shuding @styfle
 /**/*image*/**                                               @timneutkens @ijjk @shuding @styfle
 /packages/next/client/use-intersection.tsx                   @timneutkens @ijjk @shuding @styfle
 /packages/next/server/lib/squoosh/                           @timneutkens @ijjk @shuding @styfle

examples/with-google-tag-manager/pages/_app.js

@@ -16,6 +16,7 @@ function MyApp({ Component, pageProps }) {
     <>
       {/* Google Tag Manager - Global base code */}
       <Script
+        id="gtag-base"
         strategy="afterInteractive"
         dangerouslySetInnerHTML={{
           __html: `

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.6-canary.15"
+  "version": "12.1.6"
 }

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.6-canary.15",
+  "version": "12.1.6",
   "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": "12.1.6-canary.15",
+    "@next/eslint-plugin-next": "12.1.6",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.6-canary.15",
+  "version": "12.1.6",
   "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": "12.1.6-canary.15",
+  "version": "12.1.6",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

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

packages/next-codemod/transforms/__testfixtures__/new-link/styled-jsx.input.js

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+const CustomLink = ({
+  href,
+  title,
+  children,
+}) => {
+  return (
+    <span className="link-container">
+      <Link href={href}>
+        <a className="link" title={title}>
+          {children}
+        </a>
+      </Link>
+      <style jsx>{`
+        .link {
+          text-decoration: none;
+          color: var(--geist-foreground);
+          font-weight: 500;
+        }
+      `}</style>
+    </span>
+  );
+};
+
+export default CustomLink;

packages/next-codemod/transforms/__testfixtures__/new-link/styled-jsx.output.js

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+const CustomLink = ({
+  href,
+  title,
+  children,
+}) => {
+  return (
+    <span className="link-container">
+      <Link href={href} legacyBehavior>
+        <a className="link" title={title}>
+          {children}
+        </a>
+      </Link>
+      <style jsx>{`
+        .link {
+          text-decoration: none;
+          color: var(--geist-foreground);
+          font-weight: 500;
+        }
+      `}</style>
+    </span>
+  );
+};
+
+export default CustomLink;

packages/next-codemod/transforms/__tests__/new-link.test.js

@@ -9,7 +9,8 @@ const fixtures = [
   'excludes-links-with-legacybehavior-prop',
   'children-interpolation',
   'spread-props',
-  'link-string'
+  'link-string',
+  'styled-jsx',
 ]
 
 for (const fixture of fixtures) {

packages/next-codemod/transforms/new-link.ts

@@ -22,6 +22,13 @@ export default function transformer(file: FileInfo, api: API) {
       }
 
       const linkElements = $j.findJSXElements(variableName)
+      const hasStylesJSX = $j.findJSXElements('style').some((stylePath) => {
+        const $style = j(stylePath)
+        const hasJSXProp =
+          $style.find(j.JSXAttribute, { name: { name: 'jsx' } }).size() !== 0
+
+        return hasJSXProp
+      })
 
       linkElements.forEach((linkPath) => {
         const $link = j(linkPath).filter((childPath) => {
@@ -37,6 +44,15 @@ export default function transformer(file: FileInfo, api: API) {
           return
         }
 
+        // If file has <style jsx> enable legacyBehavior
+        // and keep <a> to  stay on the safe side
+        if (hasStylesJSX) {
+          $link
+            .get('attributes')
+            .push(j.jsxAttribute(j.jsxIdentifier('legacyBehavior')))
+          return
+        }
+
         const linkChildrenNodes = $link.get('children')
 
         // Text-only link children are already correct with the new behavior

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.6-canary.15",
+  "version": "12.1.6",
   "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": "12.1.6-canary.15",
+  "version": "12.1.6",
   "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": "12.1.6-canary.15",
+  "version": "12.1.6",
   "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": "12.1.6-canary.15",
+  "version": "12.1.6",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",

packages/next/build/compiler.ts

@@ -5,6 +5,7 @@ import { Span } from '../trace'
 export type CompilerResult = {
   errors: webpack5.StatsError[]
   warnings: webpack5.StatsError[]
+  stats: webpack5.Stats | undefined
 }
 
 function generateStats(
@@ -54,14 +55,17 @@ export function runCompiler(
               return resolve({
                 errors: [{ message: reason, details: (err as any).details }],
                 warnings: [],
+                stats,
               })
             }
             return reject(err)
           } else if (!stats) throw new Error('No Stats from webpack')
 
           const result = webpackCloseSpan
             .traceChild('webpack-generate-error-stats')
-            .traceFn(() => generateStats({ errors: [], warnings: [] }, stats))
+            .traceFn(() =>
+              generateStats({ errors: [], warnings: [], stats }, stats)
+            )
           return resolve(result)
         })
     })

packages/next/build/entries.ts

@@ -17,7 +17,7 @@ import { __ApiPreviewProps } from '../server/api-utils'
 import { isTargetLikeServerless } from '../server/utils'
 import { warn } from './output/log'
 import { parse } from '../build/swc'
-import { isFlightPage, withoutRSCExtensions } from './utils'
+import { isServerComponentPage, withoutRSCExtensions } from './utils'
 import { normalizePathSep } from '../shared/lib/page-path/normalize-path-sep'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
 
@@ -251,7 +251,10 @@ export function getEdgeServerEntry(opts: {
     absolutePagePath: opts.absolutePagePath,
     buildId: opts.buildId,
     dev: opts.isDev,
-    isServerComponent: isFlightPage(opts.config, opts.absolutePagePath),
+    isServerComponent: isServerComponentPage(
+      opts.config,
+      opts.absolutePagePath
+    ),
     page: opts.page,
     stringifiedConfig: JSON.stringify(opts.config),
   }