@swc/plugin-styled-jsx 1.3.0 → 1.5.2

package/tests/fixture/dynamic-this-in-arrow/input.js

@@ -0,0 +1,41 @@
+// TODO
+// import React, { Component } from 'react'
+
+// export default class Index extends Component {
+//   static getInitialProps() {
+//     return { color: 'aquamarine' }
+//   }
+
+//   render() {
+//     return (
+//       <div>
+//         {[1, 2].map(idx => (
+//           <div key={idx}>
+//             {[3, 4].map(idx2 => (
+//               <div key={idx2}>{this.props.color}</div>
+//             ))}
+//           </div>
+//         ))}
+//         {[1, 2].map(idx => (
+//           <div key={idx}>
+//             <div>
+//               {this.props.color}
+//               <div className="something">
+//                 <React.Fragment>
+//                   <div>
+//                     <div>{this.props.color} hello there</div>
+//                   </div>
+//                 </React.Fragment>
+//               </div>
+//             </div>
+//           </div>
+//         ))}
+//         <style jsx>{`
+//           div {
+//             background: ${this.props.color};
+//           }
+//         `}</style>
+//       </div>
+//     )
+//   }
+// }

package/tests/fixture/dynamic-this-in-arrow/output.js

@@ -0,0 +1,39 @@
+// TODO
+// import React, { Component } from 'react'
+// export default class Index extends Component {
+//   static getInitialProps() {
+//     return { color: 'aquamarine' }
+//   }
+//   render() {
+//     return (
+//       <div>
+//         {[1, 2].map(idx => (
+//           <div key={idx}>
+//             {[3, 4].map(idx2 => (
+//               <div key={idx2}>{this.props.color}</div>
+//             ))}
+//           </div>
+//         ))}
+//         {[1, 2].map(idx => (
+//           <div key={idx}>
+//             <div>
+//               {this.props.color}
+//               <div className="something">
+//                 <React.Fragment>
+//                   <div>
+//                     <div>{this.props.color} hello there</div>
+//                   </div>
+//                 </React.Fragment>
+//               </div>
+//             </div>
+//           </div>
+//         ))}
+//         <style jsx>{`
+//           div {
+//             background: ${this.props.color};
+//           }
+//         `}</style>
+//       </div>
+//     )
+//   }
+// }

package/tests/fixture/exported-jsx-style/input.js

@@ -0,0 +1 @@
+// module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>

package/tests/fixture/exported-jsx-style/output.js

@@ -0,0 +1 @@
+// module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>

package/tests/fixture/exported-non-jsx-style/input.js

@@ -0,0 +1 @@
+// module.exports = () => <p><style>{`p { color:red; }`}</style></p>

package/tests/fixture/exported-non-jsx-style/output.js

@@ -0,0 +1 @@
+// module.exports = () => <p><style>{`p { color:red; }`}</style></p>

package/tests/fixture/expressions/input.js

@@ -0,0 +1,90 @@
+const darken = c => c
+const color = 'red'
+const otherColor = 'green'
+const mediumScreen = '680px'
+const animationDuration = '200ms'
+const animationName = 'my-cool-animation'
+const obj = { display: 'block' }
+
+export default ({ display }) => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      p.${color} {
+        color: ${otherColor};
+        display: ${obj.display};
+      }
+    `}</style>
+    <style jsx>{'p { color: red }'}</style>
+    <style jsx global>{`
+      body {
+        background: ${color};
+      }
+    `}</style>
+    <style jsx global>{`
+      body {
+        background: ${color};
+      }
+    `}</style>
+    // TODO: the next two should have the same hash
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: ${darken(color)};
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: ${darken(color) + 2};
+      }
+    `}</style>
+    <style jsx>{`
+      @media (min-width: ${mediumScreen}) {
+        p {
+          color: green;
+        }
+        p {
+          color: ${`red`};
+        }
+      }
+      p {
+        color: red;
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        animation-duration: ${animationDuration};
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        animation: ${animationDuration} forwards ${animationName};
+      }
+      div {
+        background: ${color};
+      }
+    `}</style>
+
+    <style jsx>{`
+      span {
+        display: ${display ? 'block' : 'none'};
+      }
+    `}</style>
+    // TODO: causes bad syntax
+    {/* <style jsx>{`
+      span:before {
+        display: ${display ? 'block' : 'none'};
+        content: '\`';
+      }
+    `}</style> */}
+  </div>
+)

package/tests/fixture/expressions/output.js

@@ -0,0 +1,91 @@
+import _JSXStyle from "styled-jsx/style";
+const darken = (c)=>c;
+const color = 'red';
+const otherColor = 'green';
+const mediumScreen = '680px';
+const animationDuration = '200ms';
+const animationName = 'my-cool-animation';
+const obj = {
+    display: 'block'
+};
+export default (({ display  })=><div className={"jsx-b452af554142d27 " + _JSXStyle.dynamic([
+        [
+            "469c0b1cc43512b8",
+            [
+                display ? 'block' : 'none'
+            ]
+        ],
+        [
+            "d05e300c372f73ee",
+            [
+                darken(color) + 2
+            ]
+        ],
+        [
+            "72e421eb2017491a",
+            [
+                darken(color)
+            ]
+        ]
+    ])}>
+
+    <p className={"jsx-b452af554142d27 " + _JSXStyle.dynamic([
+        [
+            "469c0b1cc43512b8",
+            [
+                display ? 'block' : 'none'
+            ]
+        ],
+        [
+            "d05e300c372f73ee",
+            [
+                darken(color) + 2
+            ]
+        ],
+        [
+            "72e421eb2017491a",
+            [
+                darken(color)
+            ]
+        ]
+    ])}>test</p>
+
+    <_JSXStyle id={"cb56eab0db38d266"}>{`p.${color}.jsx-b452af554142d27{color:${otherColor};display:${obj.display}}`}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-b452af554142d27{color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"e66306ac259712aa"}>{`body{background:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={"e66306ac259712aa"}>{`body{background:${color}}`}</_JSXStyle>
+
+    // TODO: the next two should have the same hash
+
+    <_JSXStyle id={"f08108daf927b99d"}>{`p.jsx-b452af554142d27{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={"f08108daf927b99d"}>{`p.jsx-b452af554142d27{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={"72e421eb2017491a"} dynamic={[
+        darken(color)
+    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color)}}`}</_JSXStyle>
+
+    <_JSXStyle id={"d05e300c372f73ee"} dynamic={[
+        darken(color) + 2
+    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color) + 2}}`}</_JSXStyle>
+
+    <_JSXStyle id={"7c5c5bde49d6c65d"}>{`@media(min-width:${mediumScreen}){p.jsx-b452af554142d27{color:green}p.jsx-b452af554142d27{color:${`red`}}}p.jsx-b452af554142d27{color:red}`}</_JSXStyle>
+
+    <_JSXStyle id={"c5506be0b4762e0b"}>{`p.jsx-b452af554142d27{-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};-o-animation-duration:${animationDuration};animation-duration:${animationDuration}}`}</_JSXStyle>
+
+    <_JSXStyle id={"ed798aa885be9084"}>{`p.jsx-b452af554142d27{-webkit-animation:${animationDuration} forwards ${animationName};-moz-animation:${animationDuration} forwards ${animationName};-o-animation:${animationDuration} forwards ${animationName};animation:${animationDuration} forwards ${animationName}}div.jsx-b452af554142d27{background:${color}}`}</_JSXStyle>
+
+
+
+    <_JSXStyle id={"469c0b1cc43512b8"} dynamic={[
+        display ? 'block' : 'none'
+    ]}>{`span.__jsx-style-dynamic-selector{display:${display ? 'block' : 'none'}}`}</_JSXStyle>
+
+    // TODO: causes bad syntax
+
+    {}
+
+  </div>);

package/tests/fixture/external-nested-scope/input.js

@@ -0,0 +1,5 @@
+import css from 'styled-jsx/css'
+
+function test() {
+  css.resolve`div { color: red }`
+}

package/tests/fixture/external-nested-scope/output.js

@@ -0,0 +1,7 @@
+import _JSXStyle from "styled-jsx/style";
+function test() {
+    ({
+        styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
+        className: "jsx-abb4c2202db1a207"
+    });
+}

package/tests/fixture/external-stylesheet/input.js

@@ -0,0 +1,41 @@
+import styles from './styles'
+const styles2 = require('./styles2')
+import { foo as styles3 } from './styles'
+
+export default () => (
+  <div>
+    <p className="foo">test</p>
+    <p>woot</p>
+    <style jsx global>
+      {styles2}
+    </style>
+    <style jsx>{styles3}</style>
+    <div>woot</div>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+      div {
+        color: green;
+      }
+    `}</style>
+    <style jsx>{styles}</style>
+  </div>
+)
+
+export const Test = () => (
+  <div>
+    <p className="foo">test</p>
+    <p>woot</p>
+    <style jsx>{styles3}</style>
+    <div>woot</div>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+      div {
+        color: green;
+      }
+    `}</style>
+  </div>
+)

package/tests/fixture/external-stylesheet/output.js

@@ -0,0 +1,34 @@
+import _JSXStyle from "styled-jsx/style";
+import styles from './styles';
+const styles2 = require('./styles2');
+import { foo as styles3 } from './styles';
+export default (()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__hash} jsx-${styles3.__hash}`}>
+
+    <p className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__hash} jsx-${styles3.__hash}` + " " + "foo"}>test</p>
+
+    <p className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__hash} jsx-${styles3.__hash}`}>woot</p>
+
+    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
+
+    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
+
+    <div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__hash} jsx-${styles3.__hash}`}>woot</div>
+
+    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14{color:red}div.jsx-bee92b62eadf8a14{color:green}"}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>);
+export const Test = ()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}`}>
+
+    <p className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}` + " " + "foo"}>test</p>
+
+    <p className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}`}>woot</p>
+
+    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
+
+    <div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}`}>woot</div>
+
+    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14{color:red}div.jsx-bee92b62eadf8a14{color:green}"}</_JSXStyle>
+
+  </div>;

package/tests/fixture/external-stylesheet-global/input.js

@@ -0,0 +1,19 @@
+import styles, { foo as styles3 } from './styles'
+
+const styles2 = require('./styles2')
+
+export default () =>
+  <div>
+    <p>test</p>
+    <div>woot</div>
+    <p>woot</p>
+    <style jsx global>
+      {styles2}
+    </style>
+    <style jsx global>
+      {styles3}
+    </style>
+    <style jsx global>
+      {styles}
+    </style>
+  </div>

package/tests/fixture/external-stylesheet-global/output.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import styles, { foo as styles3 } from './styles';
+const styles2 = require('./styles2');
+export default (()=><div >
+
+    <p >test</p>
+
+    <div >woot</div>
+
+    <p >woot</p>
+
+    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
+
+    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>);

package/tests/fixture/external-stylesheet-multi-line/input.js

@@ -0,0 +1,9 @@
+import styles from './styles'
+
+export default () =>
+  <div>
+    <p>test</p>
+    <style jsx>
+      {styles}
+    </style>
+  </div>

package/tests/fixture/external-stylesheet-multi-line/output.js

@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+import styles from './styles';
+export default (()=><div className={`jsx-${styles.__hash}`}>
+
+    <p className={`jsx-${styles.__hash}`}>test</p>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>);

package/tests/fixture/fragment/input.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+export default () => (
+  <>
+    <p>Testing!!!</p>
+    <p className="foo">Bar</p>
+    <>
+      <h3 id="head">Title...</h3>
+      <React.Fragment>
+        <p>hello</p>
+        <>
+          <p>foo</p>
+          <p>bar</p>
+        </>
+        <p>world</p>
+      </React.Fragment>
+    </>
+    <style jsx>{`
+      p {
+        color: cyan;
+      }
+      .foo {
+        font-size: 18px;
+        color: hotpink;
+      }
+      #head {
+        text-decoration: underline;
+      }
+    `}</style>
+  </>
+)
+
+function Component1() {
+  return (
+    <>
+      <div>test</div>
+    </>
+  )
+}
+
+function Component2() {
+  return (
+    <div>
+      <style jsx>{`
+        div {
+          color: red;
+        }
+      `}</style>
+    </div>
+  )
+}

package/tests/fixture/fragment/output.js

@@ -0,0 +1,47 @@
+import _JSXStyle from "styled-jsx/style";
+import React from 'react';
+export default (()=><>
+
+    <p className={"jsx-6dd5f97e085c0297"}>Testing!!!</p>
+
+    <p className={"jsx-6dd5f97e085c0297" + " " + "foo"}>Bar</p>
+
+    <>
+
+      <h3 id="head" className={"jsx-6dd5f97e085c0297"}>Title...</h3>
+
+      <React.Fragment >
+
+        <p className={"jsx-6dd5f97e085c0297"}>hello</p>
+
+        <>
+
+          <p className={"jsx-6dd5f97e085c0297"}>foo</p>
+
+          <p className={"jsx-6dd5f97e085c0297"}>bar</p>
+
+        </>
+
+        <p className={"jsx-6dd5f97e085c0297"}>world</p>
+
+      </React.Fragment>
+
+    </>
+
+    <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297{color:cyan}.foo.jsx-6dd5f97e085c0297{font-size:18px;color:hotpink}#head.jsx-6dd5f97e085c0297{text-decoration:underline}"}</_JSXStyle>
+
+  </>);
+function Component1() {
+    return <>
+
+      <div >test</div>
+
+    </>;
+}
+function Component2() {
+    return <div className={"jsx-678f41ca6d3b294b"}>
+
+      <_JSXStyle id={"678f41ca6d3b294b"}>{"div.jsx-678f41ca6d3b294b{color:red}"}</_JSXStyle>
+
+    </div>;
+}

package/tests/fixture/global/input.js

@@ -0,0 +1,22 @@
+const Test = () => (
+  <div>
+    <style jsx global>{`
+      body {
+        color: red
+      }
+
+      :hover { color: red; display: flex;
+        animation: foo 1s ease-out }
+
+      div a {
+        display: none;
+      }
+
+      [data-test] > div {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
+
+const Test2 = () => <style global jsx>{'p { color: red }'}</style>

package/tests/fixture/global/output.js

@@ -0,0 +1,7 @@
+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>
+
+  </div>;
+const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;

package/tests/fixture/global-child-selector/input.js

@@ -0,0 +1,10 @@
+const Test = () => (
+  <div>
+    <span>test</span>
+    <style jsx>{`
+      div > :global(span) {
+        color: red;
+      }
+    `}</style>
+  </div>
+)

package/tests/fixture/global-child-selector/output.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
+
+    <span className={"jsx-5a206f122d1cb32e"}>test</span>
+
+    <_JSXStyle id={"5a206f122d1cb32e"}>{"div.jsx-5a206f122d1cb32e>span{color:red}"}</_JSXStyle>
+
+  </div>;

package/tests/fixture/global-redundant/input.js

@@ -0,0 +1,12 @@
+export default function IndexPage() {
+  return (
+    <div>
+      should be blue.
+      <style jsx global>{`
+        :global(div) {
+          color: blue;
+        }
+      `}</style>
+    </div>
+  );
+}

package/tests/fixture/global-redundant/output.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default function IndexPage() {
+    return <div className={"jsx-b6abd0684ba81871"}>
+
+      should be blue.
+
+      <_JSXStyle id={"b6abd0684ba81871"}>{"div{color:blue}"}</_JSXStyle>
+
+    </div>;
+}

package/tests/fixture/issue-30480/input.js

@@ -0,0 +1,7 @@
+
+
+export default ({ breakPoint }) => (
+  <div>
+    <style jsx>{`@media (${breakPoint}) {}`}</style>
+  </div>
+)

package/tests/fixture/issue-30480/output.js

@@ -0,0 +1,15 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
+        [
+            "5d2a0e645566ce9c",
+            [
+                breakPoint
+            ]
+        ]
+    ])}>
+
+    <_JSXStyle id={"5d2a0e645566ce9c"} dynamic={[
+        breakPoint
+    ]}>{`@media(${breakPoint}){}`}</_JSXStyle>
+
+  </div>);

package/tests/fixture/issue-30570/input.js

@@ -0,0 +1,15 @@
+export default function IndexPage() {
+    return (
+      <div>
+        <h1>Hello World.</h1>
+
+        <style jsx global>{`
+          @supports (display: flex) {
+            h1 {
+              color: hotpink;
+            }
+          }
+        `}</style>
+      </div>
+    );
+  }

package/tests/fixture/issue-30570/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default function IndexPage() {
+    return <div className={"jsx-bbdada4ef17d18ef"}>
+
+        <h1 className={"jsx-bbdada4ef17d18ef"}>Hello World.</h1>
+
+
+
+        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports((display:flex)or (display:-webkit-box)or (display:-webkit-flex)or (display:-moz-box)or (display:-ms-flexbox)){h1{color:hotpink}}"}</_JSXStyle>
+
+      </div>;
+}