@swc/plugin-styled-jsx 1.3.0 → 1.5.0

package/tests/fixture/attribute-generation-modes/output.js

@@ -0,0 +1,228 @@
+import _JSXStyle from "styled-jsx/style";
+import styles from './styles';
+const styles2 = require('./styles2');
+// external only
+export const Test1 = ()=><div className={`jsx-${styles2.__hash} jsx-${styles.__hash}`}>
+
+    <p className={`jsx-${styles2.__hash} jsx-${styles.__hash}`}>external only</p>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
+
+  </div>;
+// external and static
+export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>
+
+    <p className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>external and static</p>
+
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-81a68341e430a972{color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// external and dynamic
+export const Test3 = ({ color  })=><div className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>external and dynamic</p>
+
+    <_JSXStyle id={"f08108daf927b99d"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// external, static and dynamic
+export const Test4 = ({ color  })=><div className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>external, static and dynamic</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"9779eebad83219f8"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// static only
+export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
+
+    <p className={"jsx-df0159ebd3f9fb6f"}>static only</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-df0159ebd3f9fb6f{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-df0159ebd3f9fb6f{color:red}"}</_JSXStyle>
+
+  </div>;
+// static and dynamic
+export const Test6 = ({ color  })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>static and dynamic</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"9779eebad83219f8"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+  </div>;
+// dynamic only
+export const Test7 = ({ color  })=><div className={_JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={_JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>dynamic only</p>
+
+    <_JSXStyle id={"f08108daf927b99d"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+  </div>;
+// dynamic with scoped compound variable
+export const Test8 = ({ color  })=>{
+    if (color) {
+        const innerProps = {
+            color
+        };
+        return <div className={_JSXStyle.dynamic([
+            [
+                "62256c563b89bfae",
+                [
+                    innerProps.color
+                ]
+            ]
+        ])}>
+
+        <p className={_JSXStyle.dynamic([
+            [
+                "62256c563b89bfae",
+                [
+                    innerProps.color
+                ]
+            ]
+        ])}>dynamic with scoped compound variable</p>
+
+        <_JSXStyle id={"62256c563b89bfae"} dynamic={[
+            innerProps.color
+        ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
+
+      </div>;
+    }
+};
+// dynamic with compound variable
+export const Test9 = ({ color  })=>{
+    const innerProps = {
+        color
+    };
+    return <div className={_JSXStyle.dynamic([
+        [
+            "708723e452f192e4",
+            [
+                innerProps.color
+            ]
+        ]
+    ])}>
+
+      <p className={_JSXStyle.dynamic([
+        [
+            "708723e452f192e4",
+            [
+                innerProps.color
+            ]
+        ]
+    ])}>dynamic with compound variable</p>
+
+      <_JSXStyle id={"708723e452f192e4"} dynamic={[
+        innerProps.color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
+
+    </div>;
+};
+const foo = 'red';
+// dynamic with constant variable
+export const Test10 = ()=><div className={"jsx-f849b7a02be96503"}>
+
+    <p className={"jsx-f849b7a02be96503"}>dynamic with constant variable</p>
+
+    <_JSXStyle id={"f849b7a02be96503"}>{`p.jsx-f849b7a02be96503{color:${foo}}`}</_JSXStyle>
+
+  </div>;
+// dynamic with complex scope
+export const Test11 = ({ color  })=>{
+    const items = Array.from({
+        length: 5
+    }).map((item, i)=><li key={i} className={_JSXStyle.dynamic([
+            [
+                "a2585dff420632b1",
+                [
+                    color
+                ]
+            ]
+        ]) + " " + "item"}>
+
+      <_JSXStyle id={"a2585dff420632b1"} dynamic={[
+            color
+        ]}>{`.item.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+      Item #{i + 1}
+
+    </li>);
+    return <ul className="items">{items}</ul>;
+};

package/tests/fixture/class/input.js

@@ -0,0 +1,14 @@
+export default class {
+  render() {
+    return (
+      <div>
+        <p>test</p>
+        <style jsx>{`
+          p {
+            color: red;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

package/tests/fixture/class/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={"jsx-b2b86d63f35d25ee"}>
+
+        <p className={"jsx-b2b86d63f35d25ee"}>test</p>
+
+        <_JSXStyle id={"b2b86d63f35d25ee"}>{"p.jsx-b2b86d63f35d25ee{color:red}"}</_JSXStyle>
+
+      </div>;
+    }
+}

package/tests/fixture/comments/input.js

@@ -0,0 +1,18 @@
+export default class {
+  render() {
+    return (
+      <div>
+        <p>test</p>
+        <style jsx>{`
+          //
+          p {
+            //
+            color: red;
+
+            //
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

package/tests/fixture/comments/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={"jsx-1952086b0a5ae64c"}>
+
+        <p className={"jsx-1952086b0a5ae64c"}>test</p>
+
+        <_JSXStyle id={"1952086b0a5ae64c"}>{"p.jsx-1952086b0a5ae64c{color:red}"}</_JSXStyle>
+
+      </div>;
+    }
+}

package/tests/fixture/component-attribute/input.js

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

package/tests/fixture/component-attribute/output.js

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

package/tests/fixture/conflicts/input.js

@@ -0,0 +1,16 @@
+
+// TODO
+
+// export const _JSXStyle = '_JSXStyle-literal'
+// export default function() {
+//   return (
+//     <div>
+//       <p>test</p>
+//       <style jsx>{`
+//         p {
+//           color: red;
+//         }
+//       `}</style>
+//     </div>
+//   )
+// }

package/tests/fixture/conflicts/output.js

@@ -0,0 +1,14 @@
+// TODO
+// export const _JSXStyle = '_JSXStyle-literal'
+// export default function() {
+//   return (
+//     <div>
+//       <p>test</p>
+//       <style jsx>{`
+//         p {
+//           color: red;
+//         }
+//       `}</style>
+//     </div>
+//   )
+// }

package/tests/fixture/css-selector-after-pseudo/input.js

@@ -0,0 +1,18 @@
+function NavigationItem({
+  active,
+  className,
+}) {
+  return (
+    <span className={cn({ active }, className, 'navigation-item')}>
+      <style jsx>{`
+        .navigation-item :global(a)::after {
+          content: attr(data-text);
+          content: attr(data-text) / '';
+          
+        }
+      `}</style>
+    </span>
+  );
+}
+
+export default NavigationItem;

package/tests/fixture/css-selector-after-pseudo/output.js

@@ -0,0 +1,11 @@
+import _JSXStyle from "styled-jsx/style";
+function NavigationItem({ active , className ,  }) {
+    return <span className={"jsx-2342aae4628612c6" + " " + (cn({
+        active
+    }, className, 'navigation-item') || "")}>
+
+      <_JSXStyle id={"2342aae4628612c6"}>{'.navigation-item.jsx-2342aae4628612c6 a::after{content:attr(data-text);content:attr(data-text)/""}'}</_JSXStyle>
+
+    </span>;
+}
+export default NavigationItem;

package/tests/fixture/css-tag-same-file/input.js

@@ -0,0 +1,25 @@
+import css from 'styled-jsx/css'
+
+export default ({ children }) => (
+  <div>
+    <p>{children}</p>
+    <style jsx>{styles}</style>
+  </div>
+)
+
+const styles = css`
+  p {
+    color: red;
+  }
+`
+
+class Test extends React.Component {
+  render() {
+    return (
+      <div>
+        <p>{this.props.children}</p>
+        <style jsx>{styles}</style>
+      </div>
+    )
+  }
+}

package/tests/fixture/css-tag-same-file/output.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
+
+    <p className={`jsx-${styles.__hash}`}>{children}</p>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>);
+const styles = new String("p.jsx-556239d258b6d66a{color:red}");
+styles.__hash = "556239d258b6d66a";
+class Test extends React.Component {
+    render() {
+        return <div className={`jsx-${styles.__hash}`}>
+
+        <p className={`jsx-${styles.__hash}`}>{this.props.children}</p>
+
+        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+      </div>;
+    }
+}

package/tests/fixture/different-jsx-ids/input.js

@@ -0,0 +1,23 @@
+const color = 'red'
+const otherColor = 'green'
+
+const A = () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`p { color: ${color} }`}</style>
+  </div>
+)
+
+const B = () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`p { color: ${otherColor} }`}</style>
+  </div>
+)
+
+export default () => (
+  <div>
+    <A />
+    <B />
+  </div>
+)

package/tests/fixture/different-jsx-ids/output.js

@@ -0,0 +1,24 @@
+import _JSXStyle from "styled-jsx/style";
+const color = 'red';
+const otherColor = 'green';
+const A = ()=><div className={"jsx-8522d6f4b7f930d2"}>
+
+    <p className={"jsx-8522d6f4b7f930d2"}>test</p>
+
+    <_JSXStyle id={"8522d6f4b7f930d2"}>{`p.jsx-8522d6f4b7f930d2{color:${color}}`}</_JSXStyle>
+
+  </div>;
+const B = ()=><div className={"jsx-d1ed441bb35f699d"}>
+
+    <p className={"jsx-d1ed441bb35f699d"}>test</p>
+
+    <_JSXStyle id={"d1ed441bb35f699d"}>{`p.jsx-d1ed441bb35f699d{color:${otherColor}}`}</_JSXStyle>
+
+  </div>;
+export default (()=><div >
+
+    <A />
+
+    <B />
+
+  </div>);

package/tests/fixture/dynamic-element/input.js

@@ -0,0 +1,56 @@
+export default ({ level = 1 }) => {
+  const Element = `h${level}`
+
+  return (
+    <Element className="root">
+      <p>dynamic element</p>
+      <style jsx>{`
+        .root {
+          background: red;
+        }
+      `}</style>
+    </Element>
+  )
+}
+
+export const TestLowerCase = ({ level = 1 }) => {
+  const element = `h${level}`
+
+  return (
+    <element className="root">
+      <p>dynamic element</p>
+      <style jsx>{`
+        .root {
+          background: red;
+        }
+      `}</style>
+    </element>
+  )
+}
+
+const Element2 = 'div'
+export const Test2 = () => {
+  return (
+    <Element2 className="root">
+      <p>dynamic element</p>
+      <style jsx>{`
+        .root {
+          background: red;
+        }
+      `}</style>
+    </Element2>
+  )
+}
+
+export const Test3 = ({Component = 'div'}) => {
+  return (
+    <Component>
+      <p>dynamic element</p>
+        <style jsx>{`
+          .root {
+            background: red;
+          }
+        `}</style>
+    </Component>
+  );
+}

package/tests/fixture/dynamic-element/output.js

@@ -0,0 +1,40 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ level =1  })=>{
+    const Element = `h${level}`;
+    return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
+
+      <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
+    </Element>;
+});
+export const TestLowerCase = ({ level =1  })=>{
+    const element = `h${level}`;
+    return <element className={"jsx-fca64cc3f069b519" + " " + "root"}>
+
+      <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
+    </element>;
+};
+const Element2 = 'div';
+export const Test2 = ()=>{
+    return <Element2 className="root">
+
+      <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
+    </Element2>;
+};
+export const Test3 = ({ Component ='div'  })=>{
+    return <Component className={"jsx-f825b24bbab5b83b"}>
+
+      <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
+    </Component>;
+};

package/tests/fixture/dynamic-element-class/input.js

@@ -0,0 +1,32 @@
+export default class {
+  render() {
+    const Element = 'div'
+
+    return (
+      <Element className="root">
+        <p>dynamic element</p>
+        <style jsx>{`
+          .root {
+            background: red;
+          }
+        `}</style>
+      </Element>
+    )
+  }
+}
+
+const Element2 = 'div'
+export const Test2 = class {
+  render() {
+    return (
+      <Element2 className="root">
+        <p>dynamic element</p>
+        <style jsx>{`
+          .root {
+            background: red;
+          }
+        `}</style>
+      </Element2>
+    )
+  }
+}

package/tests/fixture/dynamic-element-class/output.js

@@ -0,0 +1,25 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        const Element = 'div';
+        return <Element className={"jsx-f825b24bbab5b83b" + " " + "root"}>
+
+        <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
+      </Element>;
+    }
+}
+const Element2 = 'div';
+export const Test2 = class {
+    render() {
+        return <Element2 className="root">
+
+        <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
+      </Element2>;
+    }
+};

package/tests/fixture/dynamic-element-external/input.js

@@ -0,0 +1,12 @@
+import styles from './styles2'
+
+export default ({ level = 1 }) => {
+  const Element = `h${level}`
+
+  return (
+    <Element className="root">
+      <p>dynamic element</p>
+      <style jsx>{styles}</style>
+    </Element>
+  )
+}

package/tests/fixture/dynamic-element-external/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+import styles from './styles2';
+export default (({ level =1  })=>{
+    const Element = `h${level}`;
+    return <Element className={`jsx-${styles.__hash}` + " " + "root"}>
+
+      <p className={`jsx-${styles.__hash}`}>dynamic element</p>
+
+      <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+    </Element>;
+});