vercel · kodiakhq · Apr 30, 2022 · Apr 30, 2022 · Apr 30, 2022 · Apr 30, 2022
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -629,6 +629,9 @@ jobs:
       - run: xvfb-run node run-tests.js --timings -g ${{ matrix.group }}/18
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
+      - run: NEXT_TEST_MODE=start PKG_MANAGER=pnpm xvfb-run node run-tests.js test/e2e/styled-jsx/index.test.ts
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
       - name: Upload test trace
         if: always()
         uses: actions/upload-artifact@v2

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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function Foo() {
     return /*#__PURE__*/ React.createElement("div", {
         render: function(v) {

diff --git a/packages/next-swc/crates/styled_jsx/src/utils.rs b/packages/next-swc/crates/styled_jsx/src/utils.rs
@@ -310,7 +310,7 @@ pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
         })],
         src: Str {
             span: DUMMY_SP,
-            value: "styled-jsx/style".into(),
+            value: "next/dist/shared/lib/styled-jsx".into(),
             raw: None,
         },
     }))

diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>

diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/ts-with-css-resolve/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default {
     styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"

diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>

diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>

diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div >
 
     <style jsx>

diff --git a/...xt-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js b/...xt-swc/crates/styled_jsx/tests/fixture/attribute-generation-classname-rewriting/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=>{
     const Element = 'div';
     return <div className={"jsx-abb4c2202db1a207"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 const styles2 = require('./styles2');
 // external only

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/class/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/comments/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-1952086b0a5ae64c"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-selector-after-pseudo/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 function NavigationItem({ active , className ,  }) {
     return <span className={"jsx-2342aae4628612c6" + " " + (cn({
         active

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
     <p className={`jsx-${styles.__hash}`}>{children}</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const color = 'red';
 const otherColor = 'green';
 const A = ()=><div className={"jsx-498d4e86e548e679"}>

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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         const Element = 'div';

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element-external/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles2';
 export default (({ level =1  })=>{
     const Element = `h${level}`;

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/dynamic-element/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ level =1  })=>{
     const Element = `h${level}`;
     return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const darken = (c)=>c
 ;
 const color = 'red';

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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 function test() {
     ({
         styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles, { foo as styles3 } from './styles';
 const styles2 = require('./styles2');
 export default (()=><div >

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 export default (()=><div className={`jsx-${styles.__hash}`}>
 

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import styles from './styles';
 const styles2 = require('./styles2');
 import { foo as styles3 } from './styles';

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import React from 'react';
 export default (()=><>
 

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <span className={"jsx-5a206f122d1cb32e"}>test</span>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-redundant/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function IndexPage() {
     return <div className={"jsx-b6abd0684ba81871"}>
 

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
     <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
         [
             "1568e0a11702cf40",

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/input.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30570/input.js
@@ -2,7 +2,7 @@ export default function IndexPage() {
     return (
       <div>
         <h1>Hello World.</h1>
-  
+
         <style jsx global>{`
           @supports (display: flex) {
             h1 {

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
@@ -1,10 +1,10 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function IndexPage() {
     return <div className={"jsx-bbdada4ef17d18ef"}>
 
         <h1 className={"jsx-bbdada4ef17d18ef"}>Hello World.</h1>
 
-  
+
 
         <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports(display:flex){h1{color:hotpink}}"}</_JSXStyle>
 

diff --git a/...ages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js b/...ages/next-swc/crates/styled_jsx/tests/fixture/issue-31562-interpolation-in-mdea/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>
 ;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 const attrs = {
     id: 'test'
 };

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/number-after-placeholder/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import Link from "next/link";
 export default function IndexPage() {
     return <div className={"jsx-2339e3d61ab4470c"}>

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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
 
     <p className={"jsx-c7c3a8e231c9215a"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/styles/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 import colors, { size } from './constants';
 const color = 'red';
 const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/too-many/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export const Red = ({ Component ='button' ,  })=>{
     return <Component className={_JSXStyle.dynamic([
         [

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={"jsx-1f6cef12199c3a8f"}>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-escape-2/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default function Home({ fontFamily  }) {
     return <div className={_JSXStyle.dynamic([
         [

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-1-as-property/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/...ges/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js b/...ges/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/tpl-placeholder-3-as-value/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/.../crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js b/.../crates/styled_jsx/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/...crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js b/...crates/styled_jsx/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default class {
     render() {
         return <div className={_JSXStyle.dynamic([

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <p className={"jsx-53fd644ab080300c"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <p className={"jsx-1f7963ae04c6466a"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <p className={"jsx-1a19bb4817c105dd"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <p className={"jsx-938ca197692ef624"}>test</p>

diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
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
@@ -1,4 +1,4 @@
-import _JSXStyle from "styled-jsx/style";
+import _JSXStyle from "next/dist/shared/lib/styled-jsx";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>

diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
@@ -8,15 +8,15 @@ type StyledJsxPlugin = [string, any] | string
 type StyledJsxBabelOptions =
   | {
       plugins?: StyledJsxPlugin[]
+      styleModule?: string
       'babel-test'?: boolean
     }
   | undefined
 
 // Resolve styled-jsx plugins
 function styledJsxOptions(options: StyledJsxBabelOptions) {
-  if (!options) {
-    return {}
-  }
+  options = options || {}
+  options.styleModule = 'next/dist/shared/lib/styled-jsx'
 
   if (!Array.isArray(options.plugins)) {
     return options

diff --git a/packages/next/shared/lib/styled-jsx.d.ts b/packages/next/shared/lib/styled-jsx.d.ts
@@ -0,0 +1 @@
+export default function JSXStyle(props: any): null
diff --git a/packages/next/shared/lib/styled-jsx.js b/packages/next/shared/lib/styled-jsx.js
@@ -0,0 +1 @@
+module.exports = require('styled-jsx/style')
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
@@ -0,0 +1,35 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import cheerio from 'cheerio'
+
+describe('styled-jsx', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() {
+            return (
+              <div>
+                <style jsx>{'p { color: red; }'}</style>
+                <p>hello world</p>
+              </div>
+            )
+          }
+        `,
+      },
+      ...(!!process.env.PKG_MANAGER && {
+        installCommand: `${process.env.PKG_MANAGER} install`,
+      }),
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should contain styled-jsx styles in html', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    const $ = cheerio.load(html)
+    expect($('head').text()).toContain('color:red')
+  })
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default function JSXStyle(props: any): null