From 61513c656722dcae5e4d1c8525680713f2d4d0da Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 3 Aug 2022 23:10:06 +0200
Subject: [PATCH 01/20] Use require hook and alias to resolve styled-jsx

---
 package.json                                              | 1 -
 .../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 +-
 .../styled_jsx/tests/errors/ts-with-css-resolve/output.js | 2 +-
 .../crates/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 +-
 .../crates/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 +-
 .../crates/styled_jsx/tests/fixture/issue-30480/output.js | 2 +-
 .../crates/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 +-
 .../tests/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                     | 8 +++++++-
 packages/next/build/webpack/require-hook.ts               | 2 ++
 packages/next/pages/_error.tsx                            | 4 ++--
 packages/next/shared/lib/styled-jsx/index.d.ts            | 1 +
 packages/next/shared/lib/styled-jsx/index.js              | 1 +
 .../shared/lib/{styled-jsx.d.ts => styled-jsx/style.d.ts} | 0
 .../shared/lib/{styled-jsx.js => styled-jsx/style.js}     | 0
 pnpm-lock.yaml                                            | 2 --
 test/e2e/app-dir/rsc-basic.test.ts                        | 1 -
 .../app-dir/rsc-basic/app/root-style-registry.client.js   | 4 +---
 65 files changed, 68 insertions(+), 64 deletions(-)
 create mode 100644 packages/next/shared/lib/styled-jsx/index.d.ts
 create mode 100644 packages/next/shared/lib/styled-jsx/index.js
 rename packages/next/shared/lib/{styled-jsx.d.ts => styled-jsx/style.d.ts} (100%)
 rename packages/next/shared/lib/{styled-jsx.js => styled-jsx/style.js} (100%)

diff --git a/package.json b/package.json
index 5877847f2216..881653e3f2bc 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,6 @@
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
     "styled-components": "5.3.3",
-    "styled-jsx": "link:packages/next/node_modules/styled-jsx",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
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..3c7b478d94b0 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 "next/dist/shared/lib/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..e916ab37e325 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: "next/dist/shared/lib/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..d53f2bef9299 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 "next/dist/shared/lib/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..f366d5daac81 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 "next/dist/shared/lib/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..d73d5b4e6d8c 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 "next/dist/shared/lib/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..08d0e29a4c81 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 "next/dist/shared/lib/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..c83c2831d159 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 "next/dist/shared/lib/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..5bb9f55a598d 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 "next/dist/shared/lib/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..965ce1c8e325 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 "next/dist/shared/lib/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..e4a31a67bf0b 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 "next/dist/shared/lib/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..983fffa64b8f 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 "next/dist/shared/lib/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..5b24f9c89c7d 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 "next/dist/shared/lib/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..2a67258a62a6 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 "next/dist/shared/lib/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..04789a104f2f 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 "next/dist/shared/lib/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..dfec8c3ff3c2 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 "next/dist/shared/lib/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..a76cab264714 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 "next/dist/shared/lib/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..6eb4bd1be61c 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 "next/dist/shared/lib/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..bccd6d9fce18 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 "next/dist/shared/lib/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..eec3a9d86d3a 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 "next/dist/shared/lib/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..eac17b2f7492 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 "next/dist/shared/lib/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..02b712b20e32 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 "next/dist/shared/lib/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..6af20e90bd46 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 "next/dist/shared/lib/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..8d4871d11d5c 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 "next/dist/shared/lib/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..f2cdd1c0dda2 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 "next/dist/shared/lib/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..bc044b514162 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 "next/dist/shared/lib/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..d4bf00b8017e 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 "next/dist/shared/lib/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..9497b34b15d8 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 "next/dist/shared/lib/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..c4deb89a36f2 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 "next/dist/shared/lib/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..181d6f7587bf 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 "next/dist/shared/lib/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..6f526d224bf8 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 "next/dist/shared/lib/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..8203f3729956 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 "next/dist/shared/lib/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..f44f0b7ca9f8 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 "next/dist/shared/lib/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..d9667c50a87c 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 "next/dist/shared/lib/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..66bb6e6835df 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 "next/dist/shared/lib/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..1c454e839400 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 "next/dist/shared/lib/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..54e33f8f885d 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 "next/dist/shared/lib/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..ec8e525b0238 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 "next/dist/shared/lib/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..eb705f0ceb70 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 "next/dist/shared/lib/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..0c6f21ad7699 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 "next/dist/shared/lib/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..ed3d9739d8a9 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 "next/dist/shared/lib/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..2422e898c6a7 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 "next/dist/shared/lib/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..e620cc5ad8e4 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 "next/dist/shared/lib/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..70fa0ff585df 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 "next/dist/shared/lib/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..2eef679c5c09 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 "next/dist/shared/lib/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..05dc1b550e3d 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 "next/dist/shared/lib/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..12ca1c55127c 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 "next/dist/shared/lib/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..9588c3acc5d4 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 "next/dist/shared/lib/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..bc58053d01c7 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 "next/dist/shared/lib/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..7294115e2c8f 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 "next/dist/shared/lib/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..86cba8d3fad8 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 "next/dist/shared/lib/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..c6f3b90ba5fd 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 "next/dist/shared/lib/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..5a01788cbfe1 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 "next/dist/shared/lib/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..ec8e525b0238 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 "next/dist/shared/lib/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..e36a1c175c4e 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 = 'next/dist/shared/lib/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 5f9d502d507a..1152ce36e0b2 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -685,6 +685,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(`styled-jsx/style`),
+      'styled-jsx$': require.resolve(`styled-jsx`),
 
       ...customAppAliases,
       ...customErrorAlias,
@@ -816,9 +818,13 @@ export default async function getBaseWebpackConfig(
       resolveRequest: string
     ) => Promise<[string | null, boolean]>
   ) {
+    // Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
+    if (request === 'styled-jsx') {
+      request = 'next/dist/shared/lib/styled-jsx'
+    }
     // We need to externalize internal requests for files intended to
     // not be bundled.
-    const isLocal: boolean =
+    let isLocal: boolean =
       request.startsWith('.') ||
       // Always check for unix-style path, as webpack sometimes
       // normalizes as posix.
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 50d10f7d4425..16275bd5a663 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -126,6 +126,8 @@ const hookPropertyMap = new Map(
       'next/dist/compiled/@babel/runtime/package.json',
     ],
     ['node-fetch', 'next/dist/compiled/node-fetch'],
+    ['styled-jsx/style', 'styled-jsx/style'],
+    ['styled-jsx', 'styled-jsx'],
   ].map(([request, replacement]) => [request, require.resolve(replacement)])
 )
 
diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
index aac6190c1d2e..3a512cb70f7d 100644
--- a/packages/next/pages/_error.tsx
+++ b/packages/next/pages/_error.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Head from '../shared/lib/head'
-import { NextPageContext } from '../shared/lib/utils'
+import type { NextPageContext } from '../shared/lib/utils'
 
 const statusCodes: { [code: number]: string } = {
   400: 'Bad Request',
@@ -57,7 +57,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
                 .next-error-h1 {
                   border-right: 1px solid rgba(0, 0, 0, .3);
                 }
-                
+
                 ${
                   withDarkMode
                     ? `@media (prefers-color-scheme: dark) {
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
new file mode 100644
index 000000000000..3ee1cf7cf4b4
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -0,0 +1 @@
+export * from 'styled-jsx'
diff --git a/packages/next/shared/lib/styled-jsx/index.js b/packages/next/shared/lib/styled-jsx/index.js
new file mode 100644
index 000000000000..a28adad1cbf5
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/index.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx')
diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx/style.d.ts
similarity index 100%
rename from packages/next/shared/lib/styled-jsx.d.ts
rename to packages/next/shared/lib/styled-jsx/style.d.ts
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx/style.js
similarity index 100%
rename from packages/next/shared/lib/styled-jsx.js
rename to packages/next/shared/lib/styled-jsx/style.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f34119622c7f..a9c1799afeb7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3
-      styled-jsx: link:packages/next/node_modules/styled-jsx
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -308,7 +307,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3_vtcxgy2wlmese7djxl6h7ok674
-      styled-jsx: link:packages/next/node_modules/styled-jsx
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index 9c0ee623e3fe..632f17a55d57 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -41,7 +41,6 @@ describe('app dir - react server components', () => {
         'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
       },
       dependencies: {
-        'styled-jsx': 'latest',
         'styled-components': '6.0.0-alpha.5',
         react: 'experimental',
         'react-dom': 'experimental',
diff --git a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
index 922aa3ee46a4..c642e14fb1a7 100644
--- a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
+++ b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js
@@ -20,12 +20,10 @@ export default function RootStyleRegistry({ children }) {
   }
 
   useFlushEffects(() => {
-    const effects = styledComponentsFlushEffect()
-
     return (
       <>
         {styledJsxFlushEffect()}
-        {effects}
+        {styledComponentsFlushEffect()}
       </>
     )
   })

From 2f5e994588bf330ebc311f89685635956ab5a6da Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 5 Aug 2022 00:53:56 +0200
Subject: [PATCH 02/20] re-export styled-jsx types from compiled

---
 packages/next/shared/lib/styled-jsx/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
index 3ee1cf7cf4b4..0b26e1ea853a 100644
--- a/packages/next/shared/lib/styled-jsx/index.d.ts
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -1 +1 @@
-export * from 'styled-jsx'
+export * from 'next/dist/styled-jsx-types'

From 42402ccde1ae2e91774f49052d5f4cc39dffc976 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 5 Aug 2022 01:15:26 +0200
Subject: [PATCH 03/20] fix lint

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

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 1152ce36e0b2..8e9c0edda35b 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -824,7 +824,7 @@ export default async function getBaseWebpackConfig(
     }
     // We need to externalize internal requests for files intended to
     // not be bundled.
-    let isLocal: boolean =
+    const isLocal: boolean =
       request.startsWith('.') ||
       // Always check for unix-style path, as webpack sometimes
       // normalizes as posix.
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
index 0b26e1ea853a..3ee1cf7cf4b4 100644
--- a/packages/next/shared/lib/styled-jsx/index.d.ts
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -1 +1 @@
-export * from 'next/dist/styled-jsx-types'
+export * from 'styled-jsx'

From 69d495af9d07807ab72118ea593e132858de080f Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 7 Aug 2022 12:48:53 +0200
Subject: [PATCH 04/20] add test for styled-jsx css

---
 test/e2e/app-dir/rsc-basic.test.ts                     |  3 ++-
 .../rsc-basic/app/css-in-js/styled-jsx.client.js       | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index 632f17a55d57..015c055a76c9 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -326,7 +326,8 @@ describe('app dir - react server components', () => {
     const head = getNodeBySelector(html, 'head').html()
 
     // from styled-jsx
-    expect(head).toMatch(/{color:(\s*)purple;?}/)
+    expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
+    expect(head).toMatch(/{color:(\s*)hotpink;?}/) // styled-jsx/css
 
     // from styled-components
     expect(head).toMatch(/{color:(\s*)blue;?}/)
diff --git a/test/e2e/app-dir/rsc-basic/app/css-in-js/styled-jsx.client.js b/test/e2e/app-dir/rsc-basic/app/css-in-js/styled-jsx.client.js
index 8eb8781b818f..0ba1cec4d0f8 100644
--- a/test/e2e/app-dir/rsc-basic/app/css-in-js/styled-jsx.client.js
+++ b/test/e2e/app-dir/rsc-basic/app/css-in-js/styled-jsx.client.js
@@ -1,3 +1,11 @@
+import css from 'styled-jsx/css'
+
+const buttonStyles = css`
+  button {
+    color: hotpink;
+  }
+`
+
 export default function Comp() {
   return (
     <div>
@@ -10,9 +18,11 @@ export default function Comp() {
           border: 2px solid purple;
         }
       `}</style>
+      <style jsx>{buttonStyles}</style>
       <div className="box">
         <h3>styled-jsx</h3>
         <p>This area is rendered by styled-jsx</p>
+        <button>click</button>
       </div>
     </div>
   )

From 27c2d0134aca8c0d45a12de987c5952af3a9d879 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 7 Aug 2022 17:39:07 +0200
Subject: [PATCH 05/20] setup require hook in server

---
 .../core/tests/loader/front/attr-1/output.js  |  2 +-
 .../next-swc/crates/styled_jsx/src/utils.rs   |  2 +-
 .../tests/errors/nested-style-tags/output.js  |  2 +-
 .../tests/errors/no-child/output.js           |  2 +-
 .../errors/ts-with-css-resolve/output.js      |  2 +-
 .../tests/errors/two-children/output.js       |  2 +-
 .../tests/errors/wrong-child-type/output.js   |  2 +-
 .../wrong-jsx-expression-type/output.js       |  2 +-
 .../output.js                                 |  2 +-
 .../attribute-generation-modes/output.js      |  2 +-
 .../styled_jsx/tests/fixture/class/output.js  |  2 +-
 .../tests/fixture/comments/output.js          |  2 +-
 .../fixture/component-attribute/output.js     |  2 +-
 .../css-selector-after-pseudo/output.js       |  2 +-
 .../tests/fixture/css-tag-same-file/output.js |  2 +-
 .../tests/fixture/different-jsx-ids/output.js |  2 +-
 .../fixture/dynamic-element-class/output.js   |  2 +-
 .../dynamic-element-external/output.js        |  2 +-
 .../tests/fixture/dynamic-element/output.js   |  2 +-
 .../tests/fixture/expressions/output.js       |  2 +-
 .../fixture/external-nested-scope/output.js   |  2 +-
 .../external-stylesheet-global/output.js      |  2 +-
 .../external-stylesheet-multi-line/output.js  |  2 +-
 .../fixture/external-stylesheet/output.js     |  2 +-
 .../tests/fixture/fragment/output.js          |  2 +-
 .../fixture/global-child-selector/output.js   |  2 +-
 .../tests/fixture/global-redundant/output.js  |  2 +-
 .../styled_jsx/tests/fixture/global/output.js |  2 +-
 .../tests/fixture/issue-30480/output.js       |  2 +-
 .../tests/fixture/issue-30570/output.js       |  2 +-
 .../output.js                                 |  2 +-
 .../fixture/mixed-global-scoped/output.js     |  2 +-
 .../tests/fixture/multiple-jsx/output.js      |  2 +-
 .../fixture/non-styled-jsx-style/output.js    |  2 +-
 .../number-after-placeholder/output.js        |  2 +-
 .../one-off-global-selectors/output.js        |  2 +-
 .../tests/fixture/stateless/output.js         |  2 +-
 .../styled_jsx/tests/fixture/styles/output.js |  2 +-
 .../tests/fixture/too-many/output.js          |  2 +-
 .../tests/fixture/tpl-escape-1/output.js      |  2 +-
 .../tests/fixture/tpl-escape-2/output.js      |  2 +-
 .../tpl-placeholder-1-as-property/output.js   |  2 +-
 .../output.js                                 |  2 +-
 .../tpl-placeholder-3-as-value/output.js      |  2 +-
 .../output.js                                 |  2 +-
 .../output.js                                 |  2 +-
 .../transform-css-complex-selector/output.js  |  2 +-
 .../fixture/transform-css-global/output.js    |  2 +-
 .../transform-css-media-query/output.js       |  2 +-
 .../fixture/transform-css-normal/output.js    |  2 +-
 .../fixture/transform-css-nth-1/output.js     |  2 +-
 .../tests/fixture/transform-css/output.js     |  2 +-
 .../tests/fixture/whitespace/output.js        |  2 +-
 packages/next/build/babel/preset.ts           |  2 +-
 packages/next/build/webpack-config.ts         |  4 ----
 packages/next/server/config-utils.ts          | 23 +++++++++----------
 packages/next/server/config.ts                | 10 +++++++-
 packages/next/server/next-server.ts           |  8 ++++++-
 .../next/shared/lib/styled-jsx/index.d.ts     |  2 +-
 packages/next/shared/lib/styled-jsx/index.js  |  2 +-
 .../next/shared/lib/styled-jsx/style.d.ts     |  1 -
 packages/next/shared/lib/styled-jsx/style.js  |  1 -
 62 files changed, 83 insertions(+), 76 deletions(-)
 delete mode 100644 packages/next/shared/lib/styled-jsx/style.d.ts
 delete mode 100644 packages/next/shared/lib/styled-jsx/style.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 3c7b478d94b0..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 "next/dist/shared/lib/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 e916ab37e325..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: "next/dist/shared/lib/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 d53f2bef9299..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 "next/dist/shared/lib/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 f366d5daac81..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 "next/dist/shared/lib/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 d73d5b4e6d8c..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 "next/dist/shared/lib/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 08d0e29a4c81..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 "next/dist/shared/lib/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 c83c2831d159..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 "next/dist/shared/lib/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 5bb9f55a598d..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 "next/dist/shared/lib/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 965ce1c8e325..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 "next/dist/shared/lib/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 e4a31a67bf0b..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 "next/dist/shared/lib/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 983fffa64b8f..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 "next/dist/shared/lib/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 5b24f9c89c7d..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 "next/dist/shared/lib/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 2a67258a62a6..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 "next/dist/shared/lib/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 04789a104f2f..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 "next/dist/shared/lib/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 dfec8c3ff3c2..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 "next/dist/shared/lib/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 a76cab264714..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 "next/dist/shared/lib/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 6eb4bd1be61c..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 "next/dist/shared/lib/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 bccd6d9fce18..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 "next/dist/shared/lib/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 eec3a9d86d3a..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 "next/dist/shared/lib/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 eac17b2f7492..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 "next/dist/shared/lib/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 02b712b20e32..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 "next/dist/shared/lib/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 6af20e90bd46..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 "next/dist/shared/lib/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 8d4871d11d5c..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 "next/dist/shared/lib/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 f2cdd1c0dda2..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 "next/dist/shared/lib/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 bc044b514162..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 "next/dist/shared/lib/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 d4bf00b8017e..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 "next/dist/shared/lib/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 9497b34b15d8..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 "next/dist/shared/lib/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 c4deb89a36f2..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 "next/dist/shared/lib/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 181d6f7587bf..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 "next/dist/shared/lib/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 6f526d224bf8..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 "next/dist/shared/lib/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 8203f3729956..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 "next/dist/shared/lib/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 f44f0b7ca9f8..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 "next/dist/shared/lib/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 d9667c50a87c..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 "next/dist/shared/lib/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 66bb6e6835df..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 "next/dist/shared/lib/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 1c454e839400..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 "next/dist/shared/lib/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 54e33f8f885d..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 "next/dist/shared/lib/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 ec8e525b0238..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 "next/dist/shared/lib/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 eb705f0ceb70..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 "next/dist/shared/lib/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 0c6f21ad7699..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 "next/dist/shared/lib/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 ed3d9739d8a9..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 "next/dist/shared/lib/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 2422e898c6a7..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 "next/dist/shared/lib/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 e620cc5ad8e4..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 "next/dist/shared/lib/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 70fa0ff585df..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 "next/dist/shared/lib/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 2eef679c5c09..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 "next/dist/shared/lib/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 05dc1b550e3d..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 "next/dist/shared/lib/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 12ca1c55127c..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 "next/dist/shared/lib/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 9588c3acc5d4..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 "next/dist/shared/lib/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 bc58053d01c7..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 "next/dist/shared/lib/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 7294115e2c8f..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 "next/dist/shared/lib/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 86cba8d3fad8..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 "next/dist/shared/lib/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 c6f3b90ba5fd..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 "next/dist/shared/lib/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 5a01788cbfe1..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 "next/dist/shared/lib/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 ec8e525b0238..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 "next/dist/shared/lib/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 e36a1c175c4e..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 = 'next/dist/shared/lib/styled-jsx/style'
+  options.styleModule = 'next/dist/shared/lib/styled-jsx'
 
   if (!Array.isArray(options.plugins)) {
     return options
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 8e9c0edda35b..ecf86c40ad28 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -818,10 +818,6 @@ export default async function getBaseWebpackConfig(
       resolveRequest: string
     ) => Promise<[string | null, boolean]>
   ) {
-    // Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
-    if (request === 'styled-jsx') {
-      request = 'next/dist/shared/lib/styled-jsx'
-    }
     // We need to externalize internal requests for files intended to
     // not be bundled.
     const isLocal: boolean =
diff --git a/packages/next/server/config-utils.ts b/packages/next/server/config-utils.ts
index ff87e3e45c39..6d61b838597f 100644
--- a/packages/next/server/config-utils.ts
+++ b/packages/next/server/config-utils.ts
@@ -1,16 +1,15 @@
-import { init as initWebpack } from 'next/dist/compiled/webpack/webpack'
+export function createLoadRequireHook(callback?: () => void) {
+  let installed: boolean = false
 
-let installed: boolean = false
+  return () => {
+    if (installed) {
+      return
+    }
+    installed = true
 
-export function loadWebpackHook() {
-  if (installed) {
-    return
-  }
-  installed = true
-
-  initWebpack()
+    callback?.()
 
-  // hook the Node.js require so that webpack requires are
-  // routed to the bundled and now initialized webpack version
-  require('../build/webpack/require-hook')
+    // load mapped modules
+    require('../build/webpack/require-hook')
+  }
 }
diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts
index 70fab1c40e96..8ecb5630c613 100644
--- a/packages/next/server/config.ts
+++ b/packages/next/server/config.ts
@@ -3,6 +3,7 @@ import { pathToFileURL } from 'url'
 import { Agent as HttpAgent } from 'http'
 import { Agent as HttpsAgent } from 'https'
 import findUp from 'next/dist/compiled/find-up'
+import { init as initWebpack } from 'next/dist/compiled/webpack/webpack'
 import chalk from '../lib/chalk'
 import * as Log from '../build/output/log'
 import { CONFIG_FILES, PHASE_DEVELOPMENT_SERVER } from '../shared/lib/constants'
@@ -14,7 +15,7 @@ import {
   NextConfigComplete,
   validateConfig,
 } from './config-shared'
-import { loadWebpackHook } from './config-utils'
+import { createLoadRequireHook } from './config-utils'
 import {
   ImageConfig,
   imageConfigDefault,
@@ -720,6 +721,13 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   return result
 }
 
+function loadWebpackHook() {
+  // hook the Node.js require so that webpack requires are
+  // routed to the bundled and now initialized webpack version
+  const initializeWebpackRequireHook = createLoadRequireHook(initWebpack)
+  initializeWebpackRequireHook()
+}
+
 export default async function loadConfig(
   phase: string,
   dir: string,
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index fa1a722175bf..a2342a1bd061 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -27,7 +27,7 @@ import fs from 'fs'
 import { join, relative, resolve, sep } from 'path'
 import { IncomingMessage, ServerResponse } from 'http'
 import { addRequestMeta, getRequestMeta } from './request-meta'
-
+import { createLoadRequireHook } from './config-utils'
 import {
   PAGES_MANIFEST,
   BUILD_ID_FILE,
@@ -86,10 +86,16 @@ import { checkIsManualRevalidate } from './api-utils'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { shouldUseReactRoot } from './utils'
 
+function loadRequireHook() {
+  return createLoadRequireHook()
+}
+
 if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }
 
+loadRequireHook()
+
 export * from './base-server'
 
 type ExpressMiddleware = (
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
index 3ee1cf7cf4b4..716fb641fed5 100644
--- a/packages/next/shared/lib/styled-jsx/index.d.ts
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -1 +1 @@
-export * from 'styled-jsx'
+export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx/index.js b/packages/next/shared/lib/styled-jsx/index.js
index a28adad1cbf5..a349928dce20 100644
--- a/packages/next/shared/lib/styled-jsx/index.js
+++ b/packages/next/shared/lib/styled-jsx/index.js
@@ -1 +1 @@
-module.exports = require('styled-jsx')
+module.exports = require('styled-jsx/style')
diff --git a/packages/next/shared/lib/styled-jsx/style.d.ts b/packages/next/shared/lib/styled-jsx/style.d.ts
deleted file mode 100644
index 716fb641fed5..000000000000
--- a/packages/next/shared/lib/styled-jsx/style.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx/style.js b/packages/next/shared/lib/styled-jsx/style.js
deleted file mode 100644
index a349928dce20..000000000000
--- a/packages/next/shared/lib/styled-jsx/style.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('styled-jsx/style')

From d3d0673652d260a50510547a11bb8e45d639be0b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 7 Aug 2022 18:15:12 +0200
Subject: [PATCH 06/20] compile import path to styled-jsx/style

---
 .../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 +-
 54 files changed, 54 insertions(+), 54 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

From 129065b15674324a56743f73d3e04d2cee3789b3 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 7 Aug 2022 22:17:01 +0200
Subject: [PATCH 07/20] revert require hook

---
 .../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 +-
 .../styled_jsx/tests/errors/ts-with-css-resolve/output.js | 2 +-
 .../crates/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 +-
 .../crates/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 +-
 .../crates/styled_jsx/tests/fixture/issue-30480/output.js | 2 +-
 .../crates/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 +-
 .../tests/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                     | 4 ++++
 packages/next/server/next-server.ts                       | 8 +-------
 packages/next/shared/lib/styled-jsx/index.d.ts            | 2 +-
 packages/next/shared/lib/styled-jsx/index.js              | 2 +-
 packages/next/shared/lib/styled-jsx/style.d.ts            | 1 +
 packages/next/shared/lib/styled-jsx/style.js              | 1 +
 60 files changed, 63 insertions(+), 63 deletions(-)
 create mode 100644 packages/next/shared/lib/styled-jsx/style.d.ts
 create mode 100644 packages/next/shared/lib/styled-jsx/style.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..3c7b478d94b0 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/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 bc720b16af38..e916ab37e325 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/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 6a801091839c..d53f2bef9299 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/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 90fb7d27831c..f366d5daac81 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/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 6fbd823e7814..d73d5b4e6d8c 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/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 743be800fcfe..08d0e29a4c81 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/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 e4317fb3df8e..c83c2831d159 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/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 6769772a8834..5bb9f55a598d 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/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 939e06090f38..965ce1c8e325 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/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 79516afad09e..e4a31a67bf0b 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/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 81b79672c77a..983fffa64b8f 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/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 7c26aca7e820..5b24f9c89c7d 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/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 cdc5e031093f..2a67258a62a6 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/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 c0cd6ea4718b..04789a104f2f 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/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 ffc1a2bf670f..dfec8c3ff3c2 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/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 d5495dcdb338..a76cab264714 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/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 49ba7ea7f920..6eb4bd1be61c 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/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 e96530e25335..bccd6d9fce18 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/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 fe05a5238005..eec3a9d86d3a 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/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 9f37a3947413..eac17b2f7492 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/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 ec88815709af..02b712b20e32 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/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 862421061d48..6af20e90bd46 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/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 f8b2e5133e5e..8d4871d11d5c 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/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 c22231857c55..f2cdd1c0dda2 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/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 a0946ccb7bca..bc044b514162 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/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 521e38dde02b..d4bf00b8017e 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/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 aba1ba957e3d..9497b34b15d8 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/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 0e54f9efefe1..c4deb89a36f2 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/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 a199bc3ffbe3..181d6f7587bf 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/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 c97fb8923815..6f526d224bf8 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/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 abac19ba636a..8203f3729956 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/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 bb98a20afbc3..f44f0b7ca9f8 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/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 dceca90ed7c1..d9667c50a87c 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/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 5977ac8dd5cd..66bb6e6835df 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/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 c5b32ba71742..1c454e839400 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/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 479aff6f659b..54e33f8f885d 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/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 53d2bfccf343..ec8e525b0238 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/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 f158babca41d..eb705f0ceb70 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/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 55a7eb25e8d2..0c6f21ad7699 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/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 dac32b1dded4..ed3d9739d8a9 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/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 aadbcf64aef9..2422e898c6a7 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/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 cc6b31de3adb..e620cc5ad8e4 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/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 fd7abeb01a1f..70fa0ff585df 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/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 f7345d563135..2eef679c5c09 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/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 375dee3f9403..05dc1b550e3d 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/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 991a76b6f2ed..12ca1c55127c 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/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 37a9d1b4826c..9588c3acc5d4 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/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 a9e2480b87af..bc58053d01c7 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/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 555929a70b25..7294115e2c8f 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/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 6efb20adad80..86cba8d3fad8 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/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 5351dd0980a2..c6f3b90ba5fd 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/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 1420b4c3e953..5a01788cbfe1 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/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 53d2bfccf343..ec8e525b0238 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/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 5ea2a647a5e9..e36a1c175c4e 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/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 ecf86c40ad28..8e9c0edda35b 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -818,6 +818,10 @@ export default async function getBaseWebpackConfig(
       resolveRequest: string
     ) => Promise<[string | null, boolean]>
   ) {
+    // Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
+    if (request === 'styled-jsx') {
+      request = 'next/dist/shared/lib/styled-jsx'
+    }
     // We need to externalize internal requests for files intended to
     // not be bundled.
     const isLocal: boolean =
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index a2342a1bd061..fa1a722175bf 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -27,7 +27,7 @@ import fs from 'fs'
 import { join, relative, resolve, sep } from 'path'
 import { IncomingMessage, ServerResponse } from 'http'
 import { addRequestMeta, getRequestMeta } from './request-meta'
-import { createLoadRequireHook } from './config-utils'
+
 import {
   PAGES_MANIFEST,
   BUILD_ID_FILE,
@@ -86,16 +86,10 @@ import { checkIsManualRevalidate } from './api-utils'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { shouldUseReactRoot } from './utils'
 
-function loadRequireHook() {
-  return createLoadRequireHook()
-}
-
 if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }
 
-loadRequireHook()
-
 export * from './base-server'
 
 type ExpressMiddleware = (
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
index 716fb641fed5..3ee1cf7cf4b4 100644
--- a/packages/next/shared/lib/styled-jsx/index.d.ts
+++ b/packages/next/shared/lib/styled-jsx/index.d.ts
@@ -1 +1 @@
-export default function JSXStyle(props: any): null
+export * from 'styled-jsx'
diff --git a/packages/next/shared/lib/styled-jsx/index.js b/packages/next/shared/lib/styled-jsx/index.js
index a349928dce20..a28adad1cbf5 100644
--- a/packages/next/shared/lib/styled-jsx/index.js
+++ b/packages/next/shared/lib/styled-jsx/index.js
@@ -1 +1 @@
-module.exports = require('styled-jsx/style')
+module.exports = require('styled-jsx')
diff --git a/packages/next/shared/lib/styled-jsx/style.d.ts b/packages/next/shared/lib/styled-jsx/style.d.ts
new file mode 100644
index 000000000000..716fb641fed5
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/style.d.ts
@@ -0,0 +1 @@
+export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx/style.js b/packages/next/shared/lib/styled-jsx/style.js
new file mode 100644
index 000000000000..a349928dce20
--- /dev/null
+++ b/packages/next/shared/lib/styled-jsx/style.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx/style')

From e909cb79b49accd887bee87c274cab0695afcc9b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 7 Aug 2022 22:35:36 +0200
Subject: [PATCH 08/20] add test for server styled-jsx resolving

---
 test/e2e/styled-jsx/index.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index c0f52f658ff9..06aed6c53f7d 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -15,6 +15,9 @@ function runTest(packageManager?: string) {
         files: {
           pages: new FileRef(path.join(appDir, 'pages')),
         },
+        dependencies: {
+          'styled-jsx': '4.0.0', // add outdated invalid styled-jsx
+        },
         ...(packageManager
           ? {
               installCommand: `npx ${packageManager} install`,

From de7092d355338f41c4df93e0ec18c0aedf15474b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 00:48:58 +0200
Subject: [PATCH 09/20] update test

---
 packages/next/server/next-server.ts           |  8 ++++-
 test/e2e/styled-jsx/app/next.config.js        |  3 ++
 .../app/node_modules_bak/my-comps/button.js   | 33 +++++++++++++++++++
 test/e2e/styled-jsx/app/pages/index.js        |  3 ++
 test/e2e/styled-jsx/index.test.ts             | 23 +++++++++----
 5 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 test/e2e/styled-jsx/app/next.config.js
 create mode 100644 test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js

diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index fa1a722175bf..673e020ef01d 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -27,7 +27,7 @@ import fs from 'fs'
 import { join, relative, resolve, sep } from 'path'
 import { IncomingMessage, ServerResponse } from 'http'
 import { addRequestMeta, getRequestMeta } from './request-meta'
-
+import { createLoadRequireHook } from './config-utils'
 import {
   PAGES_MANIFEST,
   BUILD_ID_FILE,
@@ -86,6 +86,12 @@ import { checkIsManualRevalidate } from './api-utils'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { shouldUseReactRoot } from './utils'
 
+function loadRequireHook() {
+  return createLoadRequireHook()
+}
+
+loadRequireHook()
+
 if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }
diff --git a/test/e2e/styled-jsx/app/next.config.js b/test/e2e/styled-jsx/app/next.config.js
new file mode 100644
index 000000000000..e97173b4b379
--- /dev/null
+++ b/test/e2e/styled-jsx/app/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  output: 'standalone',
+}
diff --git a/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js
new file mode 100644
index 000000000000..51d84efa1fa7
--- /dev/null
+++ b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js
@@ -0,0 +1,33 @@
+'use strict'
+
+Object.defineProperty(exports, '__esModule', { value: true })
+
+function _interopDefault(ex) {
+  return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex
+}
+
+var _JSXStyle = _interopDefault(require('styled-jsx/style'))
+var React = require('react')
+
+function Button() {
+  return React.createElement(
+    'button',
+    {
+      className: 'jsx-451104437',
+    },
+    'hello',
+    React.createElement(
+      _JSXStyle,
+      {
+        id: '451104437',
+      },
+      '.jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */'
+    )
+  )
+}
+
+/**
+ * @class ExampleComponent
+ */
+
+exports.Button = Button
diff --git a/test/e2e/styled-jsx/app/pages/index.js b/test/e2e/styled-jsx/app/pages/index.js
index 31c938b25e4f..1224e689d10a 100644
--- a/test/e2e/styled-jsx/app/pages/index.js
+++ b/test/e2e/styled-jsx/app/pages/index.js
@@ -1,8 +1,11 @@
+// import { Button } from '../node_modules_bak/my-comps/button'
+
 export default function Page() {
   return (
     <div>
       <style jsx>{'p { color: red; }'}</style>
       <p>hello world</p>
+      {/* <Button>Click me</Button> */}
     </div>
   )
 }
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index 06aed6c53f7d..82d272dd41d8 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -2,22 +2,32 @@ import path from 'path'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
-import cheerio from 'cheerio'
 
 const appDir = path.join(__dirname, 'app')
 
 function runTest(packageManager?: string) {
-  describe(`styled-jsx${packageManager ? ' ' + packageManager : ''}`, () => {
+  describe(`styled-jsx with ${
+    packageManager ? ' ' + packageManager : ''
+  }`, () => {
     let next: NextInstance
 
     beforeAll(async () => {
       next = await createNext({
         files: {
+          node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
           pages: new FileRef(path.join(appDir, 'pages')),
+          // 'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
         },
-        dependencies: {
-          'styled-jsx': '4.0.0', // add outdated invalid styled-jsx
+        packageJson: {
+          scripts: {
+            setup: `cp -r ./node_modules_bak/my-comps ./node_modules;`,
+            build: `yarn setup && next build`,
+            dev: `yarn setup && next dev`,
+            start: 'next start',
+          },
         },
+        startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'),
+        buildCommand: `yarn build`,
         ...(packageManager
           ? {
               installCommand: `npx ${packageManager} install`,
@@ -29,8 +39,9 @@ function runTest(packageManager?: string) {
 
     it('should contain styled-jsx styles in html', async () => {
       const html = await renderViaHTTP(next.url, '/')
-      const $ = cheerio.load(html)
-      expect($('html').text()).toMatch(/color:(\s)*red/)
+      expect(html).toMatch(/color:(\s)*red/)
+      // TODO: support styled-jsx from node-modules
+      // expect(html).toMatch(/color:(\s)*cyan/)
     })
   })
 }

From eb5403dbd8c774b8bf3a5c33807bafd129037eba Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 17:32:35 +0200
Subject: [PATCH 10/20] pre copy styled-jsx assets

---
 package.json                                  |  1 +
 .../core/tests/loader/front/attr-1/output.js  |  2 +-
 .../next-swc/crates/styled_jsx/src/utils.rs   |  2 +-
 .../tests/errors/nested-style-tags/output.js  |  2 +-
 .../tests/errors/no-child/output.js           |  2 +-
 .../errors/ts-with-css-resolve/output.js      |  2 +-
 .../tests/errors/two-children/output.js       |  2 +-
 .../tests/errors/wrong-child-type/output.js   |  2 +-
 .../wrong-jsx-expression-type/output.js       |  2 +-
 .../output.js                                 |  2 +-
 .../attribute-generation-modes/output.js      |  2 +-
 .../styled_jsx/tests/fixture/class/output.js  |  2 +-
 .../tests/fixture/comments/output.js          |  2 +-
 .../fixture/component-attribute/output.js     |  2 +-
 .../css-selector-after-pseudo/output.js       |  2 +-
 .../tests/fixture/css-tag-same-file/output.js |  2 +-
 .../tests/fixture/different-jsx-ids/output.js |  2 +-
 .../fixture/dynamic-element-class/output.js   |  2 +-
 .../dynamic-element-external/output.js        |  2 +-
 .../tests/fixture/dynamic-element/output.js   |  2 +-
 .../tests/fixture/expressions/output.js       |  2 +-
 .../fixture/external-nested-scope/output.js   |  2 +-
 .../external-stylesheet-global/output.js      |  2 +-
 .../external-stylesheet-multi-line/output.js  |  2 +-
 .../fixture/external-stylesheet/output.js     |  2 +-
 .../tests/fixture/fragment/output.js          |  2 +-
 .../fixture/global-child-selector/output.js   |  2 +-
 .../tests/fixture/global-redundant/output.js  |  2 +-
 .../styled_jsx/tests/fixture/global/output.js |  2 +-
 .../tests/fixture/issue-30480/output.js       |  2 +-
 .../tests/fixture/issue-30570/output.js       |  2 +-
 .../output.js                                 |  2 +-
 .../fixture/mixed-global-scoped/output.js     |  2 +-
 .../tests/fixture/multiple-jsx/output.js      |  2 +-
 .../fixture/non-styled-jsx-style/output.js    |  2 +-
 .../number-after-placeholder/output.js        |  2 +-
 .../one-off-global-selectors/output.js        |  2 +-
 .../tests/fixture/stateless/output.js         |  2 +-
 .../styled_jsx/tests/fixture/styles/output.js |  2 +-
 .../tests/fixture/too-many/output.js          |  2 +-
 .../tests/fixture/tpl-escape-1/output.js      |  2 +-
 .../tests/fixture/tpl-escape-2/output.js      |  2 +-
 .../tpl-placeholder-1-as-property/output.js   |  2 +-
 .../output.js                                 |  2 +-
 .../tpl-placeholder-3-as-value/output.js      |  2 +-
 .../output.js                                 |  2 +-
 .../output.js                                 |  2 +-
 .../transform-css-complex-selector/output.js  |  2 +-
 .../fixture/transform-css-global/output.js    |  2 +-
 .../transform-css-media-query/output.js       |  2 +-
 .../fixture/transform-css-normal/output.js    |  2 +-
 .../fixture/transform-css-nth-1/output.js     |  2 +-
 .../tests/fixture/transform-css/output.js     |  2 +-
 .../tests/fixture/whitespace/output.js        |  2 +-
 packages/next/build/babel/preset.ts           |  2 +-
 packages/next/build/webpack-config.ts         | 12 ++++-------
 packages/next/build/webpack/require-hook.ts   |  4 ++--
 packages/next/index.d.ts                      |  2 +-
 packages/next/server/render.tsx               |  2 +-
 packages/next/taskfile.js                     | 18 ++++++++++++++---
 packages/next/types/misc.d.ts                 |  5 +++++
 pnpm-lock.yaml                                | 20 +++++++++++++++++++
 .../app/node_modules_bak/my-comps/button.js   |  2 --
 test/e2e/styled-jsx/app/pages/index.js        |  4 ++--
 test/e2e/styled-jsx/index.test.ts             |  8 +++++---
 65 files changed, 110 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index 881653e3f2bc..580bfac7d4f6 100644
--- a/package.json
+++ b/package.json
@@ -191,6 +191,7 @@
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
     "styled-components": "5.3.3",
+    "styled-jsx": "5.0.2",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
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 3c7b478d94b0..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/style";
+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 e916ab37e325..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/style".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 d53f2bef9299..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/style";
+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 f366d5daac81..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/style";
+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 d73d5b4e6d8c..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/style";
+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 08d0e29a4c81..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/style";
+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 c83c2831d159..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/style";
+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 5bb9f55a598d..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/style";
+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 965ce1c8e325..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/style";
+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 e4a31a67bf0b..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/style";
+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 983fffa64b8f..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/style";
+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 5b24f9c89c7d..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/style";
+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 2a67258a62a6..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/style";
+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 04789a104f2f..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/style";
+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 dfec8c3ff3c2..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/style";
+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 a76cab264714..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/style";
+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 6eb4bd1be61c..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/style";
+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 bccd6d9fce18..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/style";
+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 eec3a9d86d3a..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/style";
+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 eac17b2f7492..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/style";
+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 02b712b20e32..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/style";
+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 6af20e90bd46..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/style";
+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 8d4871d11d5c..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/style";
+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 f2cdd1c0dda2..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/style";
+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 bc044b514162..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/style";
+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 d4bf00b8017e..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/style";
+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 9497b34b15d8..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/style";
+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 c4deb89a36f2..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/style";
+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 181d6f7587bf..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/style";
+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 6f526d224bf8..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/style";
+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 8203f3729956..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/style";
+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 f44f0b7ca9f8..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/style";
+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 d9667c50a87c..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/style";
+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 66bb6e6835df..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/style";
+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 1c454e839400..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/style";
+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 54e33f8f885d..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/style";
+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 ec8e525b0238..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/style";
+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 eb705f0ceb70..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/style";
+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 0c6f21ad7699..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/style";
+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 ed3d9739d8a9..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/style";
+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 2422e898c6a7..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/style";
+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 e620cc5ad8e4..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/style";
+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 70fa0ff585df..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/style";
+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 2eef679c5c09..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/style";
+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 05dc1b550e3d..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/style";
+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 12ca1c55127c..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/style";
+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 9588c3acc5d4..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/style";
+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 bc58053d01c7..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/style";
+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 7294115e2c8f..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/style";
+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 86cba8d3fad8..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/style";
+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 c6f3b90ba5fd..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/style";
+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 5a01788cbfe1..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/style";
+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 ec8e525b0238..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/style";
+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 e36a1c175c4e..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/style'
+  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 8e9c0edda35b..9de8fd598f2f 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -685,8 +685,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(`styled-jsx/style`),
-      'styled-jsx$': require.resolve(`styled-jsx`),
+      'styled-jsx/style$': require.resolve(`next/dist/styled-jsx/style`),
+      'styled-jsx$': require.resolve(`next/dist/styled-jsx`),
 
       ...customAppAliases,
       ...customErrorAlias,
@@ -818,10 +818,6 @@ export default async function getBaseWebpackConfig(
       resolveRequest: string
     ) => Promise<[string | null, boolean]>
   ) {
-    // Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
-    if (request === 'styled-jsx') {
-      request = 'next/dist/shared/lib/styled-jsx'
-    }
     // We need to externalize internal requests for files intended to
     // not be bundled.
     const isLocal: boolean =
@@ -866,11 +862,11 @@ export default async function getBaseWebpackConfig(
     const isEsmRequested = dependencyType === 'esm'
 
     const isLocalCallback = (localRes: string) => {
-      // Makes sure dist/shared and dist/server are not bundled
+      // Makes sure dist/styled-jsx, 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[/\\](shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
+        /next[/\\]dist[/\\](styled-jsx|shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic))/.test(
           localRes
         )
 
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 16275bd5a663..60c72ebd613a 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -126,8 +126,8 @@ const hookPropertyMap = new Map(
       'next/dist/compiled/@babel/runtime/package.json',
     ],
     ['node-fetch', 'next/dist/compiled/node-fetch'],
-    ['styled-jsx/style', 'styled-jsx/style'],
-    ['styled-jsx', 'styled-jsx'],
+    ['styled-jsx', 'next/dist/styled-jsx'],
+    ['styled-jsx/style', 'next/dist/styled-jsx/style'],
   ].map(([request, replacement]) => [request, require.resolve(replacement)])
 )
 
diff --git a/packages/next/index.d.ts b/packages/next/index.d.ts
index dd922052fa49..5d7a7b9cd205 100644
--- a/packages/next/index.d.ts
+++ b/packages/next/index.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="./types/global" />
-/// <reference path="./dist/styled-jsx-types/global.d.ts" />
+/// <reference path="./dist/styled-jsx/global.d.ts" />
 /// <reference path="./amp.d.ts" />
 /// <reference path="./app.d.ts" />
 /// <reference path="./config.d.ts" />
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 5cbb709c52b4..85e1541f0a8f 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -24,7 +24,7 @@ import type { ReactReadableStream } from './node-web-streams-helper'
 import type { ServerRuntime } from './config-shared'
 
 import React from 'react'
-import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
+import { StyleRegistry, createStyleRegistry } from 'next/dist/styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
   GSSP_COMPONENT_MEMBER_ERROR,
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index d75e873f23d2..800edee659db 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -43,13 +43,16 @@ export async function copy_regenerator_runtime(task, opts) {
 }
 
 // eslint-disable-next-line camelcase
-export async function copy_styled_jsx_types(task, opts) {
+export async function copy_styled_jsx_assets(task, opts) {
   // 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 outputDir = join(__dirname, 'dist/styled-jsx-types')
+  const jsFiles = glob.sync('**/{index,style,babel,babel-test}.js', {
+    cwd: styledJsxPath,
+  })
+  const outputDir = join(__dirname, 'dist/styled-jsx')
   let typeReferences = ``
 
   await fs.ensureDir(outputDir)
@@ -72,6 +75,15 @@ export async function copy_styled_jsx_types(task, opts) {
   }
 
   await fs.writeFile(join(outputDir, 'global.d.ts'), typeReferences)
+
+  console.log('jsFiles', jsFiles)
+  for (const file of jsFiles) {
+    console.log('file', file)
+    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 = {
@@ -1950,7 +1962,7 @@ export async function compile(task, opts) {
       // we compile this each time so that fresh runtime data is pulled
       // before each publish
       'ncc_amp_optimizer',
-      'copy_styled_jsx_types',
+      'copy_styled_jsx_assets',
     ],
     opts
   )
diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts
index 131c9577276f..02a3d342988c 100644
--- a/packages/next/types/misc.d.ts
+++ b/packages/next/types/misc.d.ts
@@ -18,6 +18,11 @@ declare module 'next/dist/compiled/@next/react-refresh-utils/dist/ReactRefreshWe
   export = m
 }
 
+declare module 'next/dist/styled-jsx' {
+  import m from 'styled-jsx'
+  export = m
+}
+
 declare module 'next/dist/compiled/node-html-parser' {
   export * from 'node-html-parser'
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9c1799afeb7..f6247e2a2777 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,6 +154,7 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3
+      styled-jsx: 5.0.2
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -307,6 +308,7 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3_vtcxgy2wlmese7djxl6h7ok674
+      styled-jsx: 5.0.2_uuaxwgga6hqycsez5ok7v2wg4i
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -10441,6 +10443,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==}
@@ -20562,6 +20565,23 @@ packages:
       '@babel/core': 7.18.0
     dev: false
 
+  /styled-jsx/5.0.2_uuaxwgga6hqycsez5ok7v2wg4i:
+    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.0
+      react: 18.2.0
+    dev: true
+
   /stylehacks/4.0.3:
     resolution: {integrity: sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==}
     engines: {node: '>=6.9.0'}
diff --git a/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js
index 51d84efa1fa7..a800c06432f5 100644
--- a/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js
+++ b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js
@@ -1,5 +1,3 @@
-'use strict'
-
 Object.defineProperty(exports, '__esModule', { value: true })
 
 function _interopDefault(ex) {
diff --git a/test/e2e/styled-jsx/app/pages/index.js b/test/e2e/styled-jsx/app/pages/index.js
index 1224e689d10a..f59f1e3c318c 100644
--- a/test/e2e/styled-jsx/app/pages/index.js
+++ b/test/e2e/styled-jsx/app/pages/index.js
@@ -1,11 +1,11 @@
-// import { Button } from '../node_modules_bak/my-comps/button'
+import { Button } from '../node_modules_bak/my-comps/button'
 
 export default function Page() {
   return (
     <div>
       <style jsx>{'p { color: red; }'}</style>
       <p>hello world</p>
-      {/* <Button>Click me</Button> */}
+      <Button>Click me</Button>
     </div>
   )
 }
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index 82d272dd41d8..fd8610db133f 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -16,7 +16,7 @@ function runTest(packageManager?: string) {
         files: {
           node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
           pages: new FileRef(path.join(appDir, 'pages')),
-          // 'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+          'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
         },
         packageJson: {
           scripts: {
@@ -26,6 +26,9 @@ function runTest(packageManager?: string) {
             start: 'next start',
           },
         },
+        dependencies: {
+          'styled-jsx': '4.0.0', // incompatible styled-jsx on user side
+        },
         startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'),
         buildCommand: `yarn build`,
         ...(packageManager
@@ -40,8 +43,7 @@ function runTest(packageManager?: string) {
     it('should contain styled-jsx styles in html', async () => {
       const html = await renderViaHTTP(next.url, '/')
       expect(html).toMatch(/color:(\s)*red/)
-      // TODO: support styled-jsx from node-modules
-      // expect(html).toMatch(/color:(\s)*cyan/)
+      expect(html).toMatch(/color:(\s)*cyan/)
     })
   })
 }

From cea4f0fa2c3d51440bbc370cdacbb5893ad5c51e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 18:04:47 +0200
Subject: [PATCH 11/20] fix styled-jsx dts

---
 packages/next/taskfile.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 800edee659db..198100f9a0cb 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -62,23 +62,26 @@ export async function copy_styled_jsx_assets(task, opts) {
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
     const exportsIndex = content.indexOf('export')
 
-    await fs.writeFile(
-      join(outputDir, file),
+    let replacedContent =
       `${content.substring(0, exportsIndex)}\n` +
-        `declare module 'styled-jsx${
-          file === 'index.d.ts' ? '' : '/' + fileNoExt
-        }' {
+      `declare module 'styled-jsx${
+        file === 'index.d.ts' ? '' : '/' + fileNoExt
+      }' {
         ${content.substring(exportsIndex)}
       }`
-    )
+    if (file === 'index.d.ts') {
+      replacedContent = replacedContent
+        .replace(/export function StyleRegistry/g, 'export function IRegistry')
+        .replace(/StyleRegistry/g, 'IStyleRegistry')
+        .replace(/IRegistry/g, 'Registry')
+    }
+    await fs.writeFile(join(outputDir, file), replacedContent)
     typeReferences += `/// <reference types="./${fileNoExt}" />\n`
   }
 
   await fs.writeFile(join(outputDir, 'global.d.ts'), typeReferences)
 
-  console.log('jsFiles', jsFiles)
   for (const file of jsFiles) {
-    console.log('file', file)
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
     const distFile = join(outputDir, file)
     await fs.ensureDir(dirname(distFile))

From 7994c387eb76da31a23e05f691510da0f1943ad7 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 18:26:01 +0200
Subject: [PATCH 12/20] add npmrc for styled-jsx e2e test

---
 test/e2e/styled-jsx/app/.npmrc    | 1 +
 test/e2e/styled-jsx/index.test.ts | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 test/e2e/styled-jsx/app/.npmrc

diff --git a/test/e2e/styled-jsx/app/.npmrc b/test/e2e/styled-jsx/app/.npmrc
new file mode 100644
index 000000000000..3e775efb0f40
--- /dev/null
+++ b/test/e2e/styled-jsx/app/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index fd8610db133f..6b4682d3694e 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -17,6 +17,7 @@ function runTest(packageManager?: string) {
           node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
           pages: new FileRef(path.join(appDir, 'pages')),
           'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+          '.npmrc': new FileRef(path.join(appDir, '.npmrc')),
         },
         packageJson: {
           scripts: {

From 616f1b242be2e2fb03ec2417acd8ca893320f8ba Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 22:24:02 +0200
Subject: [PATCH 13/20] load require hook directly

---
 package.json                                  |  1 -
 packages/next/build/utils.ts                  |  1 +
 packages/next/export/worker.ts                |  5 ++-
 packages/next/package.json                    |  2 +-
 packages/next/server/config-utils.ts          | 23 ++++++------
 packages/next/server/config.ts                | 12 +-----
 packages/next/server/next-server.ts           |  8 +---
 pnpm-lock.yaml                                | 21 +----------
 test/e2e/styled-jsx/app/next.config.js        |  3 --
 test/e2e/styled-jsx/app/pages/amp.js          | 12 ++++++
 test/e2e/styled-jsx/app/pages/index.js        |  2 +-
 test/e2e/styled-jsx/index.test.ts             | 33 ++++++++++++++---
 .../app/node_modules/my-comps/button.js       | 37 +++++++++++++------
 13 files changed, 89 insertions(+), 71 deletions(-)
 delete mode 100644 test/e2e/styled-jsx/app/next.config.js
 create mode 100644 test/e2e/styled-jsx/app/pages/amp.js

diff --git a/package.json b/package.json
index 580bfac7d4f6..881653e3f2bc 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,6 @@
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
     "styled-components": "5.3.3",
-    "styled-jsx": "5.0.2",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
index 95f8d413a000..bc65ff42fb10 100644
--- a/packages/next/build/utils.ts
+++ b/packages/next/build/utils.ts
@@ -1,6 +1,7 @@
 import type { NextConfigComplete, ServerRuntime } from '../server/config-shared'
 
 import '../server/node-polyfill-fetch'
+import '../build/webpack/require-hook'
 import chalk from 'next/dist/compiled/chalk'
 import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 08c3c14fcacd..803b3f3435d6 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -4,6 +4,10 @@ import type { GetStaticProps } from '../types'
 import type { IncomingMessage, ServerResponse } from 'http'
 import type { NextConfigComplete } from '../server/config-shared'
 import type { NextParsedUrlQuery } from '../server/request-meta'
+
+import '../server/node-polyfill-fetch'
+import '../build/webpack/require-hook'
+
 import url from 'url'
 import { extname, join, dirname, sep } from 'path'
 import { renderToHTML } from '../server/render'
@@ -15,7 +19,6 @@ import { getRouteMatcher } from '../shared/lib/router/utils/route-matcher'
 import { getRouteRegex } from '../shared/lib/router/utils/route-regex'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
 import { SERVER_PROPS_EXPORT_ERROR } from '../lib/constants'
-import '../server/node-polyfill-fetch'
 import { requireFontManifest } from '../server/require'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
 import { trace } from '../trace'
diff --git a/packages/next/package.json b/packages/next/package.json
index 91b7bc8383e0..28f8955c54e0 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -74,7 +74,6 @@
     "@swc/helpers": "0.4.3",
     "caniuse-lite": "^1.0.30001332",
     "postcss": "8.4.14",
-    "styled-jsx": "5.0.2",
     "use-sync-external-store": "1.2.0"
   },
   "peerDependencies": {
@@ -258,6 +257,7 @@
     "string-hash": "1.1.3",
     "string_decoder": "1.3.0",
     "strip-ansi": "6.0.0",
+    "styled-jsx": "5.0.2",
     "tar": "6.1.11",
     "taskr": "1.1.0",
     "terser": "5.14.1",
diff --git a/packages/next/server/config-utils.ts b/packages/next/server/config-utils.ts
index 6d61b838597f..ff87e3e45c39 100644
--- a/packages/next/server/config-utils.ts
+++ b/packages/next/server/config-utils.ts
@@ -1,15 +1,16 @@
-export function createLoadRequireHook(callback?: () => void) {
-  let installed: boolean = false
+import { init as initWebpack } from 'next/dist/compiled/webpack/webpack'
 
-  return () => {
-    if (installed) {
-      return
-    }
-    installed = true
+let installed: boolean = false
 
-    callback?.()
-
-    // load mapped modules
-    require('../build/webpack/require-hook')
+export function loadWebpackHook() {
+  if (installed) {
+    return
   }
+  installed = true
+
+  initWebpack()
+
+  // hook the Node.js require so that webpack requires are
+  // routed to the bundled and now initialized webpack version
+  require('../build/webpack/require-hook')
 }
diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts
index 8ecb5630c613..6371d93a9cec 100644
--- a/packages/next/server/config.ts
+++ b/packages/next/server/config.ts
@@ -3,7 +3,6 @@ import { pathToFileURL } from 'url'
 import { Agent as HttpAgent } from 'http'
 import { Agent as HttpsAgent } from 'https'
 import findUp from 'next/dist/compiled/find-up'
-import { init as initWebpack } from 'next/dist/compiled/webpack/webpack'
 import chalk from '../lib/chalk'
 import * as Log from '../build/output/log'
 import { CONFIG_FILES, PHASE_DEVELOPMENT_SERVER } from '../shared/lib/constants'
@@ -15,7 +14,7 @@ import {
   NextConfigComplete,
   validateConfig,
 } from './config-shared'
-import { createLoadRequireHook } from './config-utils'
+import { loadWebpackHook } from './config-utils'
 import {
   ImageConfig,
   imageConfigDefault,
@@ -721,20 +720,13 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   return result
 }
 
-function loadWebpackHook() {
-  // hook the Node.js require so that webpack requires are
-  // routed to the bundled and now initialized webpack version
-  const initializeWebpackRequireHook = createLoadRequireHook(initWebpack)
-  initializeWebpackRequireHook()
-}
-
 export default async function loadConfig(
   phase: string,
   dir: string,
   customConfig?: object | null
 ): Promise<NextConfigComplete> {
   await loadEnvConfig(dir, phase === PHASE_DEVELOPMENT_SERVER, Log)
-  await loadWebpackHook()
+  loadWebpackHook()
 
   let configFileName = 'next.config.js'
 
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index 673e020ef01d..01f8bf070bf1 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -1,5 +1,6 @@
 import './node-polyfill-fetch'
 import './node-polyfill-web-streams'
+import '../build/webpack/require-hook'
 
 import type { TLSSocket } from 'tls'
 import type { Route } from './router'
@@ -27,7 +28,6 @@ import fs from 'fs'
 import { join, relative, resolve, sep } from 'path'
 import { IncomingMessage, ServerResponse } from 'http'
 import { addRequestMeta, getRequestMeta } from './request-meta'
-import { createLoadRequireHook } from './config-utils'
 import {
   PAGES_MANIFEST,
   BUILD_ID_FILE,
@@ -86,12 +86,6 @@ import { checkIsManualRevalidate } from './api-utils'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { shouldUseReactRoot } from './utils'
 
-function loadRequireHook() {
-  return createLoadRequireHook()
-}
-
-loadRequireHook()
-
 if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6247e2a2777..f771d955bd34 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3
-      styled-jsx: 5.0.2
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -308,7 +307,6 @@ importers:
       semver: 7.3.7
       shell-quote: 1.7.3
       styled-components: 5.3.3_vtcxgy2wlmese7djxl6h7ok674
-      styled-jsx: 5.0.2_uuaxwgga6hqycsez5ok7v2wg4i
       styled-jsx-plugin-postcss: 3.0.2
       tailwindcss: 1.1.3
       taskr: 1.1.0
@@ -586,7 +584,6 @@ importers:
       '@swc/helpers': 0.4.3
       caniuse-lite: 1.0.30001332
       postcss: 8.4.14
-      styled-jsx: 5.0.2_@babel+core@7.18.0
       use-sync-external-store: 1.2.0
     devDependencies:
       '@ampproject/toolbox-optimizer': 2.8.3
@@ -751,6 +748,7 @@ importers:
       string_decoder: 1.3.0
       string-hash: 1.1.3
       strip-ansi: 6.0.0
+      styled-jsx: 5.0.2_@babel+core@7.18.0
       tar: 6.1.11
       taskr: 1.1.0
       terser: 5.14.1
@@ -20563,23 +20561,6 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.18.0
-    dev: false
-
-  /styled-jsx/5.0.2_uuaxwgga6hqycsez5ok7v2wg4i:
-    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-    dependencies:
-      '@babel/core': 7.18.0
-      react: 18.2.0
     dev: true
 
   /stylehacks/4.0.3:
diff --git a/test/e2e/styled-jsx/app/next.config.js b/test/e2e/styled-jsx/app/next.config.js
deleted file mode 100644
index e97173b4b379..000000000000
--- a/test/e2e/styled-jsx/app/next.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  output: 'standalone',
-}
diff --git a/test/e2e/styled-jsx/app/pages/amp.js b/test/e2e/styled-jsx/app/pages/amp.js
new file mode 100644
index 000000000000..8f71fdbc5ce3
--- /dev/null
+++ b/test/e2e/styled-jsx/app/pages/amp.js
@@ -0,0 +1,12 @@
+import { Button } from 'my-comps/button'
+
+export const config = { amp: true }
+
+export default function page() {
+  return (
+    <>
+      <p>Hello world</p>
+      <Button>Click me</Button>
+    </>
+  )
+}
diff --git a/test/e2e/styled-jsx/app/pages/index.js b/test/e2e/styled-jsx/app/pages/index.js
index f59f1e3c318c..378661135fc9 100644
--- a/test/e2e/styled-jsx/app/pages/index.js
+++ b/test/e2e/styled-jsx/app/pages/index.js
@@ -1,4 +1,4 @@
-import { Button } from '../node_modules_bak/my-comps/button'
+import { Button } from 'my-comps/button'
 
 export default function Page() {
   return (
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index 6b4682d3694e..295e22ad6f0e 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
+import webdriver from 'next-webdriver'
 
 const appDir = path.join(__dirname, 'app')
 
@@ -16,7 +17,6 @@ function runTest(packageManager?: string) {
         files: {
           node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
           pages: new FileRef(path.join(appDir, 'pages')),
-          'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
           '.npmrc': new FileRef(path.join(appDir, '.npmrc')),
         },
         packageJson: {
@@ -41,13 +41,36 @@ function runTest(packageManager?: string) {
     })
     afterAll(() => next.destroy())
 
-    it('should contain styled-jsx styles in html', async () => {
+    it('should contain styled-jsx styles during SSR', async () => {
       const html = await renderViaHTTP(next.url, '/')
-      expect(html).toMatch(/color:(\s)*red/)
-      expect(html).toMatch(/color:(\s)*cyan/)
+      expect(html).toMatch(/color:.*?red/)
+      expect(html).toMatch(/color:.*?cyan/)
+    })
+
+    it('should render styles during CSR', async () => {
+      const browser = await webdriver(next.url, '/')
+      const color = await browser.eval(
+        `getComputedStyle(document.querySelector('button')).color`
+      )
+
+      expect(color).toMatch('0, 255, 255')
+    })
+
+    it('should render styles during CSR (AMP)', async () => {
+      const browser = await webdriver(next.url, '/amp')
+      const color = await browser.eval(
+        `getComputedStyle(document.querySelector('button')).color`
+      )
+
+      expect(color).toMatch('0, 255, 255')
+    })
+
+    it('should render styles during SSR (AMP)', async () => {
+      const html = await renderViaHTTP(next.url, '/amp')
+      expect(html).toMatch(/color:.*?cyan/)
     })
   })
 }
 
-runTest()
+// runTest()
 runTest('pnpm')
diff --git a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js b/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
index 7176c6258a9d..b52364b1c12c 100644
--- a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
+++ b/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
@@ -1,22 +1,37 @@
-'use strict';
+'use strict'
 
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, '__esModule', { value: true })
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+function _interopDefault(ex) {
+  return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex
+}
+
+var _JSXStyle = _interopDefault(require('styled-jsx/style'))
+var React = require('react')
 
-var _JSXStyle = _interopDefault(require('styled-jsx/style'));
-var React = require('react');
+if (typeof window === 'undefined') {
+  console.log('rr', require.resolve('styled-jsx'))
+}
 
 function Button() {
-  return React.createElement("button", {
-    className: "jsx-451104437"
-  }, "hello", React.createElement(_JSXStyle, {
-    id: "451104437"
-  }, ".jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */"));
+  return React.createElement(
+    'button',
+    {
+      className: 'jsx-451104437',
+    },
+    'hello',
+    React.createElement(
+      _JSXStyle,
+      {
+        id: '451104437',
+      },
+      '.jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */'
+    )
+  )
 }
 
 /**
  * @class ExampleComponent
  */
 
-exports.Button = Button;
\ No newline at end of file
+exports.Button = Button

From 96e2811052b3c142a2c86bac0a193485ad3bd5c6 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 22:26:58 +0200
Subject: [PATCH 14/20] rm legacy test

---
 .../app/node_modules/my-comps/button.js       | 37 ----------
 .../app/node_modules/my-comps/package.json    |  6 --
 .../styled-jsx-module/app/package.json        |  6 --
 .../styled-jsx-module/app/pages/amp.js        | 12 ----
 .../styled-jsx-module/app/pages/index.js      | 10 ---
 .../styled-jsx-module/test/index.test.js      | 69 -------------------
 6 files changed, 140 deletions(-)
 delete mode 100644 test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
 delete mode 100644 test/integration/styled-jsx-module/app/node_modules/my-comps/package.json
 delete mode 100644 test/integration/styled-jsx-module/app/package.json
 delete mode 100644 test/integration/styled-jsx-module/app/pages/amp.js
 delete mode 100644 test/integration/styled-jsx-module/app/pages/index.js
 delete mode 100644 test/integration/styled-jsx-module/test/index.test.js

diff --git a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js b/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
deleted file mode 100644
index b52364b1c12c..000000000000
--- a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict'
-
-Object.defineProperty(exports, '__esModule', { value: true })
-
-function _interopDefault(ex) {
-  return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex
-}
-
-var _JSXStyle = _interopDefault(require('styled-jsx/style'))
-var React = require('react')
-
-if (typeof window === 'undefined') {
-  console.log('rr', require.resolve('styled-jsx'))
-}
-
-function Button() {
-  return React.createElement(
-    'button',
-    {
-      className: 'jsx-451104437',
-    },
-    'hello',
-    React.createElement(
-      _JSXStyle,
-      {
-        id: '451104437',
-      },
-      '.jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */'
-    )
-  )
-}
-
-/**
- * @class ExampleComponent
- */
-
-exports.Button = Button
diff --git a/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json b/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json
deleted file mode 100644
index c0952cffa5d6..000000000000
--- a/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "my-comps",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT"
-}
diff --git a/test/integration/styled-jsx-module/app/package.json b/test/integration/styled-jsx-module/app/package.json
deleted file mode 100644
index b9506bee3387..000000000000
--- a/test/integration/styled-jsx-module/app/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "styled-jsx-module",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT"
-}
diff --git a/test/integration/styled-jsx-module/app/pages/amp.js b/test/integration/styled-jsx-module/app/pages/amp.js
deleted file mode 100644
index 5e3645d14252..000000000000
--- a/test/integration/styled-jsx-module/app/pages/amp.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Button } from 'my-comps/button'
-
-export const config = { amp: true }
-
-const Index = () => (
-  <>
-    <p>Hello world</p>
-    <Button>Click me</Button>
-  </>
-)
-
-export default Index
diff --git a/test/integration/styled-jsx-module/app/pages/index.js b/test/integration/styled-jsx-module/app/pages/index.js
deleted file mode 100644
index 3ebb08835bd2..000000000000
--- a/test/integration/styled-jsx-module/app/pages/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Button } from 'my-comps/button'
-
-const Index = () => (
-  <>
-    <p>Hello world</p>
-    <Button>Click me</Button>
-  </>
-)
-
-export default Index
diff --git a/test/integration/styled-jsx-module/test/index.test.js b/test/integration/styled-jsx-module/test/index.test.js
deleted file mode 100644
index 3bad07cb13c4..000000000000
--- a/test/integration/styled-jsx-module/test/index.test.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint-env jest */
-
-import { join } from 'path'
-import webdriver from 'next-webdriver'
-import {
-  killApp,
-  findPort,
-  nextStart,
-  nextBuild,
-  launchApp,
-  renderViaHTTP,
-} from 'next-test-utils'
-
-const appDir = join(__dirname, '../app')
-let appPort
-let app
-
-function runTests() {
-  it('should render styles during CSR', async () => {
-    const browser = await webdriver(appPort, '/')
-    const color = await browser.eval(
-      `getComputedStyle(document.querySelector('button')).color`
-    )
-
-    expect(color).toMatch('0, 255, 255')
-  })
-
-  it('should render styles during CSR (AMP)', async () => {
-    const browser = await webdriver(appPort, '/amp')
-    const color = await browser.eval(
-      `getComputedStyle(document.querySelector('button')).color`
-    )
-
-    expect(color).toMatch('0, 255, 255')
-  })
-
-  it('should render styles during SSR', async () => {
-    const html = await renderViaHTTP(appPort, '/')
-    expect(html).toMatch(/color:.*?cyan/)
-  })
-
-  it('should render styles during SSR (AMP)', async () => {
-    const html = await renderViaHTTP(appPort, '/amp')
-    expect(html).toMatch(/color:.*?cyan/)
-  })
-}
-
-describe('styled-jsx using in node_modules', () => {
-  describe('Production', () => {
-    beforeAll(async () => {
-      await nextBuild(appDir)
-      appPort = await findPort()
-      app = await nextStart(appDir, appPort)
-    })
-    afterAll(() => killApp(app))
-
-    runTests()
-  })
-
-  describe('Development', () => {
-    beforeAll(async () => {
-      appPort = await findPort()
-      app = await launchApp(appDir, appPort)
-    })
-    afterAll(() => killApp(app))
-
-    runTests()
-  })
-})

From e5f25ceb5e94d7493299fcb32780f1e98a1c086e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 22:36:47 +0200
Subject: [PATCH 15/20] fix lint

---
 packages/next/build/babel/preset.ts            | 4 ++--
 packages/next/shared/lib/styled-jsx/index.d.ts | 1 -
 packages/next/shared/lib/styled-jsx/index.js   | 1 -
 packages/next/shared/lib/styled-jsx/style.d.ts | 1 -
 packages/next/shared/lib/styled-jsx/style.js   | 1 -
 5 files changed, 2 insertions(+), 6 deletions(-)
 delete mode 100644 packages/next/shared/lib/styled-jsx/index.d.ts
 delete mode 100644 packages/next/shared/lib/styled-jsx/index.js
 delete mode 100644 packages/next/shared/lib/styled-jsx/style.d.ts
 delete mode 100644 packages/next/shared/lib/styled-jsx/style.js

diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
index 5ea2a647a5e9..a0fb85846dab 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('styled-jsx/babel-test')
-          : require('styled-jsx/babel'),
+          ? require('next/dist/styled-jsx/babel-test')
+          : require('next/dist/styled-jsx/babel'),
         styledJsxOptions(options['styled-jsx']),
       ],
       require('./plugins/amp-attributes'),
diff --git a/packages/next/shared/lib/styled-jsx/index.d.ts b/packages/next/shared/lib/styled-jsx/index.d.ts
deleted file mode 100644
index 3ee1cf7cf4b4..000000000000
--- a/packages/next/shared/lib/styled-jsx/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'styled-jsx'
diff --git a/packages/next/shared/lib/styled-jsx/index.js b/packages/next/shared/lib/styled-jsx/index.js
deleted file mode 100644
index a28adad1cbf5..000000000000
--- a/packages/next/shared/lib/styled-jsx/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('styled-jsx')
diff --git a/packages/next/shared/lib/styled-jsx/style.d.ts b/packages/next/shared/lib/styled-jsx/style.d.ts
deleted file mode 100644
index 716fb641fed5..000000000000
--- a/packages/next/shared/lib/styled-jsx/style.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx/style.js b/packages/next/shared/lib/styled-jsx/style.js
deleted file mode 100644
index a349928dce20..000000000000
--- a/packages/next/shared/lib/styled-jsx/style.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('styled-jsx/style')

From c02e0e06ae4e839ba97f2a8fed1ce15b17a53e43 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 8 Aug 2022 22:49:49 +0200
Subject: [PATCH 16/20] fix pnpm install error

---
 test/e2e/styled-jsx/app/.npmrc    | 1 +
 test/e2e/styled-jsx/index.test.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/e2e/styled-jsx/app/.npmrc b/test/e2e/styled-jsx/app/.npmrc
index 3e775efb0f40..4c2f52b3be71 100644
--- a/test/e2e/styled-jsx/app/.npmrc
+++ b/test/e2e/styled-jsx/app/.npmrc
@@ -1 +1,2 @@
 auto-install-peers=true
+strict-peer-dependencies=false
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index 295e22ad6f0e..beef99342927 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -28,7 +28,7 @@ function runTest(packageManager?: string) {
           },
         },
         dependencies: {
-          'styled-jsx': '4.0.0', // incompatible styled-jsx on user side
+          'styled-jsx': '5.0.0', // styled-jsx on user side
         },
         startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'),
         buildCommand: `yarn build`,

From efe7832033a00ac1ef6cdb626e0549286ca585f0 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 9 Aug 2022 00:04:54 +0200
Subject: [PATCH 17/20] split require hook

---
 packages/next/build/utils.ts                |   4 +-
 packages/next/build/webpack/require-hook.ts | 162 +++-----------------
 packages/next/export/worker.ts              |   3 +-
 packages/next/server/config-utils.ts        | 125 ++++++++++++++-
 packages/next/server/next-server.ts         |   4 +-
 5 files changed, 152 insertions(+), 146 deletions(-)

diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
index bc65ff42fb10..638088ff7f0d 100644
--- a/packages/next/build/utils.ts
+++ b/packages/next/build/utils.ts
@@ -1,7 +1,7 @@
 import type { NextConfigComplete, ServerRuntime } from '../server/config-shared'
 
 import '../server/node-polyfill-fetch'
-import '../build/webpack/require-hook'
+import loadRequireHook from '../build/webpack/require-hook'
 import chalk from 'next/dist/compiled/chalk'
 import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
@@ -60,6 +60,8 @@ const fsStat = (file: string) => {
   return (fileStats[file] = fileSize(file))
 }
 
+loadRequireHook()
+
 export interface PageInfo {
   isHybridAmp?: boolean
   size: number
diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index 60c72ebd613a..b3fa1a638956 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -2,147 +2,25 @@
 // this is in order for userland plugins to attach to the same webpack instance as next.js
 // the individual compiled modules are as defined for the compilation in bundles/webpack/packages/*
 
-const hookPropertyMap = new Map(
-  [
-    ['webpack', 'next/dist/compiled/webpack/webpack-lib'],
-    ['webpack/package', 'next/dist/compiled/webpack/package'],
-    ['webpack/package.json', 'next/dist/compiled/webpack/package'],
-    ['webpack/lib/webpack', 'next/dist/compiled/webpack/webpack-lib'],
-    ['webpack/lib/webpack.js', 'next/dist/compiled/webpack/webpack-lib'],
-    [
-      'webpack/lib/node/NodeEnvironmentPlugin',
-      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeEnvironmentPlugin.js',
-      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
-    ],
-    [
-      'webpack/lib/BasicEvaluatedExpression',
-      'next/dist/compiled/webpack/BasicEvaluatedExpression',
-    ],
-    [
-      'webpack/lib/BasicEvaluatedExpression.js',
-      'next/dist/compiled/webpack/BasicEvaluatedExpression',
-    ],
-    [
-      'webpack/lib/node/NodeTargetPlugin',
-      'next/dist/compiled/webpack/NodeTargetPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTargetPlugin.js',
-      'next/dist/compiled/webpack/NodeTargetPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTemplatePlugin',
-      'next/dist/compiled/webpack/NodeTemplatePlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTemplatePlugin.js',
-      'next/dist/compiled/webpack/NodeTemplatePlugin',
-    ],
-    [
-      'webpack/lib/LibraryTemplatePlugin',
-      'next/dist/compiled/webpack/LibraryTemplatePlugin',
-    ],
-    [
-      'webpack/lib/LibraryTemplatePlugin.js',
-      'next/dist/compiled/webpack/LibraryTemplatePlugin',
-    ],
-    [
-      'webpack/lib/SingleEntryPlugin',
-      'next/dist/compiled/webpack/SingleEntryPlugin',
-    ],
-    [
-      'webpack/lib/SingleEntryPlugin.js',
-      'next/dist/compiled/webpack/SingleEntryPlugin',
-    ],
-    [
-      'webpack/lib/optimize/LimitChunkCountPlugin',
-      'next/dist/compiled/webpack/LimitChunkCountPlugin',
-    ],
-    [
-      'webpack/lib/optimize/LimitChunkCountPlugin.js',
-      'next/dist/compiled/webpack/LimitChunkCountPlugin',
-    ],
-    [
-      'webpack/lib/webworker/WebWorkerTemplatePlugin',
-      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
-    ],
-    [
-      'webpack/lib/webworker/WebWorkerTemplatePlugin.js',
-      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
-    ],
-    [
-      'webpack/lib/ExternalsPlugin',
-      'next/dist/compiled/webpack/ExternalsPlugin',
-    ],
-    [
-      'webpack/lib/ExternalsPlugin.js',
-      'next/dist/compiled/webpack/ExternalsPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmTemplatePlugin',
-      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmTemplatePlugin.js',
-      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmPlugin',
-      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmPlugin.js',
-      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileAsyncWasmPlugin',
-      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileAsyncWasmPlugin.js',
-      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
-    ],
-    [
-      'webpack/lib/ModuleFilenameHelpers',
-      'next/dist/compiled/webpack/ModuleFilenameHelpers',
-    ],
-    [
-      'webpack/lib/ModuleFilenameHelpers.js',
-      'next/dist/compiled/webpack/ModuleFilenameHelpers',
-    ],
-    ['webpack/lib/GraphHelpers', 'next/dist/compiled/webpack/GraphHelpers'],
-    ['webpack/lib/GraphHelpers.js', 'next/dist/compiled/webpack/GraphHelpers'],
-    ['webpack/lib/NormalModule', 'next/dist/compiled/webpack/NormalModule'],
-    ['webpack-sources', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib/index', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib/index.js', 'next/dist/compiled/webpack/sources'],
-    ['@babel/runtime', 'next/dist/compiled/@babel/runtime/package.json'],
-    [
-      '@babel/runtime/package.json',
-      'next/dist/compiled/@babel/runtime/package.json',
-    ],
-    ['node-fetch', 'next/dist/compiled/node-fetch'],
-    ['styled-jsx', 'next/dist/styled-jsx'],
-    ['styled-jsx/style', 'next/dist/styled-jsx/style'],
-  ].map(([request, replacement]) => [request, require.resolve(replacement)])
-)
+export default function loadRequireHook(aliases: [string, string][] = []) {
+  const hookPropertyMap = new Map(
+    [
+      ...aliases,
+      ['styled-jsx', 'next/dist/styled-jsx'],
+      ['styled-jsx/style', 'next/dist/styled-jsx/style'],
+    ].map(([request, replacement]) => [request, require.resolve(replacement)])
+  )
 
-const mod = require('module')
-const resolveFilename = mod._resolveFilename
-mod._resolveFilename = function (
-  request: string,
-  parent: any,
-  isMain: boolean,
-  options: any
-) {
-  const hookResolved = hookPropertyMap.get(request)
-  if (hookResolved) request = hookResolved
-  return resolveFilename.call(mod, request, parent, isMain, options)
+  const mod = require('module')
+  const resolveFilename = mod._resolveFilename
+  mod._resolveFilename = function (
+    request: string,
+    parent: any,
+    isMain: boolean,
+    options: any
+  ) {
+    const hookResolved = hookPropertyMap.get(request)
+    if (hookResolved) request = hookResolved
+    return resolveFilename.call(mod, request, parent, isMain, options)
+  }
 }
-
-// Flag as module for typescript
-export {}
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 803b3f3435d6..a23262711fec 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -6,7 +6,7 @@ import type { NextConfigComplete } from '../server/config-shared'
 import type { NextParsedUrlQuery } from '../server/request-meta'
 
 import '../server/node-polyfill-fetch'
-import '../build/webpack/require-hook'
+import loadRequireHook from '../build/webpack/require-hook'
 
 import url from 'url'
 import { extname, join, dirname, sep } from 'path'
@@ -27,6 +27,7 @@ import { setHttpAgentOptions } from '../server/config'
 import RenderResult from '../server/render-result'
 import isError from '../lib/is-error'
 
+loadRequireHook()
 const envConfig = require('../shared/lib/runtime-config')
 
 ;(global as any).__NEXT_DATA__ = {
diff --git a/packages/next/server/config-utils.ts b/packages/next/server/config-utils.ts
index ff87e3e45c39..4e83b432fab6 100644
--- a/packages/next/server/config-utils.ts
+++ b/packages/next/server/config-utils.ts
@@ -12,5 +12,128 @@ export function loadWebpackHook() {
 
   // hook the Node.js require so that webpack requires are
   // routed to the bundled and now initialized webpack version
-  require('../build/webpack/require-hook')
+  require('../build/webpack/require-hook').default([
+    ['webpack', 'next/dist/compiled/webpack/webpack-lib'],
+    ['webpack/package', 'next/dist/compiled/webpack/package'],
+    ['webpack/package.json', 'next/dist/compiled/webpack/package'],
+    ['webpack/lib/webpack', 'next/dist/compiled/webpack/webpack-lib'],
+    ['webpack/lib/webpack.js', 'next/dist/compiled/webpack/webpack-lib'],
+    [
+      'webpack/lib/node/NodeEnvironmentPlugin',
+      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
+    ],
+    [
+      'webpack/lib/node/NodeEnvironmentPlugin.js',
+      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
+    ],
+    [
+      'webpack/lib/BasicEvaluatedExpression',
+      'next/dist/compiled/webpack/BasicEvaluatedExpression',
+    ],
+    [
+      'webpack/lib/BasicEvaluatedExpression.js',
+      'next/dist/compiled/webpack/BasicEvaluatedExpression',
+    ],
+    [
+      'webpack/lib/node/NodeTargetPlugin',
+      'next/dist/compiled/webpack/NodeTargetPlugin',
+    ],
+    [
+      'webpack/lib/node/NodeTargetPlugin.js',
+      'next/dist/compiled/webpack/NodeTargetPlugin',
+    ],
+    [
+      'webpack/lib/node/NodeTemplatePlugin',
+      'next/dist/compiled/webpack/NodeTemplatePlugin',
+    ],
+    [
+      'webpack/lib/node/NodeTemplatePlugin.js',
+      'next/dist/compiled/webpack/NodeTemplatePlugin',
+    ],
+    [
+      'webpack/lib/LibraryTemplatePlugin',
+      'next/dist/compiled/webpack/LibraryTemplatePlugin',
+    ],
+    [
+      'webpack/lib/LibraryTemplatePlugin.js',
+      'next/dist/compiled/webpack/LibraryTemplatePlugin',
+    ],
+    [
+      'webpack/lib/SingleEntryPlugin',
+      'next/dist/compiled/webpack/SingleEntryPlugin',
+    ],
+    [
+      'webpack/lib/SingleEntryPlugin.js',
+      'next/dist/compiled/webpack/SingleEntryPlugin',
+    ],
+    [
+      'webpack/lib/optimize/LimitChunkCountPlugin',
+      'next/dist/compiled/webpack/LimitChunkCountPlugin',
+    ],
+    [
+      'webpack/lib/optimize/LimitChunkCountPlugin.js',
+      'next/dist/compiled/webpack/LimitChunkCountPlugin',
+    ],
+    [
+      'webpack/lib/webworker/WebWorkerTemplatePlugin',
+      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
+    ],
+    [
+      'webpack/lib/webworker/WebWorkerTemplatePlugin.js',
+      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
+    ],
+    [
+      'webpack/lib/ExternalsPlugin',
+      'next/dist/compiled/webpack/ExternalsPlugin',
+    ],
+    [
+      'webpack/lib/ExternalsPlugin.js',
+      'next/dist/compiled/webpack/ExternalsPlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileWasmTemplatePlugin',
+      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileWasmTemplatePlugin.js',
+      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileWasmPlugin',
+      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileWasmPlugin.js',
+      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileAsyncWasmPlugin',
+      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
+    ],
+    [
+      'webpack/lib/web/FetchCompileAsyncWasmPlugin.js',
+      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
+    ],
+    [
+      'webpack/lib/ModuleFilenameHelpers',
+      'next/dist/compiled/webpack/ModuleFilenameHelpers',
+    ],
+    [
+      'webpack/lib/ModuleFilenameHelpers.js',
+      'next/dist/compiled/webpack/ModuleFilenameHelpers',
+    ],
+    ['webpack/lib/GraphHelpers', 'next/dist/compiled/webpack/GraphHelpers'],
+    ['webpack/lib/GraphHelpers.js', 'next/dist/compiled/webpack/GraphHelpers'],
+    ['webpack/lib/NormalModule', 'next/dist/compiled/webpack/NormalModule'],
+    ['webpack-sources', 'next/dist/compiled/webpack/sources'],
+    ['webpack-sources/lib', 'next/dist/compiled/webpack/sources'],
+    ['webpack-sources/lib/index', 'next/dist/compiled/webpack/sources'],
+    ['webpack-sources/lib/index.js', 'next/dist/compiled/webpack/sources'],
+    ['@babel/runtime', 'next/dist/compiled/@babel/runtime/package.json'],
+    [
+      '@babel/runtime/package.json',
+      'next/dist/compiled/@babel/runtime/package.json',
+    ],
+    ['node-fetch', 'next/dist/compiled/node-fetch'],
+  ])
 }
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index 01f8bf070bf1..209e93d35890 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -1,6 +1,5 @@
 import './node-polyfill-fetch'
 import './node-polyfill-web-streams'
-import '../build/webpack/require-hook'
 
 import type { TLSSocket } from 'tls'
 import type { Route } from './router'
@@ -56,6 +55,7 @@ import { RenderOpts, renderToHTML } from './render'
 import { renderToHTMLOrFlight as appRenderToHTMLOrFlight } from './app-render'
 import { ParsedUrl, parseUrl } from '../shared/lib/router/utils/parse-url'
 import * as Log from '../build/output/log'
+import loadRequireHook from '../build/webpack/require-hook'
 
 import BaseServer, {
   Options,
@@ -90,6 +90,8 @@ if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }
 
+loadRequireHook()
+
 export * from './base-server'
 
 type ExpressMiddleware = (

From b20dd63b4194590aed59d934004c4833ec00b841 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 9 Aug 2022 00:18:18 +0200
Subject: [PATCH 18/20] only alias styled-jsx

---
 packages/next/build/webpack/require-hook.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index b3fa1a638956..d8771be55b8d 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -4,11 +4,9 @@
 
 export default function loadRequireHook(aliases: [string, string][] = []) {
   const hookPropertyMap = new Map(
-    [
-      ...aliases,
-      ['styled-jsx', 'next/dist/styled-jsx'],
-      ['styled-jsx/style', 'next/dist/styled-jsx/style'],
-    ].map(([request, replacement]) => [request, require.resolve(replacement)])
+    [...aliases, ['styled-jsx', 'next/dist/styled-jsx']].map(
+      ([request, replacement]) => [request, require.resolve(replacement)]
+    )
   )
 
   const mod = require('module')

From e857da6d992c17e553477bf8218abc751908cbaf Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 9 Aug 2022 00:30:08 +0200
Subject: [PATCH 19/20] make styled-jsx resolving statically analyzable

---
 packages/next/build/webpack/require-hook.ts |   9 +-
 packages/next/server/config-utils.ts        | 256 ++++++++++----------
 test/e2e/styled-jsx/index.test.ts           |   2 +-
 3 files changed, 139 insertions(+), 128 deletions(-)

diff --git a/packages/next/build/webpack/require-hook.ts b/packages/next/build/webpack/require-hook.ts
index d8771be55b8d..74c2aa128de3 100644
--- a/packages/next/build/webpack/require-hook.ts
+++ b/packages/next/build/webpack/require-hook.ts
@@ -4,9 +4,12 @@
 
 export default function loadRequireHook(aliases: [string, string][] = []) {
   const hookPropertyMap = new Map(
-    [...aliases, ['styled-jsx', 'next/dist/styled-jsx']].map(
-      ([request, replacement]) => [request, require.resolve(replacement)]
-    )
+    [
+      ...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')],
+    ].map(([request, replacement]) => [request, replacement])
   )
 
   const mod = require('module')
diff --git a/packages/next/server/config-utils.ts b/packages/next/server/config-utils.ts
index 4e83b432fab6..90e763f7eb82 100644
--- a/packages/next/server/config-utils.ts
+++ b/packages/next/server/config-utils.ts
@@ -12,128 +12,136 @@ export function loadWebpackHook() {
 
   // hook the Node.js require so that webpack requires are
   // routed to the bundled and now initialized webpack version
-  require('../build/webpack/require-hook').default([
-    ['webpack', 'next/dist/compiled/webpack/webpack-lib'],
-    ['webpack/package', 'next/dist/compiled/webpack/package'],
-    ['webpack/package.json', 'next/dist/compiled/webpack/package'],
-    ['webpack/lib/webpack', 'next/dist/compiled/webpack/webpack-lib'],
-    ['webpack/lib/webpack.js', 'next/dist/compiled/webpack/webpack-lib'],
-    [
-      'webpack/lib/node/NodeEnvironmentPlugin',
-      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeEnvironmentPlugin.js',
-      'next/dist/compiled/webpack/NodeEnvironmentPlugin',
-    ],
-    [
-      'webpack/lib/BasicEvaluatedExpression',
-      'next/dist/compiled/webpack/BasicEvaluatedExpression',
-    ],
-    [
-      'webpack/lib/BasicEvaluatedExpression.js',
-      'next/dist/compiled/webpack/BasicEvaluatedExpression',
-    ],
-    [
-      'webpack/lib/node/NodeTargetPlugin',
-      'next/dist/compiled/webpack/NodeTargetPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTargetPlugin.js',
-      'next/dist/compiled/webpack/NodeTargetPlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTemplatePlugin',
-      'next/dist/compiled/webpack/NodeTemplatePlugin',
-    ],
-    [
-      'webpack/lib/node/NodeTemplatePlugin.js',
-      'next/dist/compiled/webpack/NodeTemplatePlugin',
-    ],
-    [
-      'webpack/lib/LibraryTemplatePlugin',
-      'next/dist/compiled/webpack/LibraryTemplatePlugin',
-    ],
-    [
-      'webpack/lib/LibraryTemplatePlugin.js',
-      'next/dist/compiled/webpack/LibraryTemplatePlugin',
-    ],
-    [
-      'webpack/lib/SingleEntryPlugin',
-      'next/dist/compiled/webpack/SingleEntryPlugin',
-    ],
-    [
-      'webpack/lib/SingleEntryPlugin.js',
-      'next/dist/compiled/webpack/SingleEntryPlugin',
-    ],
-    [
-      'webpack/lib/optimize/LimitChunkCountPlugin',
-      'next/dist/compiled/webpack/LimitChunkCountPlugin',
-    ],
-    [
-      'webpack/lib/optimize/LimitChunkCountPlugin.js',
-      'next/dist/compiled/webpack/LimitChunkCountPlugin',
-    ],
-    [
-      'webpack/lib/webworker/WebWorkerTemplatePlugin',
-      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
-    ],
-    [
-      'webpack/lib/webworker/WebWorkerTemplatePlugin.js',
-      'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
-    ],
-    [
-      'webpack/lib/ExternalsPlugin',
-      'next/dist/compiled/webpack/ExternalsPlugin',
-    ],
-    [
-      'webpack/lib/ExternalsPlugin.js',
-      'next/dist/compiled/webpack/ExternalsPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmTemplatePlugin',
-      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmTemplatePlugin.js',
-      'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmPlugin',
-      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileWasmPlugin.js',
-      'next/dist/compiled/webpack/FetchCompileWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileAsyncWasmPlugin',
-      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
-    ],
-    [
-      'webpack/lib/web/FetchCompileAsyncWasmPlugin.js',
-      'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
-    ],
-    [
-      'webpack/lib/ModuleFilenameHelpers',
-      'next/dist/compiled/webpack/ModuleFilenameHelpers',
-    ],
-    [
-      'webpack/lib/ModuleFilenameHelpers.js',
-      'next/dist/compiled/webpack/ModuleFilenameHelpers',
-    ],
-    ['webpack/lib/GraphHelpers', 'next/dist/compiled/webpack/GraphHelpers'],
-    ['webpack/lib/GraphHelpers.js', 'next/dist/compiled/webpack/GraphHelpers'],
-    ['webpack/lib/NormalModule', 'next/dist/compiled/webpack/NormalModule'],
-    ['webpack-sources', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib/index', 'next/dist/compiled/webpack/sources'],
-    ['webpack-sources/lib/index.js', 'next/dist/compiled/webpack/sources'],
-    ['@babel/runtime', 'next/dist/compiled/@babel/runtime/package.json'],
-    [
-      '@babel/runtime/package.json',
-      'next/dist/compiled/@babel/runtime/package.json',
-    ],
-    ['node-fetch', 'next/dist/compiled/node-fetch'],
-  ])
+  require('../build/webpack/require-hook').default(
+    [
+      ['webpack', 'next/dist/compiled/webpack/webpack-lib'],
+      ['webpack/package', 'next/dist/compiled/webpack/package'],
+      ['webpack/package.json', 'next/dist/compiled/webpack/package'],
+      ['webpack/lib/webpack', 'next/dist/compiled/webpack/webpack-lib'],
+      ['webpack/lib/webpack.js', 'next/dist/compiled/webpack/webpack-lib'],
+      [
+        'webpack/lib/node/NodeEnvironmentPlugin',
+        'next/dist/compiled/webpack/NodeEnvironmentPlugin',
+      ],
+      [
+        'webpack/lib/node/NodeEnvironmentPlugin.js',
+        'next/dist/compiled/webpack/NodeEnvironmentPlugin',
+      ],
+      [
+        'webpack/lib/BasicEvaluatedExpression',
+        'next/dist/compiled/webpack/BasicEvaluatedExpression',
+      ],
+      [
+        'webpack/lib/BasicEvaluatedExpression.js',
+        'next/dist/compiled/webpack/BasicEvaluatedExpression',
+      ],
+      [
+        'webpack/lib/node/NodeTargetPlugin',
+        'next/dist/compiled/webpack/NodeTargetPlugin',
+      ],
+      [
+        'webpack/lib/node/NodeTargetPlugin.js',
+        'next/dist/compiled/webpack/NodeTargetPlugin',
+      ],
+      [
+        'webpack/lib/node/NodeTemplatePlugin',
+        'next/dist/compiled/webpack/NodeTemplatePlugin',
+      ],
+      [
+        'webpack/lib/node/NodeTemplatePlugin.js',
+        'next/dist/compiled/webpack/NodeTemplatePlugin',
+      ],
+      [
+        'webpack/lib/LibraryTemplatePlugin',
+        'next/dist/compiled/webpack/LibraryTemplatePlugin',
+      ],
+      [
+        'webpack/lib/LibraryTemplatePlugin.js',
+        'next/dist/compiled/webpack/LibraryTemplatePlugin',
+      ],
+      [
+        'webpack/lib/SingleEntryPlugin',
+        'next/dist/compiled/webpack/SingleEntryPlugin',
+      ],
+      [
+        'webpack/lib/SingleEntryPlugin.js',
+        'next/dist/compiled/webpack/SingleEntryPlugin',
+      ],
+      [
+        'webpack/lib/optimize/LimitChunkCountPlugin',
+        'next/dist/compiled/webpack/LimitChunkCountPlugin',
+      ],
+      [
+        'webpack/lib/optimize/LimitChunkCountPlugin.js',
+        'next/dist/compiled/webpack/LimitChunkCountPlugin',
+      ],
+      [
+        'webpack/lib/webworker/WebWorkerTemplatePlugin',
+        'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
+      ],
+      [
+        'webpack/lib/webworker/WebWorkerTemplatePlugin.js',
+        'next/dist/compiled/webpack/WebWorkerTemplatePlugin',
+      ],
+      [
+        'webpack/lib/ExternalsPlugin',
+        'next/dist/compiled/webpack/ExternalsPlugin',
+      ],
+      [
+        'webpack/lib/ExternalsPlugin.js',
+        'next/dist/compiled/webpack/ExternalsPlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileWasmTemplatePlugin',
+        'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileWasmTemplatePlugin.js',
+        'next/dist/compiled/webpack/FetchCompileWasmTemplatePlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileWasmPlugin',
+        'next/dist/compiled/webpack/FetchCompileWasmPlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileWasmPlugin.js',
+        'next/dist/compiled/webpack/FetchCompileWasmPlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileAsyncWasmPlugin',
+        'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
+      ],
+      [
+        'webpack/lib/web/FetchCompileAsyncWasmPlugin.js',
+        'next/dist/compiled/webpack/FetchCompileAsyncWasmPlugin',
+      ],
+      [
+        'webpack/lib/ModuleFilenameHelpers',
+        'next/dist/compiled/webpack/ModuleFilenameHelpers',
+      ],
+      [
+        'webpack/lib/ModuleFilenameHelpers.js',
+        'next/dist/compiled/webpack/ModuleFilenameHelpers',
+      ],
+      ['webpack/lib/GraphHelpers', 'next/dist/compiled/webpack/GraphHelpers'],
+      [
+        'webpack/lib/GraphHelpers.js',
+        'next/dist/compiled/webpack/GraphHelpers',
+      ],
+      ['webpack/lib/NormalModule', 'next/dist/compiled/webpack/NormalModule'],
+      ['webpack-sources', 'next/dist/compiled/webpack/sources'],
+      ['webpack-sources/lib', 'next/dist/compiled/webpack/sources'],
+      ['webpack-sources/lib/index', 'next/dist/compiled/webpack/sources'],
+      ['webpack-sources/lib/index.js', 'next/dist/compiled/webpack/sources'],
+      ['@babel/runtime', 'next/dist/compiled/@babel/runtime/package.json'],
+      [
+        '@babel/runtime/package.json',
+        'next/dist/compiled/@babel/runtime/package.json',
+      ],
+      ['node-fetch', 'next/dist/compiled/node-fetch'],
+    ].map(
+      // Use dynamic require.resolve to avoid statically analyzable since they're only for build time
+      ([request, replacement]) => [request, require.resolve(replacement)]
+    )
+  )
 }
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index beef99342927..8f0b30958d39 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -72,5 +72,5 @@ function runTest(packageManager?: string) {
   })
 }
 
-// runTest()
+runTest()
 runTest('pnpm')

From 7c8482e08130df9014bb6d2e24d5a25ca218663d Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 8 Aug 2022 19:33:33 -0500
Subject: [PATCH 20/20] update test

---
 test/e2e/styled-jsx/index.test.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
index 8f0b30958d39..aa22928ece66 100644
--- a/test/e2e/styled-jsx/index.test.ts
+++ b/test/e2e/styled-jsx/index.test.ts
@@ -6,10 +6,8 @@ import webdriver from 'next-webdriver'
 
 const appDir = path.join(__dirname, 'app')
 
-function runTest(packageManager?: string) {
-  describe(`styled-jsx with ${
-    packageManager ? ' ' + packageManager : ''
-  }`, () => {
+function runTest() {
+  describe(`styled-jsx`, () => {
     let next: NextInstance
 
     beforeAll(async () => {
@@ -32,11 +30,6 @@ function runTest(packageManager?: string) {
         },
         startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'),
         buildCommand: `yarn build`,
-        ...(packageManager
-          ? {
-              installCommand: `npx ${packageManager} install`,
-            }
-          : {}),
       })
     })
     afterAll(() => next.destroy())
@@ -73,4 +66,3 @@ function runTest(packageManager?: string) {
 }
 
 runTest()
-runTest('pnpm')