From f0a883c37c6d1fe485989a104dd9fea45fc9b115 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Aug 2022 01:56:42 +0200
Subject: [PATCH 1/5] Remove precopied styled-jsx

---
 packages/next/build/babel/preset.ts         |  4 ++--
 packages/next/build/webpack-config.ts       |  4 ++--
 packages/next/build/webpack/require-hook.ts |  4 ++--
 packages/next/server/render.tsx             |  2 +-
 packages/next/taskfile.js                   | 12 +-----------
 packages/next/types/misc.d.ts               |  4 ----
 pnpm-lock.yaml                              |  1 +
 7 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index a0fb85846dab..5ea2a647a5e9 100644
--- a/packages/next/build/babel/preset.ts
+++ b/packages/next/build/babel/preset.ts
@@ -185,8 +185,8 @@ export default (
       ],
       [
         isTest && options['styled-jsx'] && options['styled-jsx']['babel-test']
-          ? require('next/dist/styled-jsx/babel-test')
-          : require('next/dist/styled-jsx/babel'),
+          ? require('styled-jsx/babel-test')
+          : require('styled-jsx/babel'),
         styledJsxOptions(options['styled-jsx']),
       ],
       require('./plugins/amp-attributes'),
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 964b61f3587a..c099e19b68ff 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -686,8 +686,8 @@ export default async function getBaseWebpackConfig(
       'react-dom/server$': `${reactDomDir}/server`,
       'react-dom/server.browser$': `${reactDomDir}/server.browser`,
       'react-dom/client$': `${reactDomDir}/client`,
-      'styled-jsx/style$': require.resolve(`next/dist/styled-jsx/style`),
-      'styled-jsx$': require.resolve(`next/dist/styled-jsx`),
+      'styled-jsx/style$': require.resolve(`styled-jsx/style`),
+      'styled-jsx$': require.resolve(`styled-jsx`),
 
       ...customAppAliases,
       ...customErrorAlias,
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 74c2aa128de3..0c0d6890f78b 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -7,8 +7,8 @@ export default function loadRequireHook(aliases: [string, string][] = []) {
     [
       ...aliases,
       // Use `require.resolve` explicitly to make them statically analyzable
-      ['styled-jsx', require.resolve('next/dist/styled-jsx')],
-      ['styled-jsx/style', require.resolve('next/dist/styled-jsx/style')],
+      ['styled-jsx', require.resolve('styled-jsx')],
+      ['styled-jsx/style', require.resolve('styled-jsx/style')],
     ].map(([request, replacement]) => [request, replacement])
   )
 
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 093db7c9fa88..b26ebdd435f9 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -28,7 +28,7 @@ import type { UnwrapPromise } from '../lib/coalesced-function'
 import type { ReactReadableStream } from './node-web-streams-helper'
 
 import React from 'react'
-import { StyleRegistry, createStyleRegistry } from 'next/dist/styled-jsx'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
   GSSP_COMPONENT_MEMBER_ERROR,
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 88dde0b576a2..005637e4f018 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -44,14 +44,11 @@ export async function copy_regenerator_runtime(task, opts) {
 
 // eslint-disable-next-line camelcase
 export async function copy_styled_jsx_assets(task, opts) {
-  // we copy the styled-jsx assets and types so that we can reference them
+  // we copy the styled-jsx types so that we can reference them
   // in the next-env.d.ts file so it doesn't matter if the styled-jsx
   // package is hoisted out of Next.js' node_modules or not
   const styledJsxPath = dirname(require.resolve('styled-jsx/package.json'))
   const typeFiles = glob.sync('*.d.ts', { cwd: styledJsxPath })
-  const jsFiles = glob.sync('**/{index,style,babel,babel-test}.js', {
-    cwd: styledJsxPath,
-  })
   const outputDir = join(__dirname, 'dist/styled-jsx')
   // Separate type files into different folders to avoid conflicts between
   // dev dep `styled-jsx` and `next/dist/styled-jsx` for duplicated declare modules
@@ -62,13 +59,6 @@ export async function copy_styled_jsx_assets(task, opts) {
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
     await fs.writeFile(join(typesDir, file), content)
   }
-
-  for (const file of jsFiles) {
-    const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
-    const distFile = join(outputDir, file)
-    await fs.ensureDir(dirname(distFile))
-    await fs.writeFile(distFile, content)
-  }
 }
 
 const externals = {
diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts
index 7571c94bfe57..3b80a2eaf1eb 100644
--- a/packages/next/types/misc.d.ts
+++ b/packages/next/types/misc.d.ts
@@ -284,10 +284,6 @@ declare module 'next/dist/compiled/postcss-scss' {
   import m from 'postcss-scss'
   export = m
 }
-declare module 'next/dist/styled-jsx' {
-  import m from 'styled-jsx'
-  export = m
-}
 
 declare module 'next/dist/compiled/text-table' {
   function textTable(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1cc89026b21..0978e105c44f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10454,6 +10454,7 @@ packages:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
       eslint: 7.32.0
+    dev: false
 
   /eslint-plugin-react/7.23.2_eslint@7.24.0:
     resolution: {integrity: sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==}

From bc149ca833ac668eb298e2750cc32713834dbb39 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Thu, 11 Aug 2022 20:06:00 -0500
Subject: [PATCH 2/5] re-add styled-jsx stub

---
 .../next-swc/crates/core/tests/loader/front/attr-1/output.js    | 2 +-
 packages/next-swc/crates/styled_jsx/src/utils.rs                | 2 +-
 .../crates/styled_jsx/tests/errors/nested-style-tags/output.js  | 2 +-
 .../next-swc/crates/styled_jsx/tests/errors/no-child/output.js  | 2 +-
 .../styled_jsx/tests/errors/ts-with-css-resolve/output.js       | 2 +-
 .../crates/styled_jsx/tests/errors/two-children/output.js       | 2 +-
 .../crates/styled_jsx/tests/errors/wrong-child-type/output.js   | 2 +-
 .../styled_jsx/tests/errors/wrong-jsx-expression-type/output.js | 2 +-
 .../fixture/attribute-generation-classname-rewriting/output.js  | 2 +-
 .../tests/fixture/attribute-generation-modes/output.js          | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/class/output.js    | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/comments/output.js | 2 +-
 .../styled_jsx/tests/fixture/component-attribute/output.js      | 2 +-
 .../tests/fixture/css-selector-after-pseudo/output.js           | 2 +-
 .../crates/styled_jsx/tests/fixture/css-tag-same-file/output.js | 2 +-
 .../crates/styled_jsx/tests/fixture/different-jsx-ids/output.js | 2 +-
 .../styled_jsx/tests/fixture/dynamic-element-class/output.js    | 2 +-
 .../styled_jsx/tests/fixture/dynamic-element-external/output.js | 2 +-
 .../crates/styled_jsx/tests/fixture/dynamic-element/output.js   | 2 +-
 .../crates/styled_jsx/tests/fixture/expressions/output.js       | 2 +-
 .../styled_jsx/tests/fixture/external-nested-scope/output.js    | 2 +-
 .../tests/fixture/external-stylesheet-global/output.js          | 2 +-
 .../tests/fixture/external-stylesheet-multi-line/output.js      | 2 +-
 .../styled_jsx/tests/fixture/external-stylesheet/output.js      | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/fragment/output.js | 2 +-
 .../styled_jsx/tests/fixture/global-child-selector/output.js    | 2 +-
 .../crates/styled_jsx/tests/fixture/global-redundant/output.js  | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/global/output.js   | 2 +-
 .../crates/styled_jsx/tests/fixture/issue-30480/output.js       | 2 +-
 .../crates/styled_jsx/tests/fixture/issue-30570/output.js       | 2 +-
 .../tests/fixture/issue-31562-interpolation-in-mdea/output.js   | 2 +-
 .../styled_jsx/tests/fixture/mixed-global-scoped/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/multiple-jsx/output.js      | 2 +-
 .../styled_jsx/tests/fixture/non-styled-jsx-style/output.js     | 2 +-
 .../styled_jsx/tests/fixture/number-after-placeholder/output.js | 2 +-
 .../styled_jsx/tests/fixture/one-off-global-selectors/output.js | 2 +-
 .../crates/styled_jsx/tests/fixture/stateless/output.js         | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/styles/output.js   | 2 +-
 .../next-swc/crates/styled_jsx/tests/fixture/too-many/output.js | 2 +-
 .../crates/styled_jsx/tests/fixture/tpl-escape-1/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/tpl-escape-2/output.js      | 2 +-
 .../tests/fixture/tpl-placeholder-1-as-property/output.js       | 2 +-
 .../tests/fixture/tpl-placeholder-2-as-part-of-value/output.js  | 2 +-
 .../tests/fixture/tpl-placeholder-3-as-value/output.js          | 2 +-
 .../tpl-placeholder-4-as-part-of-value-in-multiple/output.js    | 2 +-
 .../tpl-placeholder-5-values-of-multiple-properties/output.js   | 2 +-
 .../tests/fixture/transform-css-complex-selector/output.js      | 2 +-
 .../styled_jsx/tests/fixture/transform-css-global/output.js     | 2 +-
 .../tests/fixture/transform-css-media-query/output.js           | 2 +-
 .../styled_jsx/tests/fixture/transform-css-normal/output.js     | 2 +-
 .../styled_jsx/tests/fixture/transform-css-nth-1/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/transform-css/output.js     | 2 +-
 .../crates/styled_jsx/tests/fixture/whitespace/output.js        | 2 +-
 packages/next/build/babel/preset.ts                             | 2 +-
 packages/next/shared/lib/styled-jsx.d.ts                        | 1 +
 packages/next/shared/lib/styled-jsx.js                          | 1 +
 56 files changed, 56 insertions(+), 54 deletions(-)
 create mode 100644 packages/next/shared/lib/styled-jsx.d.ts
 create mode 100644 packages/next/shared/lib/styled-jsx.js

diff --git a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
index ed60ad648aa2..f82bfb4e4a00 100644
--- a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
+++ b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function Foo() {
     return /*#__PURE__*/ React.createElement("div", {
         render: function(v) {
diff --git a/packages/next-swc/crates/styled_jsx/src/utils.rs b/packages/next-swc/crates/styled_jsx/src/utils.rs
index bc720b16af38..678762e3c4fa 100644
--- a/packages/next-swc/crates/styled_jsx/src/utils.rs
+++ b/packages/next-swc/crates/styled_jsx/src/utils.rs
@@ -310,7 +310,7 @@ pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
         })],
         src: Str {
             span: DUMMY_SP,
-            value: "styled-jsx/style".into(),
+            value: "next/dist/shared/lib/styled-jsx".into(),
             raw: None,
         },
     }))
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
index 6a801091839c..38d68136f2d8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Component = ()=><>
     <header >
       <Comp >
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
index 90fb7d27831c..908b640b076a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
index 6fbd823e7814..25cdb1e61b5e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default {
     styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
index 743be800fcfe..c7b8f47dbdc6 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
index e4317fb3df8e..975160bce5f5 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
index 6769772a8834..b0b23eb58280 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
index 939e06090f38..34b1e418b045 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=>{
     const Element = 'div';
     return <div className={"jsx-abb4c2202db1a207"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
index 79516afad09e..a8a8ccdae3c1 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 const styles2 = require('./styles2');
 // external only
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
index 81b79672c77a..c672e5420f8c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
index 7c26aca7e820..7cc46c594484 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-1952086b0a5ae64c"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
index cdc5e031093f..57bdc6ef95ff 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
index c0cd6ea4718b..da59e7db9b1e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 function NavigationItem({ active , className ,  }) {
     return <span className={"jsx-2342aae4628612c6" + " " + (cn({
         active
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
index ffc1a2bf670f..fc2f4023befe 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
     <p className={`jsx-${styles.__hash}`}>{children}</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
index d5495dcdb338..763201482ebd 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const color = 'red';
 const otherColor = 'green';
 const A = ()=><div className={"jsx-551210e97e875d0e"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
index 49ba7ea7f920..c4581cb358b7 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         const Element = 'div';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
index e96530e25335..d7f87b88921c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles2';
 export default (({ level =1  })=>{
     const Element = `h${level}`;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
index fe05a5238005..3f98c1be1bf8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ level =1  })=>{
     const Element = `h${level}`;
     return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
index 9f37a3947413..06f67cc9de4d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const darken = (c)=>c;
 const color = 'red';
 const otherColor = 'green';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
index ec88815709af..5f8e096fab3d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 function test() {
     ({
         styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
index 862421061d48..a6c0b12c07c3 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles, { foo as styles3 } from './styles';
 const styles2 = require('./styles2');
 export default (()=><div >
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
index f8b2e5133e5e..be5dba099e6f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 export default (()=><div className={`jsx-${styles.__hash}`}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
index c22231857c55..fe6a2446a84d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 const styles2 = require('./styles2');
 import { foo as styles3 } from './styles';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
index a0946ccb7bca..863dd81a92c4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import React from 'react';
 export default (()=><>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
index 521e38dde02b..8073e4ec4e88 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <span className={"jsx-5a206f122d1cb32e"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
index aba1ba957e3d..50394bb0a73d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function IndexPage() {
     return <div className={"jsx-b6abd0684ba81871"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
index 0e54f9efefe1..fda52288d0a2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
     <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
index a199bc3ffbe3..055716c59704 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
         [
             "5d2a0e645566ce9c",
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
index c97fb8923815..2d9f86984434 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function IndexPage() {
     return <div className={"jsx-bbdada4ef17d18ef"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
index abac19ba636a..91173df42565 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
index bb98a20afbc3..d29cb9bac0da 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
index dceca90ed7c1..9537d3a60e50 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const attrs = {
     id: 'test'
 };
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
index 5977ac8dd5cd..852200c7f31c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
index c5b32ba71742..55825a5c4b00 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import Link from "next/link";
 export default function IndexPage() {
     return <div className={"jsx-9a4b3442d519aae9"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
index 479aff6f659b..c5276ef55d29 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
 
     <p className={"jsx-c7c3a8e231c9215a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
index 53d2bfccf343..1ad586b9797a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
index f158babca41d..e114321b54a1 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import colors, { size } from './constants';
 const color = 'red';
 const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
index 55a7eb25e8d2..67c714a05cd8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export const Red = ({ Component ='button' ,  })=>{
     return <Component className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
index dac32b1dded4..32189113aca2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-1f6cef12199c3a8f"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
index aadbcf64aef9..04d7cbd73a9c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function Home({ fontFamily  }) {
     return <div className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
index cc6b31de3adb..3d9ebca458d4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
index fd7abeb01a1f..f0765f7b53ba 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
index f7345d563135..e40fc79d7229 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
index 375dee3f9403..282cdbfbc457 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
index 991a76b6f2ed..15d6fc1b3538 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
index 37a9d1b4826c..81e7e38adca8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-713499aa363d6373"}>
 
     <p className={"jsx-713499aa363d6373"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
index a9e2480b87af..c852fdc8ab45 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <p className={"jsx-53fd644ab080300c"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
index 555929a70b25..be2e15a483cf 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <p className={"jsx-1f7963ae04c6466a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
index 6efb20adad80..d1a391c65347 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <p className={"jsx-1a19bb4817c105dd"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
index 5351dd0980a2..7f4b47ebf64f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <p className={"jsx-938ca197692ef624"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
index 1420b4c3e953..458a364376b4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-768337a97aceabd1"}>
 
     <p className={"jsx-768337a97aceabd1"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
index 53d2bfccf343..1ad586b9797a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index 5ea2a647a5e9..cc97d68c4805 100644
--- a/packages/next/build/babel/preset.ts
+++ b/packages/next/build/babel/preset.ts
@@ -16,7 +16,7 @@ type StyledJsxBabelOptions =
 // Resolve styled-jsx plugins
 function styledJsxOptions(options: StyledJsxBabelOptions) {
   options = options || {}
-  options.styleModule = 'styled-jsx/style'
+  options.styleModule = 'next/dist/shared/lib/styled-jsx'
 
   if (!Array.isArray(options.plugins)) {
     return options
diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx.d.ts
new file mode 100644
index 000000000000..716fb641fed5
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx.d.ts
@@ -0,0 +1 @@
+export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx.js
new file mode 100644
index 000000000000..a349928dce20
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx/style')

From 1d14495b0ddc60e1c628b61155e7db9aad19b256 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Aug 2022 11:29:25 +0200
Subject: [PATCH 3/5] Resolve styled-jsx as external

---
 packages/next/build/webpack-config.ts    | 8 +++++---
 packages/next/shared/lib/styled-jsx.d.ts | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index c099e19b68ff..bd1d0d925a29 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -841,7 +841,9 @@ export default async function getBaseWebpackConfig(
     // Absolute requires (require('/foo')) are extremely uncommon, but
     // also have no need for customization as they're already resolved.
     if (!isLocal) {
-      if (/^(?:next$|react(?:$|\/))/.test(request)) {
+      // styled-jsx is also marked as externals here to avoid being
+      // bundled in client components for RSC.
+      if (/^(?:next$|styled-jsx$|react(?:$|\/))/.test(request)) {
         return `commonjs ${request}`
       }
 
@@ -863,11 +865,11 @@ export default async function getBaseWebpackConfig(
     const isEsmRequested = dependencyType === 'esm'
 
     const isLocalCallback = (localRes: string) => {
-      // Makes sure dist/styled-jsx, dist/shared and dist/server are not bundled
+      // Makes sure dist/shared and dist/server are not bundled
       // we need to process shared `router/router` and `dynamic`,
       // so that the DefinePlugin can inject process.env values
       const isNextExternal =
-        /next[/\\]dist[/\\](styled-jsx|shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
+        /next[/\\]dist[/\\](shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
           localRes
         )
 
diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx.d.ts
index 716fb641fed5..57be2222c272 100644
--- a/packages/next/shared/lib/styled-jsx.d.ts
+++ b/packages/next/shared/lib/styled-jsx.d.ts
@@ -1 +1 @@
-export default function JSXStyle(props: any): null
+export { default } from 'styled-jsx/style'

From ea6c150fa0c537bbc0dd6773adaf045e75916cec Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Aug 2022 16:46:10 +0200
Subject: [PATCH 4/5] resolve styled-jsx as external with installed path

---
 .../crates/core/tests/loader/front/attr-1/output.js      | 2 +-
 packages/next-swc/crates/styled_jsx/src/utils.rs         | 2 +-
 .../styled_jsx/tests/errors/nested-style-tags/output.js  | 2 +-
 .../crates/styled_jsx/tests/errors/no-child/output.js    | 2 +-
 .../tests/errors/ts-with-css-resolve/output.js           | 2 +-
 .../styled_jsx/tests/errors/two-children/output.js       | 2 +-
 .../styled_jsx/tests/errors/wrong-child-type/output.js   | 2 +-
 .../tests/errors/wrong-jsx-expression-type/output.js     | 2 +-
 .../attribute-generation-classname-rewriting/output.js   | 2 +-
 .../tests/fixture/attribute-generation-modes/output.js   | 2 +-
 .../crates/styled_jsx/tests/fixture/class/output.js      | 2 +-
 .../crates/styled_jsx/tests/fixture/comments/output.js   | 2 +-
 .../tests/fixture/component-attribute/output.js          | 2 +-
 .../tests/fixture/css-selector-after-pseudo/output.js    | 2 +-
 .../styled_jsx/tests/fixture/css-tag-same-file/output.js | 2 +-
 .../styled_jsx/tests/fixture/different-jsx-ids/output.js | 2 +-
 .../tests/fixture/dynamic-element-class/output.js        | 2 +-
 .../tests/fixture/dynamic-element-external/output.js     | 2 +-
 .../styled_jsx/tests/fixture/dynamic-element/output.js   | 2 +-
 .../styled_jsx/tests/fixture/expressions/output.js       | 2 +-
 .../tests/fixture/external-nested-scope/output.js        | 2 +-
 .../tests/fixture/external-stylesheet-global/output.js   | 2 +-
 .../fixture/external-stylesheet-multi-line/output.js     | 2 +-
 .../tests/fixture/external-stylesheet/output.js          | 2 +-
 .../crates/styled_jsx/tests/fixture/fragment/output.js   | 2 +-
 .../tests/fixture/global-child-selector/output.js        | 2 +-
 .../styled_jsx/tests/fixture/global-redundant/output.js  | 2 +-
 .../crates/styled_jsx/tests/fixture/global/output.js     | 2 +-
 .../styled_jsx/tests/fixture/issue-30480/output.js       | 2 +-
 .../styled_jsx/tests/fixture/issue-30570/output.js       | 2 +-
 .../fixture/issue-31562-interpolation-in-mdea/output.js  | 2 +-
 .../tests/fixture/mixed-global-scoped/output.js          | 2 +-
 .../styled_jsx/tests/fixture/multiple-jsx/output.js      | 2 +-
 .../tests/fixture/non-styled-jsx-style/output.js         | 2 +-
 .../tests/fixture/number-after-placeholder/output.js     | 2 +-
 .../tests/fixture/one-off-global-selectors/output.js     | 2 +-
 .../crates/styled_jsx/tests/fixture/stateless/output.js  | 2 +-
 .../crates/styled_jsx/tests/fixture/styles/output.js     | 2 +-
 .../crates/styled_jsx/tests/fixture/too-many/output.js   | 2 +-
 .../styled_jsx/tests/fixture/tpl-escape-1/output.js      | 2 +-
 .../styled_jsx/tests/fixture/tpl-escape-2/output.js      | 2 +-
 .../fixture/tpl-placeholder-1-as-property/output.js      | 2 +-
 .../fixture/tpl-placeholder-2-as-part-of-value/output.js | 2 +-
 .../tests/fixture/tpl-placeholder-3-as-value/output.js   | 2 +-
 .../output.js                                            | 2 +-
 .../output.js                                            | 2 +-
 .../fixture/transform-css-complex-selector/output.js     | 2 +-
 .../tests/fixture/transform-css-global/output.js         | 2 +-
 .../tests/fixture/transform-css-media-query/output.js    | 2 +-
 .../tests/fixture/transform-css-normal/output.js         | 2 +-
 .../tests/fixture/transform-css-nth-1/output.js          | 2 +-
 .../styled_jsx/tests/fixture/transform-css/output.js     | 2 +-
 .../crates/styled_jsx/tests/fixture/whitespace/output.js | 2 +-
 packages/next/build/babel/preset.ts                      | 2 +-
 packages/next/build/webpack-config.ts                    | 9 ++++++++-
 55 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
index f82bfb4e4a00..ed60ad648aa2 100644
--- a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
+++ b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default function Foo() {
     return /*#__PURE__*/ React.createElement("div", {
         render: function(v) {
diff --git a/packages/next-swc/crates/styled_jsx/src/utils.rs b/packages/next-swc/crates/styled_jsx/src/utils.rs
index 678762e3c4fa..bc720b16af38 100644
--- a/packages/next-swc/crates/styled_jsx/src/utils.rs
+++ b/packages/next-swc/crates/styled_jsx/src/utils.rs
@@ -310,7 +310,7 @@ pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
         })],
         src: Str {
             span: DUMMY_SP,
-            value: "next/dist/shared/lib/styled-jsx".into(),
+            value: "styled-jsx/style".into(),
             raw: None,
         },
     }))
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
index 38d68136f2d8..6a801091839c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const Component = ()=><>
     <header >
       <Comp >
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
index 908b640b076a..90fb7d27831c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
index 25cdb1e61b5e..6fbd823e7814 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default {
     styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
index c7b8f47dbdc6..743be800fcfe 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
index 975160bce5f5..e4317fb3df8e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
index b0b23eb58280..6769772a8834 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div >
 
     <style jsx>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
index 34b1e418b045..939e06090f38 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=>{
     const Element = 'div';
     return <div className={"jsx-abb4c2202db1a207"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
index a8a8ccdae3c1..79516afad09e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import styles from './styles';
 const styles2 = require('./styles2');
 // external only
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
index c672e5420f8c..81b79672c77a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
index 7cc46c594484..7c26aca7e820 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-1952086b0a5ae64c"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
index 57bdc6ef95ff..cdc5e031093f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
index da59e7db9b1e..c0cd6ea4718b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 function NavigationItem({ active , className ,  }) {
     return <span className={"jsx-2342aae4628612c6" + " " + (cn({
         active
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
index fc2f4023befe..ffc1a2bf670f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
     <p className={`jsx-${styles.__hash}`}>{children}</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
index 763201482ebd..d5495dcdb338 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const color = 'red';
 const otherColor = 'green';
 const A = ()=><div className={"jsx-551210e97e875d0e"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
index c4581cb358b7..49ba7ea7f920 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         const Element = 'div';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
index d7f87b88921c..e96530e25335 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import styles from './styles2';
 export default (({ level =1  })=>{
     const Element = `h${level}`;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
index 3f98c1be1bf8..fe05a5238005 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (({ level =1  })=>{
     const Element = `h${level}`;
     return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
index 06f67cc9de4d..9f37a3947413 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const darken = (c)=>c;
 const color = 'red';
 const otherColor = 'green';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
index 5f8e096fab3d..ec88815709af 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-nested-scope/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 function test() {
     ({
         styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
index a6c0b12c07c3..862421061d48 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import styles, { foo as styles3 } from './styles';
 const styles2 = require('./styles2');
 export default (()=><div >
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
index be5dba099e6f..f8b2e5133e5e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import styles from './styles';
 export default (()=><div className={`jsx-${styles.__hash}`}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
index fe6a2446a84d..c22231857c55 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import styles from './styles';
 const styles2 = require('./styles2');
 import { foo as styles3 } from './styles';
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
index 863dd81a92c4..a0946ccb7bca 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 export default (()=><>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
index 8073e4ec4e88..521e38dde02b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <span className={"jsx-5a206f122d1cb32e"}>test</span>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
index 50394bb0a73d..aba1ba957e3d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default function IndexPage() {
     return <div className={"jsx-b6abd0684ba81871"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
index fda52288d0a2..0e54f9efefe1 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
     <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
index 055716c59704..a199bc3ffbe3 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
         [
             "5d2a0e645566ce9c",
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
index 2d9f86984434..c97fb8923815 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default function IndexPage() {
     return <div className={"jsx-bbdada4ef17d18ef"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
index 91173df42565..abac19ba636a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
index d29cb9bac0da..bb98a20afbc3 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
index 9537d3a60e50..dceca90ed7c1 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 const attrs = {
     id: 'test'
 };
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
index 852200c7f31c..5977ac8dd5cd 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
index 55825a5c4b00..c5b32ba71742 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import Link from "next/link";
 export default function IndexPage() {
     return <div className={"jsx-9a4b3442d519aae9"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
index c5276ef55d29..479aff6f659b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
 
     <p className={"jsx-c7c3a8e231c9215a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
index 1ad586b9797a..53d2bfccf343 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
index e114321b54a1..f158babca41d 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 import colors, { size } from './constants';
 const color = 'red';
 const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
index 67c714a05cd8..55a7eb25e8d2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export const Red = ({ Component ='button' ,  })=>{
     return <Component className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
index 32189113aca2..dac32b1dded4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-1f6cef12199c3a8f"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
index 04d7cbd73a9c..aadbcf64aef9 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default function Home({ fontFamily  }) {
     return <div className={_JSXStyle.dynamic([
         [
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
index 3d9ebca458d4..cc6b31de3adb 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
index f0765f7b53ba..fd7abeb01a1f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
index e40fc79d7229..f7345d563135 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
index 282cdbfbc457..375dee3f9403 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
index 15d6fc1b3538..991a76b6f2ed 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
index 81e7e38adca8..37a9d1b4826c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-713499aa363d6373"}>
 
     <p className={"jsx-713499aa363d6373"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
index c852fdc8ab45..a9e2480b87af 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <p className={"jsx-53fd644ab080300c"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
index be2e15a483cf..555929a70b25 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <p className={"jsx-1f7963ae04c6466a"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
index d1a391c65347..6efb20adad80 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <p className={"jsx-1a19bb4817c105dd"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
index 7f4b47ebf64f..5351dd0980a2 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <p className={"jsx-938ca197692ef624"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
index 458a364376b4..1420b4c3e953 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-768337a97aceabd1"}>
 
     <p className={"jsx-768337a97aceabd1"}>test</p>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
index 1ad586b9797a..53d2bfccf343 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "next/dist/shared/lib/styled-jsx";
+import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index cc97d68c4805..5ea2a647a5e9 100644
--- a/packages/next/build/babel/preset.ts
+++ b/packages/next/build/babel/preset.ts
@@ -16,7 +16,7 @@ type StyledJsxBabelOptions =
 // Resolve styled-jsx plugins
 function styledJsxOptions(options: StyledJsxBabelOptions) {
   options = options || {}
-  options.styleModule = 'next/dist/shared/lib/styled-jsx'
+  options.styleModule = 'styled-jsx/style'
 
   if (!Array.isArray(options.plugins)) {
     return options
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index bd1d0d925a29..3b9cb1caa3e5 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -843,7 +843,7 @@ export default async function getBaseWebpackConfig(
     if (!isLocal) {
       // styled-jsx is also marked as externals here to avoid being
       // bundled in client components for RSC.
-      if (/^(?:next$|styled-jsx$|react(?:$|\/))/.test(request)) {
+      if (/^(?:next$|react(?:$|\/))/.test(request)) {
         return `commonjs ${request}`
       }
 
@@ -908,6 +908,13 @@ export default async function getBaseWebpackConfig(
     if ('localRes' in resolveResult) {
       return resolveResult.localRes
     }
+
+    // Forcedly resolve the styled-jsx installed by next.js,
+    // since `resolveExternal` cannot find the styled-jsx dep with pnpm
+    if (['styled-jsx/style', 'styled-jsx'].includes(request)) {
+      resolveResult.res = require.resolve(request)
+    }
+
     const { res, isEsm } = resolveResult
 
     // If the request cannot be resolved we need to have

From 8fc9fdf891f379e47820f18a1cd4dcb11babbbb9 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Aug 2022 17:38:18 +0200
Subject: [PATCH 5/5] separate styled-jsx and styled-jsx/style resolving

---
 packages/next/build/webpack-config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 3b9cb1caa3e5..0c20b607a894 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -843,7 +843,7 @@ export default async function getBaseWebpackConfig(
     if (!isLocal) {
       // styled-jsx is also marked as externals here to avoid being
       // bundled in client components for RSC.
-      if (/^(?:next$|react(?:$|\/))/.test(request)) {
+      if (/^(?:next$|styled-jsx$|react(?:$|\/))/.test(request)) {
         return `commonjs ${request}`
       }
 
@@ -911,7 +911,7 @@ export default async function getBaseWebpackConfig(
 
     // Forcedly resolve the styled-jsx installed by next.js,
     // since `resolveExternal` cannot find the styled-jsx dep with pnpm
-    if (['styled-jsx/style', 'styled-jsx'].includes(request)) {
+    if (request === 'styled-jsx/style') {
       resolveResult.res = require.resolve(request)
     }