From 7f9b476341624a1813cea128cafb422f5d65ac97 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Feb 2022 11:24:42 -0800
Subject: [PATCH 01/13] Update to use whatwg validator for test (#34891)

The w3c validator seems to be down and this shouldn't block our tests so this uses the whatwg validator instead

x-ref: https://github.com/vercel/next.js/runs/5361585193?check_suite_focus=true
x-ref: https://github.com/vercel/next.js/runs/5356851471?check_suite_focus=true
x-ref: https://github.com/vercel/next.js/runs/5361463120?check_suite_focus=true
---
 test/integration/image-component/default/test/index.test.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 96d1041b6b59..9bc8665170f2 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -1150,7 +1150,7 @@ function runTests(mode) {
     }
   })
 
-  it('should be valid W3C HTML', async () => {
+  it('should be valid HTML', async () => {
     let browser
     try {
       browser = await webdriver(appPort, '/valid-html-w3c')
@@ -1161,8 +1161,10 @@ function runTests(mode) {
         url,
         format: 'json',
         isLocal: true,
+        validator: 'whatwg',
       })
-      expect(result.messages).toEqual([])
+      expect(result.isValid).toBe(true)
+      expect(result.errors).toEqual([])
     } finally {
       if (browser) {
         await browser.close()

From 7ca78dd036cd3cfe04b9cf29e669d93126be1c9c Mon Sep 17 00:00:00 2001
From: Sukka <isukkaw@gmail.com>
Date: Tue, 1 Mar 2022 03:50:57 +0800
Subject: [PATCH 02/13] refactor: re-use existed escapeRegex (#34470)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

`escape-regex.ts` will always be included in the bundle, so not re-using it actually makes the size larger.
---
 packages/next/shared/lib/router/utils/route-regex.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/next/shared/lib/router/utils/route-regex.ts b/packages/next/shared/lib/router/utils/route-regex.ts
index a3a24dc755b0..ca26d12a1e1f 100644
--- a/packages/next/shared/lib/router/utils/route-regex.ts
+++ b/packages/next/shared/lib/router/utils/route-regex.ts
@@ -1,15 +1,11 @@
+import { escapeStringRegexp } from '../../escape-regexp'
+
 interface Group {
   pos: number
   repeat: boolean
   optional: boolean
 }
 
-// this isn't importing the escape-string-regex module
-// to reduce bytes
-function escapeRegex(str: string) {
-  return str.replace(/[|\\{}()[\]^$+*?.-]/g, '\\$&')
-}
-
 function parseParameter(param: string) {
   const optional = param.startsWith('[') && param.endsWith(']')
   if (optional) {
@@ -34,7 +30,7 @@ export function getParametrizedRoute(route: string) {
         groups[key] = { pos: groupIndex++, repeat, optional }
         return repeat ? (optional ? '(?:/(.+?))?' : '/(.+?)') : '/([^/]+?)'
       } else {
-        return `/${escapeRegex(segment)}`
+        return `/${escapeStringRegexp(segment)}`
       }
     })
     .join('')
@@ -92,7 +88,7 @@ export function getParametrizedRoute(route: string) {
               : `/(?<${cleanedKey}>.+?)`
             : `/(?<${cleanedKey}>[^/]+?)`
         } else {
-          return `/${escapeRegex(segment)}`
+          return `/${escapeStringRegexp(segment)}`
         }
       })
       .join('')

From 8e3b6fc4b94dbaff6112046c23a73672411d6658 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 28 Feb 2022 22:57:08 +0100
Subject: [PATCH 03/13] Fix only byte stream writing is allowed in CF workers
 (#34893)

CF worker doesn't allow to use `writer.write(string)` but only byte stream, we have to transform the Uint8Array stream

![image](https://user-images.githubusercontent.com/4800338/156043536-25fcdb15-3f69-427e-9e31-97169609eb7a.png)
---
 packages/next/server/render.tsx | 181 +++++++++++++++-----------------
 1 file changed, 84 insertions(+), 97 deletions(-)

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 014b6c104a12..2dd64eb1b402 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -304,17 +304,15 @@ const rscCache = new Map()
 
 function createRSCHook() {
   return (
-    writable: WritableStream<string>,
+    writable: WritableStream<Uint8Array>,
     id: string,
-    req: ReadableStream<string>,
+    req: ReadableStream<Uint8Array>,
     bootstrap: boolean
   ) => {
     let entry = rscCache.get(id)
     if (!entry) {
       const [renderStream, forwardStream] = readableStreamTee(req)
-      entry = createFromReadableStream(
-        pipeThrough(renderStream, createTextEncoderStream())
-      )
+      entry = createFromReadableStream(renderStream)
       rscCache.set(id, entry)
 
       let bootstrapped = false
@@ -325,10 +323,11 @@ function createRSCHook() {
           if (bootstrap && !bootstrapped) {
             bootstrapped = true
             writer.write(
-              `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
-                0,
-                id,
-              ])})</script>`
+              encodeText(
+                `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
+                  [0, id]
+                )})</script>`
+              )
             )
           }
           if (done) {
@@ -336,11 +335,11 @@ function createRSCHook() {
             writer.close()
           } else {
             writer.write(
-              `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
-                1,
-                id,
-                value,
-              ])})</script>`
+              encodeText(
+                `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
+                  [1, id, decodeText(value)]
+                )})</script>`
+              )
             )
             process()
           }
@@ -365,7 +364,7 @@ function createServerComponentRenderer(
     runtime,
   }: {
     cachePrefix: string
-    transformStream: TransformStream<string, string>
+    transformStream: TransformStream<Uint8Array, Uint8Array>
     serverComponentManifest: NonNullable<RenderOpts['serverComponentManifest']>
     runtime: 'nodejs' | 'edge'
   }
@@ -381,12 +380,9 @@ function createServerComponentRenderer(
   const writable = transformStream.writable
   const ServerComponentWrapper = (props: any) => {
     const id = (React as any).useId()
-    const reqStream: ReadableStream<string> = pipeThrough(
-      renderToReadableStream(
-        renderFlight(App, OriginalComponent, props),
-        serverComponentManifest
-      ),
-      createTextDecoderStream()
+    const reqStream: ReadableStream<Uint8Array> = renderToReadableStream(
+      renderFlight(App, OriginalComponent, props),
+      serverComponentManifest
     )
 
     const response = useRSCResponse(
@@ -482,8 +478,8 @@ export async function renderToHTML(
   let Component: React.ComponentType<{}> | ((props: any) => JSX.Element) =
     renderOpts.Component
   let serverComponentsInlinedTransformStream: TransformStream<
-    string,
-    string
+    Uint8Array,
+    Uint8Array
   > | null = null
 
   if (isServerComponent) {
@@ -1181,21 +1177,16 @@ export async function renderToHTML(
   if (isResSent(res) && !isSSG) return null
 
   if (renderServerComponentData) {
-    const stream: ReadableStream<string> = pipeThrough(
-      renderToReadableStream(
-        renderFlight(App, OriginalComponent, {
-          ...props.pageProps,
-          ...serverComponentProps,
-        }),
-        serverComponentManifest
-      ),
-      createTextDecoderStream()
+    const stream: ReadableStream<Uint8Array> = renderToReadableStream(
+      renderFlight(App, OriginalComponent, {
+        ...props.pageProps,
+        ...serverComponentProps,
+      }),
+      serverComponentManifest
     )
+
     return new RenderResult(
-      pipeThrough(
-        pipeThrough(stream, createBufferedTransformStream()),
-        createTextEncoderStream()
-      )
+      pipeThrough(stream, createBufferedTransformStream())
     )
   }
 
@@ -1360,7 +1351,8 @@ export async function renderToHTML(
               generateStaticHTML: true,
             })
 
-            return await streamToString(flushEffectStream)
+            const flushed = await streamToString(flushEffectStream)
+            return flushed
           }
 
           return await renderToStream({
@@ -1607,9 +1599,7 @@ export async function renderToHTML(
     return new RenderResult(html)
   }
 
-  return new RenderResult(
-    pipeThrough(chainStreams(streams), createTextEncoderStream())
-  )
+  return new RenderResult(chainStreams(streams))
 }
 
 function errorToJSON(err: Error) {
@@ -1707,27 +1697,10 @@ function createTransformStream<Input, Output>({
   }
 }
 
-function createTextDecoderStream(): TransformStream<Uint8Array, string> {
-  const decoder = new TextDecoder()
-  return createTransformStream({
-    transform(chunk, controller) {
-      controller.enqueue(
-        typeof chunk === 'string' ? chunk : decoder.decode(chunk)
-      )
-    },
-  })
-}
-
-function createTextEncoderStream(): TransformStream<string, Uint8Array> {
-  const encoder = new TextEncoder()
-  return createTransformStream({
-    transform(chunk, controller) {
-      controller.enqueue(encoder.encode(chunk))
-    },
-  })
-}
-
-function createBufferedTransformStream(): TransformStream<string, string> {
+function createBufferedTransformStream(): TransformStream<
+  Uint8Array,
+  Uint8Array
+> {
   let bufferedString = ''
   let pendingFlush: Promise<void> | null = null
 
@@ -1735,7 +1708,7 @@ function createBufferedTransformStream(): TransformStream<string, string> {
     if (!pendingFlush) {
       pendingFlush = new Promise((resolve) => {
         setTimeout(() => {
-          controller.enqueue(bufferedString)
+          controller.enqueue(encodeText(bufferedString))
           bufferedString = ''
           pendingFlush = null
           resolve()
@@ -1747,7 +1720,7 @@ function createBufferedTransformStream(): TransformStream<string, string> {
 
   return createTransformStream({
     transform(chunk, controller) {
-      bufferedString += chunk
+      bufferedString += decodeText(chunk)
       flushBuffer(controller)
     },
 
@@ -1761,11 +1734,11 @@ function createBufferedTransformStream(): TransformStream<string, string> {
 
 function createFlushEffectStream(
   handleFlushEffect: () => Promise<string>
-): TransformStream<string, string> {
+): TransformStream<Uint8Array, Uint8Array> {
   return createTransformStream({
     async transform(chunk, controller) {
       const extraChunk = await handleFlushEffect()
-      controller.enqueue(extraChunk + chunk)
+      controller.enqueue(encodeText(extraChunk + decodeText(chunk)))
     },
   })
 }
@@ -1781,10 +1754,10 @@ function renderToStream({
   ReactDOMServer: typeof import('react-dom/server')
   element: React.ReactElement
   suffix?: string
-  dataStream?: ReadableStream<string>
+  dataStream?: ReadableStream<Uint8Array>
   generateStaticHTML: boolean
   flushEffectHandler?: () => Promise<string>
-}): Promise<ReadableStream<string>> {
+}): Promise<ReadableStream<Uint8Array>> {
   return new Promise((resolve, reject) => {
     let resolved = false
 
@@ -1799,7 +1772,7 @@ function renderToStream({
         // defer to a microtask to ensure `stream` is set.
         resolve(
           Promise.resolve().then(() => {
-            const transforms: Array<TransformStream<string, string>> = [
+            const transforms: Array<TransformStream<Uint8Array, Uint8Array>> = [
               createBufferedTransformStream(),
               flushEffectHandler
                 ? createFlushEffectStream(flushEffectHandler)
@@ -1820,45 +1793,57 @@ function renderToStream({
       }
     }
 
-    const renderStream = pipeThrough(
-      (ReactDOMServer as any).renderToReadableStream(element, {
-        onError(err: Error) {
-          if (!resolved) {
-            resolved = true
-            reject(err)
-          }
-        },
-        onCompleteShell() {
-          if (!generateStaticHTML) {
-            doResolve()
-          }
-        },
-        onCompleteAll() {
+    const renderStream: ReadableStream<Uint8Array> = (
+      ReactDOMServer as any
+    ).renderToReadableStream(element, {
+      onError(err: Error) {
+        if (!resolved) {
+          resolved = true
+          reject(err)
+        }
+      },
+      onCompleteShell() {
+        if (!generateStaticHTML) {
           doResolve()
-        },
-      }),
-      createTextDecoderStream()
-    )
+        }
+      },
+      onCompleteAll() {
+        doResolve()
+      },
+    })
   })
 }
 
-function createSuffixStream(suffix: string): TransformStream<string, string> {
+function encodeText(input: string) {
+  return new TextEncoder().encode(input)
+}
+
+function decodeText(input?: Uint8Array) {
+  return new TextDecoder().decode(input)
+}
+
+function createSuffixStream(
+  suffix: string
+): TransformStream<Uint8Array, Uint8Array> {
   return createTransformStream({
     flush(controller) {
       if (suffix) {
-        controller.enqueue(suffix)
+        controller.enqueue(encodeText(suffix))
       }
     },
   })
 }
 
-function createPrefixStream(prefix: string): TransformStream<string, string> {
+function createPrefixStream(
+  prefix: string
+): TransformStream<Uint8Array, Uint8Array> {
   let prefixFlushed = false
   return createTransformStream({
     transform(chunk, controller) {
       if (!prefixFlushed && prefix) {
         prefixFlushed = true
-        controller.enqueue(chunk + prefix)
+        controller.enqueue(chunk)
+        controller.enqueue(encodeText(prefix))
       } else {
         controller.enqueue(chunk)
       }
@@ -1866,15 +1851,15 @@ function createPrefixStream(prefix: string): TransformStream<string, string> {
     flush(controller) {
       if (!prefixFlushed && prefix) {
         prefixFlushed = true
-        controller.enqueue(prefix)
+        controller.enqueue(encodeText(prefix))
       }
     },
   })
 }
 
 function createInlineDataStream(
-  dataStream: ReadableStream<string>
-): TransformStream<string, string> {
+  dataStream: ReadableStream<Uint8Array>
+): TransformStream<Uint8Array, Uint8Array> {
   let dataStreamFinished: Promise<void> | null = null
   return createTransformStream({
     transform(chunk, controller) {
@@ -1966,19 +1951,21 @@ function chainStreams<T>(streams: ReadableStream<T>[]): ReadableStream<T> {
   return readable
 }
 
-function streamFromArray(strings: string[]): ReadableStream<string> {
+function streamFromArray(strings: string[]): ReadableStream<Uint8Array> {
   // Note: we use a TransformStream here instead of instantiating a ReadableStream
   // because the built-in ReadableStream polyfill runs strings through TextEncoder.
   const { readable, writable } = new TransformStream()
 
   const writer = writable.getWriter()
-  strings.forEach((str) => writer.write(str))
+  strings.forEach((str) => writer.write(encodeText(str)))
   writer.close()
 
   return readable
 }
 
-async function streamToString(stream: ReadableStream<string>): Promise<string> {
+async function streamToString(
+  stream: ReadableStream<Uint8Array>
+): Promise<string> {
   const reader = stream.getReader()
   let bufferedString = ''
 
@@ -1989,6 +1976,6 @@ async function streamToString(stream: ReadableStream<string>): Promise<string> {
       return bufferedString
     }
 
-    bufferedString += value
+    bufferedString += decodeText(value)
   }
 }

From 57702cb2a9a9dba4b552e0007c16449cf36cfb44 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 28 Feb 2022 23:39:51 +0100
Subject: [PATCH 04/13] Only warn styles and scripts under next head in
 concurrent mode (#34897)

x-ref: #34021 , #34004

Only log each warning once and only trigger in concurrent mode


## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
---
 packages/next/client/image.tsx                | 12 +--
 packages/next/shared/lib/head.tsx             | 10 ++-
 packages/next/shared/lib/utils.ts             | 13 +++
 .../client-navigation/test/index.test.js      | 69 ----------------
 .../app}/pages/head-with-json-ld-snippet.js   |  0
 .../app/pages/head.js                         | 15 ++++
 .../test/index.test.js                        |  6 +-
 .../test/streaming.js                         | 82 ++++++++++++++++++-
 8 files changed, 119 insertions(+), 88 deletions(-)
 rename test/integration/{client-navigation => react-streaming-and-server-components/app}/pages/head-with-json-ld-snippet.js (100%)
 create mode 100644 test/integration/react-streaming-and-server-components/app/pages/head.js

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 03f5438f9361..6fad0b58d355 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -8,6 +8,7 @@ import {
 } from '../shared/lib/image-config'
 import { useIntersection } from './use-intersection'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
+import { warnOnce } from '../shared/lib/utils'
 
 const configEnv = process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete
 const loadedImageURLs = new Set<string>()
@@ -23,17 +24,6 @@ if (typeof window === 'undefined') {
   ;(global as any).__NEXT_IMAGE_IMPORTED = true
 }
 
-let warnOnce = (_: string) => {}
-if (process.env.NODE_ENV !== 'production') {
-  const warnings = new Set<string>()
-  warnOnce = (msg: string) => {
-    if (!warnings.has(msg)) {
-      console.warn(msg)
-    }
-    warnings.add(msg)
-  }
-}
-
 const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const
 type LoadingValue = typeof VALID_LOADING_VALUES[number]
 type ImageConfig = ImageConfigComplete & { allSizes: number[] }
diff --git a/packages/next/shared/lib/head.tsx b/packages/next/shared/lib/head.tsx
index 81d339e21a9f..d4bbcc64bed2 100644
--- a/packages/next/shared/lib/head.tsx
+++ b/packages/next/shared/lib/head.tsx
@@ -3,6 +3,7 @@ import Effect from './side-effect'
 import { AmpStateContext } from './amp-context'
 import { HeadManagerContext } from './head-manager-context'
 import { isInAmpMode } from './amp'
+import { warnOnce } from './utils'
 
 type WithInAmpMode = {
   inAmpMode?: boolean
@@ -161,17 +162,20 @@ function reduceComponents(
           return React.cloneElement(c, newProps)
         }
       }
-      if (process.env.NODE_ENV === 'development') {
+      if (
+        process.env.NODE_ENV === 'development' &&
+        process.env.__NEXT_CONCURRENT_FEATURES
+      ) {
         // omit JSON-LD structured data snippets from the warning
         if (c.type === 'script' && c.props['type'] !== 'application/ld+json') {
           const srcMessage = c.props['src']
             ? `<script> tag with src="${c.props['src']}"`
             : `inline <script>`
-          console.warn(
+          warnOnce(
             `Do not add <script> tags using next/head (see ${srcMessage}). Use next/script instead. \nSee more info here: https://nextjs.org/docs/messages/no-script-tags-in-head-component`
           )
         } else if (c.type === 'link' && c.props['rel'] === 'stylesheet') {
-          console.warn(
+          warnOnce(
             `Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="${c.props['href']}"). Use Document instead. \nSee more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component`
           )
         }
diff --git a/packages/next/shared/lib/utils.ts b/packages/next/shared/lib/utils.ts
index c5aa734135bf..3d21f021804e 100644
--- a/packages/next/shared/lib/utils.ts
+++ b/packages/next/shared/lib/utils.ts
@@ -369,6 +369,19 @@ export async function loadGetInitialProps<
   return props
 }
 
+let warnOnce = (_: string) => {}
+if (process.env.NODE_ENV !== 'production') {
+  const warnings = new Set<string>()
+  warnOnce = (msg: string) => {
+    if (!warnings.has(msg)) {
+      console.warn(msg)
+    }
+    warnings.add(msg)
+  }
+}
+
+export { warnOnce }
+
 export const SP = typeof performance !== 'undefined'
 export const ST =
   SP &&
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
index f89aeed941ee..2414ac400a1a 100644
--- a/test/integration/client-navigation/test/index.test.js
+++ b/test/integration/client-navigation/test/index.test.js
@@ -1430,75 +1430,6 @@ describe('Client Navigation', () => {
       }
     })
 
-    it('should warn when scripts are in head', async () => {
-      let browser
-      try {
-        browser = await webdriver(context.appPort, '/head')
-
-        await browser.waitForElementByCss('h1')
-        await waitFor(2000)
-        const browserLogs = await browser.log('browser')
-        let found = false
-        browserLogs.forEach((log) => {
-          console.log('log.message', log.message)
-          if (log.message.includes('Use next/script instead')) {
-            found = true
-          }
-        })
-        expect(found).toEqual(true)
-      } finally {
-        if (browser) {
-          await browser.close()
-        }
-      }
-    })
-
-    it('should not warn when application/ld+json scripts are in head', async () => {
-      let browser
-      try {
-        browser = await webdriver(context.appPort, '/head-with-json-ld-snippet')
-
-        await browser.waitForElementByCss('h1')
-        await waitFor(2000)
-        const browserLogs = await browser.log('browser')
-        let found = false
-        browserLogs.forEach((log) => {
-          console.log('log.message', log.message)
-          if (log.message.includes('Use next/script instead')) {
-            found = true
-          }
-        })
-        expect(found).toEqual(false)
-      } finally {
-        if (browser) {
-          await browser.close()
-        }
-      }
-    })
-
-    it('should warn when stylesheets are in head', async () => {
-      let browser
-      try {
-        browser = await webdriver(context.appPort, '/head')
-
-        await browser.waitForElementByCss('h1')
-        await waitFor(2000)
-        const browserLogs = await browser.log('browser')
-        let found = false
-        browserLogs.forEach((log) => {
-          console.log('log.message', log.message)
-          if (log.message.includes('Do not add stylesheets using next/head')) {
-            found = true
-          }
-        })
-        expect(found).toEqual(true)
-      } finally {
-        if (browser) {
-          await browser.close()
-        }
-      }
-    })
-
     it('should update head during client routing', async () => {
       let browser
       try {
diff --git a/test/integration/client-navigation/pages/head-with-json-ld-snippet.js b/test/integration/react-streaming-and-server-components/app/pages/head-with-json-ld-snippet.js
similarity index 100%
rename from test/integration/client-navigation/pages/head-with-json-ld-snippet.js
rename to test/integration/react-streaming-and-server-components/app/pages/head-with-json-ld-snippet.js
diff --git a/test/integration/react-streaming-and-server-components/app/pages/head.js b/test/integration/react-streaming-and-server-components/app/pages/head.js
new file mode 100644
index 000000000000..a9d762921a5c
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/pages/head.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import Head from 'next/head'
+
+export default () => (
+  <div>
+    <Head>
+      <link rel="stylesheet" href="style-a.css" key="my-style" />
+      <link rel="stylesheet" href="style-b.css" key="my-style" />
+
+      <script src="/test-async.js" async></script>
+      <script src="/test-defer.js" defer="yas"></script>
+    </Head>
+    <h1>Streaming Head</h1>
+  </div>
+)
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
index d93f233a1aab..527a17c87517 100644
--- a/test/integration/react-streaming-and-server-components/test/index.test.js
+++ b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -151,7 +151,7 @@ describe('Edge runtime - prod', () => {
   })
 
   basic(context, { env: 'prod' })
-  streaming(context)
+  streaming(context, { env: 'prod' })
   rsc(context, { runtime: 'edge', env: 'prod' })
 })
 
@@ -184,14 +184,14 @@ describe('Edge runtime - dev', () => {
   })
 
   basic(context, { env: 'dev' })
-  streaming(context)
+  streaming(context, { env: 'dev' })
   rsc(context, { runtime: 'edge', env: 'dev' })
 })
 
 const nodejsRuntimeBasicSuite = {
   runTests: (context, env) => {
     basic(context, { env })
-    streaming(context)
+    streaming(context, { env })
     rsc(context, { runtime: 'nodejs' })
 
     if (env === 'prod') {
diff --git a/test/integration/react-streaming-and-server-components/test/streaming.js b/test/integration/react-streaming-and-server-components/test/streaming.js
index 31b6e6259149..edfeccebdcd8 100644
--- a/test/integration/react-streaming-and-server-components/test/streaming.js
+++ b/test/integration/react-streaming-and-server-components/test/streaming.js
@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import webdriver from 'next-webdriver'
-import { fetchViaHTTP } from 'next-test-utils'
+import { fetchViaHTTP, waitFor } from 'next-test-utils'
 
 async function resolveStreamResponse(response, onData) {
   let result = ''
@@ -16,7 +16,7 @@ async function resolveStreamResponse(response, onData) {
   return result
 }
 
-export default function (context) {
+export default function (context, { env }) {
   it('should support streaming for fizz response', async () => {
     await fetchViaHTTP(context.appPort, '/streaming', null, {}).then(
       async (response) => {
@@ -99,4 +99,82 @@ export default function (context) {
       expect(result).toMatch(/<\/body><\/html>/)
     })
   })
+
+  if (env === 'dev') {
+    it('should warn when stylesheets or scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head')
+
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let foundStyles = false
+        let foundScripts = false
+        const logs = []
+        browserLogs.forEach(({ message }) => {
+          if (message.includes('Do not add stylesheets using next/head')) {
+            foundStyles = true
+            logs.push(message)
+          }
+          if (message.includes('Do not add <script> tags using next/head')) {
+            foundScripts = true
+            logs.push(message)
+          }
+        })
+
+        expect(foundStyles).toEqual(true)
+        expect(foundScripts).toEqual(true)
+
+        // Warnings are unique
+        expect(logs.length).toEqual(new Set(logs).size)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
+    it('should warn when scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head')
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let found = false
+        browserLogs.forEach((log) => {
+          if (log.message.includes('Use next/script instead')) {
+            found = true
+          }
+        })
+        expect(found).toEqual(true)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
+    it('should not warn when application/ld+json scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head-with-json-ld-snippet')
+        await browser.waitForElementByCss('h1')
+        await waitFor(1000)
+        const browserLogs = await browser.log('browser')
+        let found = false
+        browserLogs.forEach((log) => {
+          if (log.message.includes('Use next/script instead')) {
+            found = true
+          }
+        })
+        expect(found).toEqual(false)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+  }
 }

From 6b37d6c39e6752ab21a4417cace73f51a30e513c Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Tue, 1 Mar 2022 14:47:28 +0100
Subject: [PATCH 05/13] docs: update CMS examples to use the new tw grid gaps
 (#34917)

---
 examples/cms-agilitycms/components/hero-post.js    | 2 +-
 examples/cms-agilitycms/components/more-stories.js | 2 +-
 examples/cms-builder-io/components/hero-post.js    | 2 +-
 examples/cms-builder-io/components/more-stories.js | 2 +-
 examples/cms-buttercms/components/hero-post.js     | 2 +-
 examples/cms-buttercms/components/more-stories.js  | 2 +-
 examples/cms-contentful/components/hero-post.js    | 2 +-
 examples/cms-contentful/components/more-stories.js | 2 +-
 examples/cms-cosmic/components/hero-post.js        | 2 +-
 examples/cms-cosmic/components/more-stories.js     | 2 +-
 examples/cms-datocms/components/hero-post.js       | 2 +-
 examples/cms-datocms/components/more-stories.js    | 2 +-
 examples/cms-drupal/components/hero-post.js        | 2 +-
 examples/cms-ghost/components/hero-post.js         | 2 +-
 examples/cms-ghost/components/more-stories.js      | 2 +-
 examples/cms-graphcms/components/hero-post.js      | 2 +-
 examples/cms-kontent/components/hero-post.js       | 2 +-
 examples/cms-kontent/components/more-stories.js    | 2 +-
 examples/cms-prepr/components/hero-post.js         | 2 +-
 examples/cms-prismic/components/hero-post.js       | 2 +-
 examples/cms-prismic/components/more-stories.js    | 2 +-
 examples/cms-sanity/components/hero-post.js        | 2 +-
 examples/cms-sanity/components/more-stories.js     | 2 +-
 examples/cms-storyblok/components/hero-post.js     | 2 +-
 examples/cms-storyblok/components/more-stories.js  | 2 +-
 examples/cms-strapi/components/hero-post.js        | 2 +-
 examples/cms-strapi/components/more-stories.js     | 2 +-
 examples/cms-takeshape/components/hero-post.js     | 2 +-
 examples/cms-takeshape/components/more-stories.js  | 2 +-
 examples/cms-wordpress/components/hero-post.js     | 2 +-
 examples/cms-wordpress/components/more-stories.js  | 2 +-
 31 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/examples/cms-agilitycms/components/hero-post.js b/examples/cms-agilitycms/components/hero-post.js
index 141b7e641751..d6e8869ddc2b 100644
--- a/examples/cms-agilitycms/components/hero-post.js
+++ b/examples/cms-agilitycms/components/hero-post.js
@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-agilitycms/components/more-stories.js b/examples/cms-agilitycms/components/more-stories.js
index 12c3cbc50f93..a4e0fdf761af 100644
--- a/examples/cms-agilitycms/components/more-stories.js
+++ b/examples/cms-agilitycms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ title, posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         {title}
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-builder-io/components/hero-post.js b/examples/cms-builder-io/components/hero-post.js
index 680afd982901..0a7b8f68f7fb 100644
--- a/examples/cms-builder-io/components/hero-post.js
+++ b/examples/cms-builder-io/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-builder-io/components/more-stories.js b/examples/cms-builder-io/components/more-stories.js
index bcf78e019cd2..45714977feea 100644
--- a/examples/cms-builder-io/components/more-stories.js
+++ b/examples/cms-builder-io/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.data.slug}
diff --git a/examples/cms-buttercms/components/hero-post.js b/examples/cms-buttercms/components/hero-post.js
index a7a43667a016..f45ed8853b12 100644
--- a/examples/cms-buttercms/components/hero-post.js
+++ b/examples/cms-buttercms/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-buttercms/components/more-stories.js b/examples/cms-buttercms/components/more-stories.js
index 6f90f9b01c7a..b12d7771a65a 100644
--- a/examples/cms-buttercms/components/more-stories.js
+++ b/examples/cms-buttercms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-contentful/components/hero-post.js b/examples/cms-contentful/components/hero-post.js
index 5b71cfaf43b2..5a1551333ae4 100644
--- a/examples/cms-contentful/components/hero-post.js
+++ b/examples/cms-contentful/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage.url} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-contentful/components/more-stories.js b/examples/cms-contentful/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-contentful/components/more-stories.js
+++ b/examples/cms-contentful/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-cosmic/components/hero-post.js b/examples/cms-cosmic/components/hero-post.js
index 453b1816ee4e..e8f7823c2b03 100644
--- a/examples/cms-cosmic/components/hero-post.js
+++ b/examples/cms-cosmic/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-cosmic/components/more-stories.js b/examples/cms-cosmic/components/more-stories.js
index 2e25326c352d..35bb95e0ab66 100644
--- a/examples/cms-cosmic/components/more-stories.js
+++ b/examples/cms-cosmic/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-datocms/components/hero-post.js b/examples/cms-datocms/components/hero-post.js
index 133dc33e5869..0ca3e0cc4978 100644
--- a/examples/cms-datocms/components/hero-post.js
+++ b/examples/cms-datocms/components/hero-post.js
@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-datocms/components/more-stories.js b/examples/cms-datocms/components/more-stories.js
index 13a09bd8f729..4bab320f6537 100644
--- a/examples/cms-datocms/components/more-stories.js
+++ b/examples/cms-datocms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-drupal/components/hero-post.js b/examples/cms-drupal/components/hero-post.js
index c5aa6d0a7660..cf3e657a9def 100644
--- a/examples/cms-drupal/components/hero-post.js
+++ b/examples/cms-drupal/components/hero-post.js
@@ -18,7 +18,7 @@ export default function HeroPost({
           <CoverImage title={title} coverImage={coverImage} slug={slug} />
         )}
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={slug}>
diff --git a/examples/cms-ghost/components/hero-post.js b/examples/cms-ghost/components/hero-post.js
index 1d786d96d2be..6a91725afd64 100644
--- a/examples/cms-ghost/components/hero-post.js
+++ b/examples/cms-ghost/components/hero-post.js
@@ -22,7 +22,7 @@ export default function HeroPost({
           height={1216}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-ghost/components/more-stories.js b/examples/cms-ghost/components/more-stories.js
index 92eefcf51c36..07c12287d7cf 100644
--- a/examples/cms-ghost/components/more-stories.js
+++ b/examples/cms-ghost/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-graphcms/components/hero-post.js b/examples/cms-graphcms/components/hero-post.js
index 9f39ead6849e..776866d8dc76 100644
--- a/examples/cms-graphcms/components/hero-post.js
+++ b/examples/cms-graphcms/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage.url} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-kontent/components/hero-post.js b/examples/cms-kontent/components/hero-post.js
index 8536e825c5d5..76495802b579 100644
--- a/examples/cms-kontent/components/hero-post.js
+++ b/examples/cms-kontent/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} src={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-kontent/components/more-stories.js b/examples/cms-kontent/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-kontent/components/more-stories.js
+++ b/examples/cms-kontent/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js
index c2ff575ee26a..5fb5c6909be7 100644
--- a/examples/cms-prepr/components/hero-post.js
+++ b/examples/cms-prepr/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-prismic/components/hero-post.js b/examples/cms-prismic/components/hero-post.js
index 8d181d29dfa8..b594f5420020 100644
--- a/examples/cms-prismic/components/hero-post.js
+++ b/examples/cms-prismic/components/hero-post.js
@@ -21,7 +21,7 @@ export default function HeroPost({
           url={coverImage.url}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-prismic/components/more-stories.js b/examples/cms-prismic/components/more-stories.js
index cfe7b62e4150..2a29128c8117 100644
--- a/examples/cms-prismic/components/more-stories.js
+++ b/examples/cms-prismic/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map(({ node }) => (
           <PostPreview
             key={node._meta.uid}
diff --git a/examples/cms-sanity/components/hero-post.js b/examples/cms-sanity/components/hero-post.js
index f198fb3f54d7..4d81ed0850ac 100644
--- a/examples/cms-sanity/components/hero-post.js
+++ b/examples/cms-sanity/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} image={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-sanity/components/more-stories.js b/examples/cms-sanity/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-sanity/components/more-stories.js
+++ b/examples/cms-sanity/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-storyblok/components/hero-post.js b/examples/cms-storyblok/components/hero-post.js
index 2cab6b993289..eadefeaac135 100644
--- a/examples/cms-storyblok/components/hero-post.js
+++ b/examples/cms-storyblok/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-storyblok/components/more-stories.js b/examples/cms-storyblok/components/more-stories.js
index 2ea20c3f6b25..583c01eda265 100644
--- a/examples/cms-storyblok/components/more-stories.js
+++ b/examples/cms-storyblok/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-strapi/components/hero-post.js b/examples/cms-strapi/components/hero-post.js
index a246a0847317..910933b96169 100644
--- a/examples/cms-strapi/components/hero-post.js
+++ b/examples/cms-strapi/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-strapi/components/more-stories.js b/examples/cms-strapi/components/more-stories.js
index 13a09bd8f729..4bab320f6537 100644
--- a/examples/cms-strapi/components/more-stories.js
+++ b/examples/cms-strapi/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-takeshape/components/hero-post.js b/examples/cms-takeshape/components/hero-post.js
index 209d62c118fc..70d417ef5792 100644
--- a/examples/cms-takeshape/components/hero-post.js
+++ b/examples/cms-takeshape/components/hero-post.js
@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} coverImage={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-takeshape/components/more-stories.js b/examples/cms-takeshape/components/more-stories.js
index dcdd9b4e6ae7..57fdbb6c4659 100644
--- a/examples/cms-takeshape/components/more-stories.js
+++ b/examples/cms-takeshape/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}
diff --git a/examples/cms-wordpress/components/hero-post.js b/examples/cms-wordpress/components/hero-post.js
index 302ff1e74e1b..46d376e81ad6 100644
--- a/examples/cms-wordpress/components/hero-post.js
+++ b/examples/cms-wordpress/components/hero-post.js
@@ -18,7 +18,7 @@ export default function HeroPost({
           <CoverImage title={title} coverImage={coverImage} slug={slug} />
         )}
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>
diff --git a/examples/cms-wordpress/components/more-stories.js b/examples/cms-wordpress/components/more-stories.js
index d77cd124e75c..e35af77cbf8d 100644
--- a/examples/cms-wordpress/components/more-stories.js
+++ b/examples/cms-wordpress/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map(({ node }) => (
           <PostPreview
             key={node.slug}

From 0816b775b8deecc5783af68b60611d8499c224af Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Tue, 1 Mar 2022 11:38:51 -0500
Subject: [PATCH 06/13] Fix image optimization invalid internal upstream image
 (#34899)

This gracefully handles errors when the `url` query string param looks like an internal image because it starts with `/` but it is not pointing to an internal image.

Previously, this was printing an unnecessary stack trace when the upstream content-type was undefined.

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
---
 packages/next/server/image-optimizer.ts          | 16 ++++++++++++----
 test/integration/image-optimizer/test/util.js    | 11 +++++++++++
 .../middleware-typescript/test/index.test.ts     |  2 +-
 yarn.lock                                        |  7 +------
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
index 747d07ce5d4e..976bd8c29fd6 100644
--- a/packages/next/server/image-optimizer.ts
+++ b/packages/next/server/image-optimizer.ts
@@ -546,10 +546,18 @@ export async function imageOptimizer(
       throw new ImageError(500, 'Unable to optimize buffer')
     }
   } catch (error) {
-    return {
-      buffer: upstreamBuffer,
-      contentType: upstreamType!,
-      maxAge,
+    if (upstreamBuffer && upstreamType) {
+      // If we fail to optimize, fallback to the original image
+      return {
+        buffer: upstreamBuffer,
+        contentType: upstreamType,
+        maxAge: nextConfig.images.minimumCacheTTL,
+      }
+    } else {
+      throw new ImageError(
+        500,
+        'Unable to optimize image and unable to fallback to upstream image'
+      )
     }
   }
 }
diff --git a/test/integration/image-optimizer/test/util.js b/test/integration/image-optimizer/test/util.js
index 290e108ea335..570f4bd2fff3 100644
--- a/test/integration/image-optimizer/test/util.js
+++ b/test/integration/image-optimizer/test/util.js
@@ -691,6 +691,17 @@ export function runTests(ctx) {
     expect(await res.text()).toBe(`"url" parameter is invalid`)
   })
 
+  it('should fail when internal url is not an image', async () => {
+    const url = `//<h1>not-an-image</h1>`
+    const query = { url, w: ctx.w, q: 39 }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+    expect(res.status).toBe(500)
+    expect(await res.text()).toBe(
+      `Unable to optimize image and unable to fallback to upstream image`
+    )
+  })
+
   if (ctx.domains.includes('localhost')) {
     it('should fail when url fails to load an image', async () => {
       const url = `http://localhost:${ctx.appPort}/not-an-image`
diff --git a/test/production/middleware-typescript/test/index.test.ts b/test/production/middleware-typescript/test/index.test.ts
index dd04154749ac..031cdc00e9a4 100644
--- a/test/production/middleware-typescript/test/index.test.ts
+++ b/test/production/middleware-typescript/test/index.test.ts
@@ -18,7 +18,7 @@ describe('should set-up next', () => {
         'next.config.js': new FileRef(join(appDir, 'next.config.js')),
       },
       dependencies: {
-        typescript: 'latest',
+        typescript: '4.4.3',
         '@types/node': 'latest',
         '@types/react': 'latest',
         '@types/react-dom': 'latest',
diff --git a/yarn.lock b/yarn.lock
index dc7a69096c03..809d3a4e7732 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4855,7 +4855,7 @@
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
 
-"@types/eslint-scope@^3.7.0", "@types/eslint-scope@^3.7.3":
+"@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
   integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
@@ -4880,11 +4880,6 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
-"@types/estree@^0.0.50":
-  version "0.0.50"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
-  integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
-
 "@types/estree@^0.0.51":
   version "0.0.51"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"

From 721dc7bccd0bcdd6f8d6600b0dc30192822a0f3d Mon Sep 17 00:00:00 2001
From: Sigurd Spieckermann <2206639+sisp@users.noreply.github.com>
Date: Tue, 1 Mar 2022 17:48:08 +0100
Subject: [PATCH 07/13] Add missing closing parenthesis in docs (#34924)

A closing parenthesis was missing in the docs about static HTML export.
---
 docs/advanced-features/static-html-export.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/advanced-features/static-html-export.md b/docs/advanced-features/static-html-export.md
index 6408adf0b7c6..a2a7a7f2b80a 100644
--- a/docs/advanced-features/static-html-export.md
+++ b/docs/advanced-features/static-html-export.md
@@ -27,7 +27,7 @@ Update your build script in `package.json` to use `next export`:
 
 Running `npm run build` will generate an `out` directory.
 
-`next export` builds an HTML version of your app. During `next build`, [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) and [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md) will generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md). Then, `next export` will copy the already exported files into the correct directory. `getInitialProps` will generate the HTML files during `next export` instead of `next build`.
+`next export` builds an HTML version of your app. During `next build`, [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) and [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md) will generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md)). Then, `next export` will copy the already exported files into the correct directory. `getInitialProps` will generate the HTML files during `next export` instead of `next build`.
 
 For more advanced scenarios, you can define a parameter called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) in your [`next.config.js`](/docs/api-reference/next.config.js/introduction.md) file to configure exactly which pages will be generated.
 

From 6814852ffa3346a0ca0b8d944465e13da494c06b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= <kdy1997.dev@gmail.com>
Date: Wed, 2 Mar 2022 02:41:31 +0900
Subject: [PATCH 08/13] feat(next-swc): Update swc (#34878)

* Update swc

* lockfile

* Update more swc crates

* Update minifier

* chore: update types

* style: fix

* Update deps

Co-authored-by: evilebottnawi <sheo13666q@gmail.com>
---
 packages/next-swc/Cargo.lock                  | 339 +++++++++++-------
 packages/next-swc/crates/core/Cargo.toml      |  16 +-
 .../core/src/styled_jsx/transform_css.rs      |  89 +++--
 .../crates/core/tests/full/example/output.js  |  48 +--
 packages/next-swc/crates/napi/Cargo.toml      |   8 +-
 packages/next-swc/crates/wasm/Cargo.toml      |   6 +-
 6 files changed, 315 insertions(+), 191 deletions(-)

diff --git a/packages/next-swc/Cargo.lock b/packages/next-swc/Cargo.lock
index dd6333b29e4f..641a90fb2680 100644
--- a/packages/next-swc/Cargo.lock
+++ b/packages/next-swc/Cargo.lock
@@ -145,6 +145,15 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "904dfeac50f3cdaba28fc6f57fdcddb75f49ed61346676a78c4ffe55877802fd"
 
+[[package]]
+name = "better_scoped_tls"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b73e8ecdec39e98aa3b19e8cd0b8ed8f77ccb86a6b0b2dc7cd86d105438a2123"
+dependencies = [
+ "scoped-tls",
+]
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -162,9 +171,9 @@ dependencies = [
 
 [[package]]
 name = "browserslist-rs"
-version = "0.7.0"
+version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38854056e7d44ad7af1214b7de30ceb71fff036ed67f3d1b48cc1200bb722cba"
+checksum = "67bf6eb040d26861376afa30a5b172f066bfda9cef992af7a55ac5395ef91437"
 dependencies = [
  "ahash",
  "anyhow",
@@ -660,9 +669,9 @@ checksum = "8521a1b57e76b1ec69af7599e75e38e7b7fad6610f037db8c79b127201b5d119"
 
 [[package]]
 name = "lock_api"
-version = "0.4.5"
+version = "0.4.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "712a4d093c9976e24e7dbca41db895dabcbac38eb5f4045393d17a95bdfb1109"
+checksum = "88943dd7ef4a2e5a4bfa2753aaab3013e34ce2533d1996fb18ef591e315e2b3b"
 dependencies = [
  "scopeguard",
 ]
@@ -812,7 +821,7 @@ dependencies = [
  "swc_css",
  "swc_ecma_loader",
  "swc_ecma_transforms_testing",
- "swc_ecmascript 0.114.2",
+ "swc_ecmascript",
  "swc_node_base",
  "swc_stylis",
  "testing",
@@ -839,7 +848,7 @@ dependencies = [
  "swc_bundler",
  "swc_common",
  "swc_ecma_loader",
- "swc_ecmascript 0.114.2",
+ "swc_ecmascript",
  "swc_node_base",
 ]
 
@@ -944,23 +953,24 @@ dependencies = [
 ]
 
 [[package]]
-name = "owning_ref"
-version = "0.4.1"
+name = "parking_lot"
+version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ff55baddef9e4ad00f88b6c743a2a8062d4c6ade126c2a528644b8e444d52ce"
+checksum = "6d7744ac029df22dca6284efe4e898991d28e3085c706c972bcd7da4a27a15eb"
 dependencies = [
- "stable_deref_trait",
+ "instant",
+ "lock_api",
+ "parking_lot_core 0.8.0",
 ]
 
 [[package]]
 name = "parking_lot"
-version = "0.11.1"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d7744ac029df22dca6284efe4e898991d28e3085c706c972bcd7da4a27a15eb"
+checksum = "87f5ec2493a61ac0506c0f4199f99070cbe83857b0337006a30f3e6719b8ef58"
 dependencies = [
- "instant",
  "lock_api",
- "parking_lot_core",
+ "parking_lot_core 0.9.1",
 ]
 
 [[package]]
@@ -978,6 +988,19 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "parking_lot_core"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28141e0cc4143da2443301914478dc976a61ffdb3f043058310c70df2fed8954"
+dependencies = [
+ "cfg-if 1.0.0",
+ "libc",
+ "redox_syscall 0.2.10",
+ "smallvec",
+ "windows-sys",
+]
+
 [[package]]
 name = "path-clean"
 version = "0.1.0"
@@ -1013,7 +1036,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3dfb61232e34fcb633f43d12c58f83c1df82962dcdfa565a4e866ffc17dafe12"
 dependencies = [
  "phf_macros",
- "phf_shared",
+ "phf_shared 0.8.0",
  "proc-macro-hack",
 ]
 
@@ -1023,7 +1046,7 @@ version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "17367f0cc86f2d25802b2c26ee58a7b23faeccf78a396094c13dced0d0182526"
 dependencies = [
- "phf_shared",
+ "phf_shared 0.8.0",
  "rand 0.7.3",
 ]
 
@@ -1034,7 +1057,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f6fde18ff429ffc8fe78e2bf7f8b7a5a5a6e2a8b58bc5a9ac69198bbda9189c"
 dependencies = [
  "phf_generator",
- "phf_shared",
+ "phf_shared 0.8.0",
  "proc-macro-hack",
  "proc-macro2",
  "quote",
@@ -1050,6 +1073,15 @@ dependencies = [
  "siphasher",
 ]
 
+[[package]]
+name = "phf_shared"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6796ad771acdc0123d2a88dc428b5e38ef24456743ddb1744ed628f9815c096"
+dependencies = [
+ "siphasher",
+]
+
 [[package]]
 name = "pin-project-lite"
 version = "0.2.7"
@@ -1079,6 +1111,23 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
 
+[[package]]
+name = "preset_env_base"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e072088b8b97a4ed729b40444fbb5cc6a7c1bc9b9c455a601d4de7f981a4987"
+dependencies = [
+ "ahash",
+ "anyhow",
+ "browserslist-rs",
+ "dashmap",
+ "from_variant",
+ "once_cell",
+ "semver 1.0.4",
+ "serde",
+ "st-map",
+]
+
 [[package]]
 name = "pretty_assertions"
 version = "0.7.2"
@@ -1508,12 +1557,6 @@ dependencies = [
  "static-map-macro",
 ]
 
-[[package]]
-name = "stable_deref_trait"
-version = "1.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8f112729512f8e442d81f95a8a7ddf2b7c6b8a1a6f509a95864142b30cab2d3"
-
 [[package]]
 name = "static-map-macro"
 version = "0.2.1"
@@ -1534,14 +1577,14 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 
 [[package]]
 name = "string_cache"
-version = "0.8.2"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "923f0f39b6267d37d23ce71ae7235602134b250ace715dd2c90421998ddac0c6"
+checksum = "33994d0838dc2d152d17a62adf608a869b5e846b65b389af7f3dbc1de45c5b26"
 dependencies = [
  "lazy_static",
  "new_debug_unreachable",
- "parking_lot",
- "phf_shared",
+ "parking_lot 0.11.1",
+ "phf_shared 0.10.0",
  "precomputed-hash",
  "serde",
 ]
@@ -1553,7 +1596,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f24c8e5e19d22a726626f1a5e16fe15b132dcf21d10177fa5a45ce7962996b97"
 dependencies = [
  "phf_generator",
- "phf_shared",
+ "phf_shared 0.8.0",
  "proc-macro2",
  "quote",
 ]
@@ -1579,9 +1622,9 @@ checksum = "6446ced80d6c486436db5c078dde11a9f73d42b57fb273121e160b84f63d894c"
 
 [[package]]
 name = "styled_components"
-version = "0.14.0"
+version = "0.17.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa4ab2ebb6f1bb84fb7b8b2fc16ebed9bbb7933a8f2f5d443c080f096a45b94d"
+checksum = "5e824357a52655bd0977b40a11072669ed9e9c16eff78d6eaf54cc7d822d2585"
 dependencies = [
  "Inflector",
  "once_cell",
@@ -1589,15 +1632,15 @@ dependencies = [
  "serde",
  "swc_atoms",
  "swc_common",
- "swc_ecmascript 0.112.6",
+ "swc_ecmascript",
  "tracing",
 ]
 
 [[package]]
 name = "swc"
-version = "0.126.2"
+version = "0.138.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1c2373a6f6dddd42719a2d8fcd9989849915ae15691fd1a75f6b04d14a6cab91"
+checksum = "170a6c528c1b2052c7bdc388b12b6dd82bc51535c10f25298a46577e7183965b"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1628,7 +1671,7 @@ dependencies = [
  "swc_ecma_transforms_optimization",
  "swc_ecma_utils",
  "swc_ecma_visit",
- "swc_ecmascript 0.114.2",
+ "swc_ecmascript",
  "swc_node_comments",
  "swc_visit",
  "tracing",
@@ -1646,9 +1689,9 @@ dependencies = [
 
 [[package]]
 name = "swc_bundler"
-version = "0.107.0"
+version = "0.114.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5b6761f9b57072658a42ff25304a7edc7f8444024726ed27d5861e4644c1ffe"
+checksum = "7072dba1e14f946f10cb5127f4e8afb8875f5c8a6a29ab6029ffb884342d3684"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1657,7 +1700,7 @@ dependencies = [
  "indexmap",
  "is-macro",
  "once_cell",
- "parking_lot",
+ "parking_lot 0.12.0",
  "petgraph",
  "radix_fmt",
  "rayon",
@@ -1680,23 +1723,22 @@ dependencies = [
 
 [[package]]
 name = "swc_common"
-version = "0.17.3"
+version = "0.17.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "80c35c61c23c33ef41fc779abc3fbd87fd83ee41eb6ced7ba4dd38a87e394986"
+checksum = "ffd694004c48af55237f1e471ccefdb76f88da8d8ac4726612ea11c525d02425"
 dependencies = [
  "ahash",
  "ast_node",
  "atty",
+ "better_scoped_tls",
  "cfg-if 0.1.10",
  "debug_unreachable",
  "either",
  "from_variant",
  "num-bigint",
  "once_cell",
- "owning_ref",
- "parking_lot",
+ "parking_lot 0.12.0",
  "rustc-hash",
- "scoped-tls",
  "serde",
  "siphasher",
  "sourcemap",
@@ -1711,9 +1753,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css"
-version = "0.87.0"
+version = "0.94.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9b4b570606b904949dcb186af2f32ee57a7731002d3cb72e21183edef0c1f2dc"
+checksum = "55d52d595da541b1626e3c9f89441607042cda81d2047dbdc7bec44449b73925"
 dependencies = [
  "swc_css_ast",
  "swc_css_codegen",
@@ -1724,9 +1766,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_ast"
-version = "0.79.0"
+version = "0.86.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "00c07118ba87a4139be7d78bff15ba33438195f2eb35376157a5ca2e60cc54c4"
+checksum = "2c933063972e7d8d810e893935b10f66b3be1eb9f33685ecb2416cf80e337759"
 dependencies = [
  "is-macro",
  "serde",
@@ -1737,9 +1779,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_codegen"
-version = "0.84.0"
+version = "0.91.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8d192566df252168bc1d0a206f0e783e30816a2c75c43ddd04b7ddd703b9d396"
+checksum = "59995589f6579069f2aadb1b73b38d53c9d2798e4c6379dc3e8245954ad5cb9e"
 dependencies = [
  "auto_impl",
  "bitflags",
@@ -1764,9 +1806,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_parser"
-version = "0.85.2"
+version = "0.92.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2550222e793736aa09d9361b43a04ca8b9467588bb73cf02ba827484c1243a4"
+checksum = "a918661b5fe9192f2608ee6b7aca44c80026b1e08c6058dd9fb6df0eb587a69b"
 dependencies = [
  "bitflags",
  "lexical",
@@ -1777,9 +1819,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_utils"
-version = "0.76.0"
+version = "0.83.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ddab011e673ffd3b3d6dea612d113714caaeab1ec1673adb70b62f5a5727bbe"
+checksum = "8b33f951f0bb3f5c4310030cf5ad03ada3fff541010dada65436d00be86e07c1"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1789,9 +1831,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_visit"
-version = "0.78.0"
+version = "0.85.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f9489996952eb66ba087c15258c41e34f4a5466e87db90df4e54557f4f47751c"
+checksum = "1be861b1f6ceab4f68a3e770910605b2ff0c7aafae7f078bdaa503c8302e6ce3"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1801,9 +1843,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_ast"
-version = "0.65.3"
+version = "0.68.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff1aefdc512c8dfefa1de793c0e62a192bd74a7fa7e5affe3f08885751c127ee"
+checksum = "d465460177dcdf076f7c32b75cc0adede3c70506b4c7a859440001310e78e71f"
 dependencies = [
  "is-macro",
  "num-bigint",
@@ -1816,9 +1858,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_codegen"
-version = "0.90.0"
+version = "0.93.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7cf4da57030370c49c343e536d3c7ab66dca3bd8da000b6040884fc6ac689241"
+checksum = "aa81be3ef5a662291f5b387681d497b8c73fabb846459fb3a84097cfe7e127c3"
 dependencies = [
  "bitflags",
  "memchr",
@@ -1829,7 +1871,6 @@ dependencies = [
  "swc_common",
  "swc_ecma_ast",
  "swc_ecma_codegen_macros",
- "swc_ecma_parser",
  "tracing",
 ]
 
@@ -1848,9 +1889,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_ext_transforms"
-version = "0.51.0"
+version = "0.55.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f93651c5d1e3783914a789f6f7c26bdf72fa4ff08ac802d64ba304c2e40f5671"
+checksum = "0ed2bbd721290b19b26ece0e7f536dce4375c3cd5f5722b838ec1c985b432916"
 dependencies = [
  "phf",
  "swc_atoms",
@@ -1862,14 +1903,14 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_lints"
-version = "0.14.8"
+version = "0.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9dc7e7d669e28b2df325d9a232f1d74e7b77d2606c04f0f70cc37e38dcf49ad3"
+checksum = "d097f0e4f44ea808b6533ddc2983573030e4e267a503e78f7ab64290ff8a52ab"
 dependencies = [
  "ahash",
  "auto_impl",
  "dashmap",
- "parking_lot",
+ "parking_lot 0.12.0",
  "rayon",
  "regex",
  "serde",
@@ -1902,9 +1943,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_minifier"
-version = "0.74.1"
+version = "0.81.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "184e0e6337f2a4cfff36e3456e7937846dadf0b47833b7f711654e4acd0a13aa"
+checksum = "c7f6648dc44b95432c4253f03bce4c1a5c73a7a8adefe9be11c78c048d925dc0"
 dependencies = [
  "ahash",
  "indexmap",
@@ -1931,9 +1972,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_parser"
-version = "0.88.3"
+version = "0.91.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bfd30c93f08afdf29226b5695e45aadcc6ce452470cc63ea87a7eb53d29bb02b"
+checksum = "58b099ab64a9e667ffcacbbf043710eabccd910f5664a82c997b4a1ff8bc9ed6"
 dependencies = [
  "either",
  "enum_kind",
@@ -1951,16 +1992,16 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_preset_env"
-version = "0.90.0"
+version = "0.98.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5335f575d5cd4fcefe8bb3c52fa8dc8d59d461f07da43fb2ac6c31689aa88e0f"
+checksum = "16954dd8ff0ad4ef4046a8aee5a31122413242d520efef38bea3c13f350e9a54"
 dependencies = [
  "ahash",
  "anyhow",
- "browserslist-rs",
  "dashmap",
  "indexmap",
  "once_cell",
+ "preset_env_base",
  "semver 1.0.4",
  "serde",
  "serde_json",
@@ -1972,19 +2013,17 @@ dependencies = [
  "swc_ecma_transforms",
  "swc_ecma_utils",
  "swc_ecma_visit",
- "walkdir",
 ]
 
 [[package]]
 name = "swc_ecma_transforms"
-version = "0.117.0"
+version = "0.124.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1fa132c1a736c2c61736958f1102249348a4cc911c7f60e3a6255aa49c1c03e"
+checksum = "e56c345bb62ac1494ef2d97eabe08ec0d0fc2ec46e029bdb4cb714c34fd15cc8"
 dependencies = [
  "swc_atoms",
  "swc_common",
  "swc_ecma_ast",
- "swc_ecma_parser",
  "swc_ecma_transforms_base",
  "swc_ecma_transforms_compat",
  "swc_ecma_transforms_module",
@@ -1999,14 +2038,14 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_base"
-version = "0.58.2"
+version = "0.63.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e79e4c87b02ff0e227963000e90dff59e4ad75bf0c66bf886ba8dba7ec36f5b0"
+checksum = "49cfcab3966f8dc8c82604a50ccf54541dcc4101bff72ff70bbd6e73a37a1af7"
 dependencies = [
+ "better_scoped_tls",
  "once_cell",
  "phf",
  "rayon",
- "scoped-tls",
  "serde",
  "smallvec",
  "swc_atoms",
@@ -2020,9 +2059,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_classes"
-version = "0.46.0"
+version = "0.51.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac8983235c6902879b65dcb1003d4084adf094408c96d94d62d3f33f44c3fa8e"
+checksum = "d15131c3944964e290102ddc180251f01b1264e8873f5565fb3f3c097962f800"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2034,9 +2073,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_compat"
-version = "0.70.0"
+version = "0.75.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ff9a64fc99b205b6104a6996832b0006fc059f5aa9fe61d5fb2c3b9f1885b14"
+checksum = "4b1939156171fe03940e5918efb8b3058d6ef06bae23990d361233951b8f8db3"
 dependencies = [
  "ahash",
  "arrayvec 0.7.2",
@@ -2054,6 +2093,7 @@ dependencies = [
  "swc_ecma_transforms_macros",
  "swc_ecma_utils",
  "swc_ecma_visit",
+ "swc_trace_macro",
  "tracing",
 ]
 
@@ -2072,9 +2112,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_module"
-version = "0.78.0"
+version = "0.84.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "441616e68981062a1650a923d2c63075021a8178045e2112007a90a157cdb1da"
+checksum = "da2c5960939be80ad54842bdb42b205d3cf17fd3c2955c693a6fd7f678e70ef3"
 dependencies = [
  "Inflector",
  "ahash",
@@ -2094,9 +2134,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_optimization"
-version = "0.87.0"
+version = "0.94.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e074149dd5e969d35a790851b47b0f76700b14fcfda1c05e15751c1458e2dd38"
+checksum = "4103b2ba1f24dd7ff735d2fa33d86be5eefad4316d046e09509c11dba4f9bb5f"
 dependencies = [
  "ahash",
  "dashmap",
@@ -2117,9 +2157,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_proposal"
-version = "0.77.0"
+version = "0.82.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "048ac8ea82e02fa9a54b9aa448dc5d15a8e994304364fcd8c4e2f650572c9141"
+checksum = "41bca77e95bdebfd9df234e707416bd57015808371010f5f1527314df86fc1e7"
 dependencies = [
  "either",
  "serde",
@@ -2127,7 +2167,6 @@ dependencies = [
  "swc_atoms",
  "swc_common",
  "swc_ecma_ast",
- "swc_ecma_parser",
  "swc_ecma_transforms_base",
  "swc_ecma_transforms_classes",
  "swc_ecma_transforms_macros",
@@ -2137,9 +2176,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_react"
-version = "0.80.0"
+version = "0.86.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fb5b7c98597bf41d1503ca4039be5445fd02e7aa381ae520d1c78a8a370f7f5"
+checksum = "fb79114c706cad8b83bee288cdfd55156558c74075059bc58558ab84275c3ba1"
 dependencies = [
  "ahash",
  "base64 0.13.0",
@@ -2162,9 +2201,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_testing"
-version = "0.60.0"
+version = "0.65.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c24615dee8b5b818dab31d4e172d3a297cc07b99ee65194133035c83f4fb8da6"
+checksum = "6d3bf6537f7fac515dd1bb9f718b3af2c2413aad315704bdbb8b8ebd11b8a0a2"
 dependencies = [
  "ansi_term",
  "anyhow",
@@ -2185,15 +2224,14 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_typescript"
-version = "0.82.0"
+version = "0.89.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f7859a18a33f751d488fbc1b7a0073fb08c69d794ad1f8daa2da47bfda2d9242"
+checksum = "5e5d6a8cd797383193a8138615a3f78de5da910fdd9b3f3543f02bcced603008"
 dependencies = [
  "serde",
  "swc_atoms",
  "swc_common",
  "swc_ecma_ast",
- "swc_ecma_parser",
  "swc_ecma_transforms_base",
  "swc_ecma_transforms_react",
  "swc_ecma_utils",
@@ -2202,9 +2240,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_utils"
-version = "0.65.3"
+version = "0.69.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b462ac7dd5340544e7a12965bb7fbbbf9db8b26c1b32159b43c4b2430fed3fc8"
+checksum = "3b289ad92ab2c2b5c55c7b2a8e3395b68b42a8145186549191786af5d44998d3"
 dependencies = [
  "indexmap",
  "once_cell",
@@ -2218,9 +2256,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_visit"
-version = "0.51.1"
+version = "0.54.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32aa4c53401d1390aa45043e0a69d52e1a04ef45845e19b55c484462e6dcd048"
+checksum = "768c7cb86162cb2538a188586909b5499740da73b2eb80b258210cf147652c84"
 dependencies = [
  "num-bigint",
  "swc_atoms",
@@ -2232,21 +2270,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecmascript"
-version = "0.112.6"
+version = "0.123.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ce38cf2c41ed841d82dbfb1c328379a3ec75d4e4e43900ea8c8ef3c51a44e3cb"
-dependencies = [
- "swc_ecma_ast",
- "swc_ecma_parser",
- "swc_ecma_utils",
- "swc_ecma_visit",
-]
-
-[[package]]
-name = "swc_ecmascript"
-version = "0.114.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e752c12b209c65e203a952186ab2fcefa8021a17a8a393b7d5f410e1fe1a0e87"
+checksum = "643e8b16370a73258bfb162a1b1bf27888b4ed65d05c3962083fed7cae26bf6d"
 dependencies = [
  "swc_ecma_ast",
  "swc_ecma_codegen",
@@ -2328,9 +2354,9 @@ dependencies = [
 
 [[package]]
 name = "swc_stylis"
-version = "0.83.0"
+version = "0.90.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07fe7e1fea389c2a95bb8a8a46937d9f10aa573def79ca270e56a43d432822d9"
+checksum = "b453e3b964b9aaa96b81ff04c2a38ae64d2b1c55bd0a88b3f9fc478f6a61a1fe"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2348,6 +2374,17 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "swc_trace_macro"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85341fb96c46bd873272553b8b1d4330f886fe5231969cc1564e1c659fee8334"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "swc_visit"
 version = "0.3.0"
@@ -2408,9 +2445,9 @@ dependencies = [
 
 [[package]]
 name = "testing"
-version = "0.18.0"
+version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c77495bc9f7737f9a958ec3cf2fba2f0c2296867018c8b4da6ce01d008b93e5e"
+checksum = "27fb20163feffc42ee490fc7ef113b187ab09fa4e632e2cec649bce76cd40662"
 dependencies = [
  "ansi_term",
  "difference",
@@ -2496,9 +2533,9 @@ checksum = "cda74da7e1a664f795bb1f8a87ec406fb89a02522cf6e50620d016add6dbbf5c"
 
 [[package]]
 name = "tracing"
-version = "0.1.29"
+version = "0.1.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "375a639232caf30edfc78e8d89b2d4c375515393e7af7e16f01cd96917fb2105"
+checksum = "f6c650a8ef0cd2dd93736f033d21cbd1224c5a967aa0c258d00fcf7dafef9b9f"
 dependencies = [
  "cfg-if 1.0.0",
  "pin-project-lite",
@@ -2508,9 +2545,9 @@ dependencies = [
 
 [[package]]
 name = "tracing-attributes"
-version = "0.1.18"
+version = "0.1.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f4f480b8f81512e825f337ad51e94c1eb5d3bbdf2b363dcd01e2b19a9ffe3f8e"
+checksum = "8276d9a4a3a558d7b7ad5303ad50b53d58264641b82914b7ada36bd762e7a716"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2519,11 +2556,12 @@ dependencies = [
 
 [[package]]
 name = "tracing-core"
-version = "0.1.21"
+version = "0.1.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1f4ed65637b8390770814083d20756f87bfa2c21bf2f110babdc5438351746e4"
+checksum = "03cfcb51380632a72d3111cb8d3447a8d908e577d31beeac006f836383d29a23"
 dependencies = [
  "lazy_static",
+ "valuable",
 ]
 
 [[package]]
@@ -2615,6 +2653,12 @@ dependencies = [
  "percent-encoding",
 ]
 
+[[package]]
+name = "valuable"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d"
+
 [[package]]
 name = "version_check"
 version = "0.9.3"
@@ -2658,13 +2702,13 @@ dependencies = [
  "console_error_panic_hook",
  "next-swc",
  "once_cell",
- "parking_lot_core",
+ "parking_lot_core 0.8.0",
  "path-clean",
  "serde",
  "serde_json",
  "swc",
  "swc_common",
- "swc_ecmascript 0.114.2",
+ "swc_ecmascript",
  "tracing",
  "wasm-bindgen",
  "wasm-bindgen-futures",
@@ -2778,3 +2822,46 @@ name = "winapi-x86_64-pc-windows-gnu"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
+
+[[package]]
+name = "windows-sys"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3df6e476185f92a12c072be4a189a0210dcdcf512a1891d6dff9edb874deadc6"
+dependencies = [
+ "windows_aarch64_msvc",
+ "windows_i686_gnu",
+ "windows_i686_msvc",
+ "windows_x86_64_gnu",
+ "windows_x86_64_msvc",
+]
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d8e92753b1c443191654ec532f14c199742964a061be25d77d7a96f09db20bf5"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a711c68811799e017b6038e0922cb27a5e2f43a2ddb609fe0b6f3eeda9de615"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "146c11bb1a02615db74680b32a68e2d61f553cc24c4eb5b4ca10311740e44172"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c912b12f7454c6620635bbff3450962753834be2a594819bd5e945af18ec64bc"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "504a2476202769977a040c6364301a3f65d0cc9e3fb08600b2bda150a0488316"
diff --git a/packages/next-swc/crates/core/Cargo.toml b/packages/next-swc/crates/core/Cargo.toml
index 063a0129010a..85feabefe145 100644
--- a/packages/next-swc/crates/core/Cargo.toml
+++ b/packages/next-swc/crates/core/Cargo.toml
@@ -15,19 +15,19 @@ fxhash = "0.2.1"
 pathdiff = "0.2.0"
 serde = "1"
 serde_json = "1"
-styled_components = "0.14.0"
-swc = "0.126.2"
+styled_components = "0.17.0"
+swc = "0.138.0"
 swc_atoms = "0.2.7"
-swc_common = { version = "0.17.0", features = ["concurrent", "sourcemap"] }
-swc_css = "0.87.0"
+swc_common = { version = "0.17.9", features = ["concurrent", "sourcemap"] }
+swc_css = "0.94.0"
 swc_ecma_loader = { version = "0.28.0", features = ["node", "lru"] }
-swc_ecmascript = { version = "0.114.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_ecmascript = { version = "0.123.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
-swc_stylis = "0.83.0"
+swc_stylis = "0.90.0"
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 regex = "1.5"
 
 [dev-dependencies]
-swc_ecma_transforms_testing = "0.60.0"
-testing = "0.18.0"
+swc_ecma_transforms_testing = "0.65.0"
+testing = "0.18.1"
 walkdir = "2.3.2"
diff --git a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
index 32e9850857e7..0d79a1187bc2 100644
--- a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
+++ b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
@@ -2,8 +2,8 @@ use easy_error::{bail, Error};
 use std::panic;
 use std::sync::Arc;
 use swc_common::util::take::Take;
-use swc_common::SourceMap;
 use swc_common::{source_map::Pos, BytePos, Span, SyntaxContext, DUMMY_SP};
+use swc_common::{SourceMap, Spanned};
 use swc_css::ast::*;
 use swc_css::codegen::{
     writer::basic::{BasicCssWriter, BasicCssWriterConfig},
@@ -183,16 +183,12 @@ impl VisitMut for Namespacer {
 
                     combinator = None;
                 }
-                ComplexSelectorChildren::Combinator(v) => match v.value {
-                    CombinatorValue::Descendant => {}
-                    _ => {
-                        combinator = Some(v.clone());
-
-                        new_selectors.push(sel);
-                    }
-                },
+                ComplexSelectorChildren::Combinator(v) => {
+                    combinator = Some(v.clone());
+                }
             };
         }
+
         node.children = new_selectors;
     }
 }
@@ -204,8 +200,6 @@ impl Namespacer {
         mut node: CompoundSelector,
     ) -> Result<Vec<ComplexSelectorChildren>, Error> {
         let mut pseudo_index = None;
-
-        let empty_tokens = vec![];
         let mut arg_tokens;
 
         for (i, selector) in node.subclass_selectors.iter().enumerate() {
@@ -215,8 +209,22 @@ impl Namespacer {
                         .iter()
                         .flatten()
                         .flat_map(|v| match v {
-                            PseudoSelectorChildren::Nth(v) => nth_to_tokens(v).tokens,
-                            PseudoSelectorChildren::PreservedToken(v) => vec![v.clone()],
+                            PseudoClassSelectorChildren::PreservedToken(v) => vec![v.clone()],
+                            PseudoClassSelectorChildren::AnPlusB(an_plus_b) => match an_plus_b {
+                                AnPlusB::Ident(v) => to_tokens(v).tokens,
+                                AnPlusB::AnPlusBNotation(v) => to_tokens(v).tokens,
+                            },
+                            PseudoClassSelectorChildren::Ident(v) => to_tokens(v).tokens,
+                            PseudoClassSelectorChildren::Str(v) => to_tokens(v).tokens,
+                            PseudoClassSelectorChildren::Delimiter(v) => to_tokens(v).tokens,
+                            PseudoClassSelectorChildren::SelectorList(v) => to_tokens(v).tokens,
+                            PseudoClassSelectorChildren::CompoundSelectorList(v) => {
+                                to_tokens(v).tokens
+                            }
+                            PseudoClassSelectorChildren::RelativeSelectorList(v) => {
+                                to_tokens(v).tokens
+                            }
+                            PseudoClassSelectorChildren::CompoundSelector(v) => to_tokens(v).tokens,
                         })
                         .collect::<Vec<_>>();
 
@@ -224,10 +232,21 @@ impl Namespacer {
                 }
                 SubclassSelector::PseudoElement(PseudoElementSelector {
                     name, children, ..
-                }) => match children {
-                    Some(children) => (name, children),
-                    None => (name, &empty_tokens),
-                },
+                }) => {
+                    arg_tokens = children
+                        .iter()
+                        .flatten()
+                        .flat_map(|v| match v {
+                            PseudoElementSelectorChildren::PreservedToken(v) => vec![v.clone()],
+                            PseudoElementSelectorChildren::Ident(v) => to_tokens(v).tokens,
+                            PseudoElementSelectorChildren::CompoundSelector(v) => {
+                                to_tokens(v).tokens
+                            }
+                        })
+                        .collect::<Vec<_>>();
+
+                    (name, &arg_tokens)
+                }
                 _ => continue,
             };
 
@@ -282,12 +301,16 @@ impl Namespacer {
                         trace!("Combinator: {:?}", combinator);
                         trace!("v[0]: {:?}", v[0]);
 
+                        let mut result = vec![];
+
                         if let Some(combinator) = combinator {
                             match v.get(0) {
-                                Some(ComplexSelectorChildren::Combinator(..)) => {}
-                                Some(..) => {}
+                                // `Descendant` combinator can't be the first because we removed it
+                                // above
+                                Some(ComplexSelectorChildren::Combinator(..))
+                                    if combinator.value == CombinatorValue::Descendant => {}
                                 _ => {
-                                    v.push(ComplexSelectorChildren::Combinator(combinator));
+                                    result.push(ComplexSelectorChildren::Combinator(combinator));
                                 }
                             }
                         }
@@ -301,7 +324,9 @@ impl Namespacer {
                             }
                         });
 
-                        Ok(v)
+                        result.extend(v);
+
+                        Ok(result)
                     }
                     Err(_) => bail!("Failed to transform one off global selector"),
                 };
@@ -332,7 +357,15 @@ impl Namespacer {
             );
         }
 
-        Ok(vec![ComplexSelectorChildren::CompoundSelector(node)])
+        let mut result = vec![];
+
+        if let Some(combinator) = combinator {
+            result.push(ComplexSelectorChildren::Combinator(combinator));
+        }
+
+        result.push(ComplexSelectorChildren::CompoundSelector(node));
+
+        Ok(result)
     }
 }
 
@@ -461,17 +494,21 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
     ]
 }
 
-fn nth_to_tokens(nth: &Nth) -> Tokens {
+fn to_tokens<N: Spanned>(node: &N) -> Tokens
+where
+    for<'aa> CodeGenerator<&'aa mut BasicCssWriter<'aa, &'aa mut std::string::String>>: Emit<N>,
+{
     let mut s = String::new();
     {
         let mut wr = BasicCssWriter::new(&mut s, BasicCssWriterConfig { indent: "  " });
         let mut gen = CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
 
-        gen.emit(&nth).unwrap();
+        gen.emit(node).unwrap();
     }
 
+    let span = node.span();
     let mut lexer = swc_css::parser::lexer::Lexer::new(
-        StringInput::new(&s, nth.span.lo, nth.span.hi),
+        StringInput::new(&s, span.lo, span.hi),
         ParserConfig {
             allow_wrong_line_comments: true,
         },
@@ -484,7 +521,7 @@ fn nth_to_tokens(nth: &Nth) -> Tokens {
     }
 
     Tokens {
-        span: Span::new(nth.span.lo, nth.span.hi, Default::default()),
+        span: Span::new(span.lo, span.hi, Default::default()),
         tokens,
     }
 }
diff --git a/packages/next-swc/crates/core/tests/full/example/output.js b/packages/next-swc/crates/core/tests/full/example/output.js
index e0a9c88dd80f..3311dd93d841 100644
--- a/packages/next-swc/crates/core/tests/full/example/output.js
+++ b/packages/next-swc/crates/core/tests/full/example/output.js
@@ -1,40 +1,40 @@
-function a(a, b) {
-    (null == b || b > a.length) && (b = a.length);
-    for(var c = 0, d = new Array(b); c < b; c++)d[c] = a[c];
+function b(c, a) {
+    (null == a || a > c.length) && (a = c.length);
+    for(var b = 0, d = new Array(a); b < a; b++)d[b] = c[b];
     return d;
 }
-import b from "other";
-(function(a, c) {
-    return (function(a) {
-        if (Array.isArray(a)) return a;
-    })(a) || (function(a, c) {
-        var d, e, f = null == a ? null : "undefined" != typeof Symbol && a[Symbol.iterator] || a["@@iterator"];
-        if (null != f) {
-            var g = [], h = !0, i = !1;
+import a from "other";
+(function(c, b) {
+    return (function(c) {
+        if (Array.isArray(c)) return c;
+    })(c) || (function(c, b) {
+        var g, h, a = null == c ? null : "undefined" != typeof Symbol && c[Symbol.iterator] || c["@@iterator"];
+        if (null != a) {
+            var d = [], e = !0, i = !1;
             try {
-                for(f = f.call(a); !(h = (d = f.next()).done) && (g.push(d.value), !c || g.length !== c); h = !0);
+                for(a = a.call(c); !(e = (g = a.next()).done) && (d.push(g.value), !b || d.length !== b); e = !0);
             } catch (j) {
-                i = !0, e = j;
+                i = !0, h = j;
             } finally{
                 try {
-                    h || null == f.return || f.return();
+                    e || null == a.return || a.return();
                 } finally{
-                    if (i) throw e;
+                    if (i) throw h;
                 }
             }
-            return g;
+            return d;
         }
-    })(a, c) || (function(b, c) {
-        if (b) {
-            if ("string" == typeof b) return a(b, c);
-            var d = Object.prototype.toString.call(b).slice(8, -1);
-            if ("Object" === d && b.constructor && (d = b.constructor.name), "Map" === d || "Set" === d) return Array.from(d);
-            if ("Arguments" === d || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(d)) return a(b, c);
+    })(c, b) || (function(a, d) {
+        if (a) {
+            if ("string" == typeof a) return b(a, d);
+            var c = Object.prototype.toString.call(a).slice(8, -1);
+            if ("Object" === c && a.constructor && (c = a.constructor.name), "Map" === c || "Set" === c) return Array.from(c);
+            if ("Arguments" === c || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)) return b(a, d);
         }
-    })(a, c) || (function() {
+    })(c, b) || (function() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     })();
-})(b, 1)[0];
+})(a, 1)[0];
 var c = function() {
     "use strict";
     !function(a, b) {
diff --git a/packages/next-swc/crates/napi/Cargo.toml b/packages/next-swc/crates/napi/Cargo.toml
index 493424eb23bf..ebd06062e1d9 100644
--- a/packages/next-swc/crates/napi/Cargo.toml
+++ b/packages/next-swc/crates/napi/Cargo.toml
@@ -16,12 +16,12 @@ once_cell = "1.8.0"
 serde = "1"
 serde_json = "1"
 next-swc = { version = "0.0.0", path = "../core" }
-swc = "0.126.2"
+swc = "0.138.0"
 swc_atoms = "0.2.7"
-swc_bundler = { version = "0.107.0", features = ["concurrent"] }
-swc_common = { version = "0.17.0", features = ["concurrent", "sourcemap"] }
+swc_bundler = { version = "0.114.0", features = ["concurrent"] }
+swc_common = { version = "0.17.9", features = ["concurrent", "sourcemap"] }
 swc_ecma_loader = { version = "0.28.0", features = ["node", "lru"] }
-swc_ecmascript = { version = "0.114.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_ecmascript = { version = "0.123.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
 
 [build-dependencies]
diff --git a/packages/next-swc/crates/wasm/Cargo.toml b/packages/next-swc/crates/wasm/Cargo.toml
index b25e21bcbe0e..a69fa56fa20d 100644
--- a/packages/next-swc/crates/wasm/Cargo.toml
+++ b/packages/next-swc/crates/wasm/Cargo.toml
@@ -16,9 +16,9 @@ path-clean = "0.1"
 serde = {version = "1", features = ["derive"]}
 serde_json = "1"
 next-swc = { version = "0.0.0", path = "../core" }
-swc = "0.126.2"
-swc_common = { version = "0.17.0", features = ["concurrent", "sourcemap"] }
-swc_ecmascript = { version = "0.114.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc = "0.138.0"
+swc_common = { version = "0.17.9", features = ["concurrent", "sourcemap"] }
+swc_ecmascript = { version = "0.123.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 wasm-bindgen = {version = "0.2", features = ["serde-serialize"]}
 wasm-bindgen-futures = "0.4.8"

From abed2f7334fb3c5f4bc25545d3cfcc9bc081ccfe Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 1 Mar 2022 09:56:23 -0800
Subject: [PATCH 09/13] v12.1.1-canary.5

---
 lerna.json                                   |  2 +-
 packages/create-next-app/package.json        |  2 +-
 packages/eslint-config-next/package.json     |  4 ++--
 packages/eslint-plugin-next/package.json     |  2 +-
 packages/next-bundle-analyzer/package.json   |  2 +-
 packages/next-codemod/package.json           |  2 +-
 packages/next-env/package.json               |  2 +-
 packages/next-mdx/package.json               |  2 +-
 packages/next-plugin-storybook/package.json  |  2 +-
 packages/next-polyfill-module/package.json   |  2 +-
 packages/next-polyfill-nomodule/package.json |  2 +-
 packages/next-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index 0f2278e3372b..d224916ef887 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.4"
+  "version": "12.1.1-canary.5"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 8313966e0ace..7ffad735cc9e 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index a4db20baa864..589f52722a88 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "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.1-canary.4",
+    "@next/eslint-plugin-next": "12.1.1-canary.5",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.0.0",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 8f081810ceb3..47256cabb29a 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 87c0bf1c4f10..6a975844ab8d 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 3bac5f3f413a..ceae408a30d1 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 31f66a710754..92dc50567123 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 0925c553c27e..c69f99934be5 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index fb422576de68..aece9666c651 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 320629c8257b..73a9803939fd 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "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",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 1850361299cc..092cd4374bc8 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 4daa06fb1bee..081ef4729455 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index f3f8ebd40354..dc59420eb07c 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1-canary.4",
+    "@next/env": "12.1.1-canary.5",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.0",
@@ -117,11 +117,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1-canary.4",
-    "@next/polyfill-nomodule": "12.1.1-canary.4",
-    "@next/react-dev-overlay": "12.1.1-canary.4",
-    "@next/react-refresh-utils": "12.1.1-canary.4",
-    "@next/swc": "12.1.1-canary.4",
+    "@next/polyfill-module": "12.1.1-canary.5",
+    "@next/polyfill-nomodule": "12.1.1-canary.5",
+    "@next/react-dev-overlay": "12.1.1-canary.5",
+    "@next/react-refresh-utils": "12.1.1-canary.5",
+    "@next/swc": "12.1.1-canary.5",
     "@peculiar/webcrypto": "1.1.7",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 4c13fd10dcbf..b0fdc25a23f3 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 0d4622df894d..a31c9d56f5f0 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.1.1-canary.4",
+  "version": "12.1.1-canary.5",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 7c1a51a94f5e00a5e044aa4647b9e552a5ae3e0b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 1 Mar 2022 19:27:59 +0100
Subject: [PATCH 10/13] Refactor next-flight-server-loader (#34902)

---
 .../loaders/next-flight-server-loader.ts      | 53 +++++++++----------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
index 2555a72795bc..1beb921a9d07 100644
--- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -5,14 +5,20 @@ import { parse } from '../../swc'
 import { getBaseSWCOptions } from '../../swc/options'
 import { getRawPageExtensions } from '../../utils'
 
-const getIsClientComponent =
+const createClientComponentFilter =
   (pageExtensions: string[]) => (importSource: string) => {
-    return new RegExp(`\\.client(\\.(${pageExtensions.join('|')}))?`).test(
-      importSource
+    const hasClientExtension = new RegExp(
+      `\\.client(\\.(${pageExtensions.join('|')}))?`
+    ).test(importSource)
+    // Special cases for Next.js APIs that are considered as client components:
+    return (
+      hasClientExtension ||
+      isNextComponent(importSource) ||
+      isImageImport(importSource)
     )
   }
 
-const getIsServerComponent =
+const createServerComponentFilter =
   (pageExtensions: string[]) => (importSource: string) => {
     return new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?`).test(
       importSource
@@ -25,7 +31,7 @@ function isNextComponent(importSource: string) {
   )
 }
 
-export function isImageImport(importSource: string) {
+function isImageImport(importSource: string) {
   // TODO: share extension with next/image
   // TODO: add other static assets, jpeg -> jpg
   return ['jpg', 'jpeg', 'png', 'webp', 'avif'].some((imageExt) =>
@@ -57,7 +63,6 @@ async function parseImportsInfo({
   })
   const ast = await parse(source, { ...opts.jsc.parser, isModule: true })
   const { body } = ast
-  const beginPos = ast.span.start
   let transformedSource = ''
   let lastIndex = 0
   let defaultExportName
@@ -74,16 +79,18 @@ async function parseImportsInfo({
 
           const importDeclarations = source.substring(
             lastIndex,
-            node.source.span.start - beginPos
+            node.source.span.start
           )
 
-          if (
-            !(
-              isClientComponent(importSource) ||
-              isNextComponent(importSource) ||
-              isImageImport(importSource)
-            )
-          ) {
+          if (isClientComponent(importSource)) {
+            // A client component. It should be loaded as module reference.
+            transformedSource += importDeclarations
+            transformedSource += JSON.stringify(`${importSource}?__sc_client__`)
+            imports.push(`require(${JSON.stringify(importSource)})`)
+          } else {
+            // This is a special case to avoid the Duplicate React error.
+            // Since we already include React in the SSR runtime,
+            // here we can't create a new module with the ?__rsc_server__ query.
             if (
               ['react/jsx-runtime', 'react/jsx-dev-runtime'].includes(
                 importSource
@@ -96,11 +103,6 @@ async function parseImportsInfo({
             // component.
             transformedSource += importDeclarations
             transformedSource += JSON.stringify(`${importSource}?__sc_server__`)
-          } else {
-            // A client component. It should be loaded as module reference.
-            transformedSource += importDeclarations
-            transformedSource += JSON.stringify(`${importSource}?__sc_client__`)
-            imports.push(`require(${JSON.stringify(importSource)})`)
           }
         } else {
           // For the client compilation, we skip all modules imports but
@@ -108,12 +110,7 @@ async function parseImportsInfo({
           // have to be imported from either server or client components.
           if (
             !(
-              isClientComponent(importSource) ||
-              isServerComponent(importSource) ||
-              // Special cases for Next.js APIs that are considered as client
-              // components:
-              isNextComponent(importSource) ||
-              isImageImport(importSource)
+              isClientComponent(importSource) || isServerComponent(importSource)
             )
           ) {
             continue
@@ -122,7 +119,7 @@ async function parseImportsInfo({
           imports.push(`require(${JSON.stringify(importSource)})`)
         }
 
-        lastIndex = node.source.span.end - beginPos
+        lastIndex = node.source.span.end
         break
       }
       case 'ExportDefaultDeclaration': {
@@ -170,8 +167,8 @@ export default async function transformSource(
   }
 
   const rawRawPageExtensions = getRawPageExtensions(pageExtensions)
-  const isServerComponent = getIsServerComponent(rawRawPageExtensions)
-  const isClientComponent = getIsClientComponent(rawRawPageExtensions)
+  const isServerComponent = createServerComponentFilter(rawRawPageExtensions)
+  const isClientComponent = createClientComponentFilter(rawRawPageExtensions)
 
   if (!isClientCompilation) {
     // We only apply the loader to server components, or shared components that

From b6b5250c4620b6f76bd82029cb89b4cac27fe486 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 1 Mar 2022 12:53:25 -0800
Subject: [PATCH 11/13] Ensure non-matching API routes can be rewritten
 (#33966)

This ensures non-matching API routes can be rewritten with i18n configured as currently we bail and render the 404 page when a locale prefixed API route is requested.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1643930049224689)
closes: https://github.com/vercel/next.js/issues/28921
---
 packages/next/server/base-server.ts     |  3 --
 packages/next/server/router.ts          | 12 +++++
 test/e2e/i18n-api-support/index.test.ts | 71 +++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 test/e2e/i18n-api-support/index.test.ts

diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index 9a6e81bf2590..6a4d6d2dc175 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -560,9 +560,6 @@ export default abstract class Server {
       if (url.locale?.path.detectedLocale) {
         req.url = formatUrl(url)
         addRequestMeta(req, '__nextStrippedLocale', true)
-        if (url.pathname === '/api' || url.pathname.startsWith('/api/')) {
-          return this.render404(req, res, parsedUrl)
-        }
       }
 
       if (!this.minimalMode || !parsedUrl.query.__nextLocale) {
diff --git a/packages/next/server/router.ts b/packages/next/server/router.ts
index 1c618e7616a3..b101f838544e 100644
--- a/packages/next/server/router.ts
+++ b/packages/next/server/router.ts
@@ -317,8 +317,20 @@ export default class Router {
         currentPathnameNoBasePath,
         this.locales
       )
+
       const activeBasePath = keepBasePath ? this.basePath : ''
 
+      // don't match API routes when they are locale prefixed
+      // e.g. /api/hello shouldn't match /en/api/hello as a page
+      // rewrites/redirects can match though
+      if (
+        !isCustomRoute &&
+        localePathResult.detectedLocale &&
+        localePathResult.pathname.match(/^\/api(?:\/|$)/)
+      ) {
+        continue
+      }
+
       if (keepLocale) {
         if (
           !testRoute.internal &&
diff --git a/test/e2e/i18n-api-support/index.test.ts b/test/e2e/i18n-api-support/index.test.ts
new file mode 100644
index 000000000000..fa763d74d231
--- /dev/null
+++ b/test/e2e/i18n-api-support/index.test.ts
@@ -0,0 +1,71 @@
+import { createNext } from 'e2e-utils'
+import { fetchViaHTTP } from 'next-test-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('i18n API support', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/api/hello.js': `
+          export default function handler(req, res) { 
+            res.end('hello world')
+          } 
+        `,
+        'pages/api/blog/[slug].js': `
+          export default function handler(req, res) {
+            res.end('blog/[slug]')
+          }
+        `,
+      },
+      nextConfig: {
+        i18n: {
+          locales: ['en', 'fr'],
+          defaultLocale: 'en',
+        },
+        async rewrites() {
+          return {
+            beforeFiles: [],
+            afterFiles: [],
+            fallback: [
+              {
+                source: '/api/:path*',
+                destination: 'https://example.vercel.sh/',
+              },
+            ],
+          }
+        },
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should respond to normal API request', async () => {
+    const res = await fetchViaHTTP(next.url, '/api/hello')
+    expect(res.status).toBe(200)
+    expect(await res.text()).toBe('hello world')
+  })
+
+  it('should respond to normal dynamic API request', async () => {
+    const res = await fetchViaHTTP(next.url, '/api/blog/first')
+    expect(res.status).toBe(200)
+    expect(await res.text()).toBe('blog/[slug]')
+  })
+
+  it('should fallback rewrite non-matching API request', async () => {
+    const paths = [
+      '/fr/api/hello',
+      '/en/api/blog/first',
+      '/en/api/non-existent',
+      '/api/non-existent',
+    ]
+
+    for (const path of paths) {
+      const res = await fetchViaHTTP(next.url, path)
+      expect(res.status).toBe(200)
+      expect(await res.text()).toContain('Example Domain')
+    }
+  })
+})

From 9c0c93eb162cec0a5dacb355e5ff70794f3f9f46 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Wed, 2 Mar 2022 00:28:34 +0100
Subject: [PATCH 12/13] Optimize component type filters (#34941)

Since we are applying this loader to more files, and these two simple RegExp filters will be executed ~70 times per entry, it's an easy optimization to move the RegExp creation outside and merge related testers into the RegExp.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 .../loaders/next-flight-server-loader.ts      | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
index 1beb921a9d07..fdaf07b21277 100644
--- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -5,38 +5,27 @@ import { parse } from '../../swc'
 import { getBaseSWCOptions } from '../../swc/options'
 import { getRawPageExtensions } from '../../utils'
 
-const createClientComponentFilter =
-  (pageExtensions: string[]) => (importSource: string) => {
-    const hasClientExtension = new RegExp(
-      `\\.client(\\.(${pageExtensions.join('|')}))?`
-    ).test(importSource)
-    // Special cases for Next.js APIs that are considered as client components:
-    return (
-      hasClientExtension ||
-      isNextComponent(importSource) ||
-      isImageImport(importSource)
-    )
-  }
-
-const createServerComponentFilter =
-  (pageExtensions: string[]) => (importSource: string) => {
-    return new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?`).test(
-      importSource
-    )
-  }
-
-function isNextComponent(importSource: string) {
-  return (
-    importSource.includes('next/link') || importSource.includes('next/image')
+const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
+
+const createClientComponentFilter = (pageExtensions: string[]) => {
+  // Special cases for Next.js APIs that are considered as client components:
+  // - .client.[ext]
+  // - next/link, next/image
+  // - .[imageExt]
+  const regex = new RegExp(
+    '(' +
+      `\\.client(\\.(${pageExtensions.join('|')}))?|` +
+      `next/link|next/image|` +
+      `\\.(${imageExtensions.join('|')})` +
+      ')$'
   )
+
+  return (importSource: string) => regex.test(importSource)
 }
 
-function isImageImport(importSource: string) {
-  // TODO: share extension with next/image
-  // TODO: add other static assets, jpeg -> jpg
-  return ['jpg', 'jpeg', 'png', 'webp', 'avif'].some((imageExt) =>
-    importSource.endsWith('.' + imageExt)
-  )
+const createServerComponentFilter = (pageExtensions: string[]) => {
+  const regex = new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?$`)
+  return (importSource: string) => regex.test(importSource)
 }
 
 async function parseImportsInfo({

From 21c07ebf9e46d65cf442630ead677d2481b481af Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Wed, 2 Mar 2022 00:42:00 +0100
Subject: [PATCH 13/13] docs: update cms-sanity example (#34898)

Upgrades `next-sanity` to the latest version and applies breaking changes.
Improves the docs for the Sanity example.

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`



Co-authored-by: even westvang <172952+evenwestvang@users.noreply.github.com>
---
 examples/cms-sanity/README.md                 | 37 +++++++++++++++++--
 examples/cms-sanity/components/cover-image.js | 16 +++++---
 examples/cms-sanity/components/post-body.js   |  6 +--
 examples/cms-sanity/lib/sanity.js             |  6 +--
 examples/cms-sanity/package.json              |  9 +++--
 5 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md
index 7dfcb0a530ea..e7b5d268d7f9 100644
--- a/examples/cms-sanity/README.md
+++ b/examples/cms-sanity/README.md
@@ -2,6 +2,11 @@
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Sanity](https://www.sanity.io/) as the data source.
 
+You'll get:
+
+- Sanity Studio running on localhost
+- Sub-second as-you-type previews in Next.js
+
 ## Demo
 
 ### [https://next-blog-sanity.vercel.app/](https://next-blog-sanity.vercel.app/)
@@ -85,11 +90,30 @@ SANITY_API_TOKEN=...
 SANITY_PREVIEW_SECRET=...
 ```
 
-### Step 5. Prepare project for previewing
+### Step 5. Prepare the project for previewing
+
+5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`.
+
+5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit).
+
+5.3. Open your studio's sanity.json, and add the following entry to the parts-array:
 
-Go to https://www.sanity.io/docs/preview-content-on-site and follow the three steps on that page. It should be done inside the studio project generated in Step 2.
+```diff
+{
+  "plugins": [
+    "@sanity/production-preview"
+  ],
+  "parts": [
+    //...
++   {
++     "implements": "part:@sanity/production-preview/resolve-production-url",
++     "path": "./resolveProductionUrl.js"
++   }
+  ]
+}
+```
 
-When you get to the second step about creating a file called `resolveProductionUrl.js`, copy the following instead:
+Now, go back to `resolveProductionUrl.js` and add a function that will receive the full document that was selected for previewing:
 
 ```js
 const previewSecret = 'MY_SECRET' // Copy the string you used for SANITY_PREVIEW_SECRET
@@ -100,6 +124,8 @@ export default function resolveProductionUrl(document) {
 }
 ```
 
+For more information on live previewing check the [full guide.](https://www.sanity.io/guides/nextjs-live-preview)
+
 ### Step 6. Copy the schema file
 
 After initializing your Sanity studio project there should be a `schemas` folder.
@@ -168,3 +194,8 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
 Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&project-name=cms-sanity&repository-name=cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+
+#### Next steps
+
+- Invalidate your routes in production [on-demand](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with GROQ powered webhooks
+- Mount your preview inside the Sanity Studio for comfortable side-by-side editing
diff --git a/examples/cms-sanity/components/cover-image.js b/examples/cms-sanity/components/cover-image.js
index 60bf2e8847a3..818e8eef5e47 100644
--- a/examples/cms-sanity/components/cover-image.js
+++ b/examples/cms-sanity/components/cover-image.js
@@ -5,15 +5,19 @@ import { urlForImage } from '../lib/sanity'
 
 export default function CoverImage({ title, slug, image: source }) {
   const image = source ? (
-    <Image
-      width={2000}
-      height={1000}
-      alt={`Cover Image for ${title}`}
-      src={urlForImage(source).height(1000).width(2000).url()}
+    <div
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
-    />
+    >
+      <Image
+        layout="responsive"
+        width={2000}
+        height={1000}
+        alt={`Cover Image for ${title}`}
+        src={urlForImage(source).height(1000).width(2000).url()}
+      />
+    </div>
   ) : (
     <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
   )
diff --git a/examples/cms-sanity/components/post-body.js b/examples/cms-sanity/components/post-body.js
index 98a958318f08..2e0cb68a48dc 100644
--- a/examples/cms-sanity/components/post-body.js
+++ b/examples/cms-sanity/components/post-body.js
@@ -1,10 +1,10 @@
 import markdownStyles from './markdown-styles.module.css'
-import BlockContent from '@sanity/block-content-to-react'
+import { PortableText } from '@portabletext/react'
 
 export default function PostBody({ content }) {
   return (
-    <div className="max-w-2xl mx-auto">
-      <BlockContent blocks={content} className={markdownStyles.markdown} />
+    <div className={`max-w-2xl mx-auto ${markdownStyles.markdown}`}>
+      <PortableText value={content} />
     </div>
   )
 }
diff --git a/examples/cms-sanity/lib/sanity.js b/examples/cms-sanity/lib/sanity.js
index 76cedf4cb57d..1936305c132c 100644
--- a/examples/cms-sanity/lib/sanity.js
+++ b/examples/cms-sanity/lib/sanity.js
@@ -1,7 +1,5 @@
-import {
-  createImageUrlBuilder,
-  createPreviewSubscriptionHook,
-} from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'
+import { createPreviewSubscriptionHook } from 'next-sanity'
 import { sanityConfig } from './config'
 
 export const imageBuilder = createImageUrlBuilder(sanityConfig)
diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json
index 494c94ac75ff..8b576f61ae8c 100644
--- a/examples/cms-sanity/package.json
+++ b/examples/cms-sanity/package.json
@@ -6,17 +6,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sanity/block-content-to-react": "2.0.7",
+    "@portabletext/react": "^1.0.3",
+    "@sanity/image-url": "^1.0.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "next": "latest",
-    "next-sanity": "0.3.0",
+    "next-sanity": "0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "postcss": "8.4.7",
+    "tailwindcss": "^3.0.23"
   }
 }