@swc/plugin-styled-jsx 1.3.0 → 1.5.0

package/tests/fixture/issue-31562-interpolation-in-mdea/input.js

@@ -0,0 +1,30 @@
+
+
+
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx global>{`
+            html {
+                font-size: ${Typography.base.size.default};
+                line-height: ${Typography.base.lineHeight};
+            }
+            @media ${Target.mediumPlus} {
+                html {
+                    font-size: ${Typography.base.size.mediumPlus};
+                }
+            }
+            @media ${Target.largePlus} {
+                html {
+                    font-size: ${Typography.base.size.largePlus};
+                }
+            }
+            `}
+            </style>
+        </div>
+      )
+    }
+  }
+  

package/tests/fixture/issue-31562-interpolation-in-mdea/output.js

@@ -0,0 +1,43 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "60bda1963c17b640",
+                [
+                    Typography.base.size.default,
+                    Typography.base.lineHeight,
+                    Target.mediumPlus,
+                    Typography.base.size.mediumPlus,
+                    Target.largePlus,
+                    Typography.base.size.largePlus
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "60bda1963c17b640",
+                [
+                    Typography.base.size.default,
+                    Typography.base.lineHeight,
+                    Target.mediumPlus,
+                    Typography.base.size.mediumPlus,
+                    Target.largePlus,
+                    Typography.base.size.largePlus
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"60bda1963c17b640"} dynamic={[
+            Typography.base.size.default,
+            Typography.base.lineHeight,
+            Target.mediumPlus,
+            Typography.base.size.mediumPlus,
+            Target.largePlus,
+            Typography.base.size.largePlus
+        ]}>{`html{font-size:${Typography.base.size.default};line-height:${Typography.base.lineHeight}}@media ${Target.mediumPlus}{html{font-size:${Typography.base.size.mediumPlus}}}@media ${Target.largePlus}{html{font-size:${Typography.base.size.largePlus}}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/tests/fixture/mixed-global-scoped/input.js

@@ -0,0 +1,9 @@
+const Test = () => <style global jsx>{'p { color: red }'}</style>
+
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx global>{`body { background: red }`}</style>
+    <style jsx>{'p { color: red }'}</style>
+  </div>
+)

package/tests/fixture/mixed-global-scoped/output.js

@@ -0,0 +1,11 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
+export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
+
+    <p className={"jsx-3822e6e1fb9fa41a"}>test</p>
+
+    <_JSXStyle id={"b7efb453c85593c1"}>{"body{background:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-3822e6e1fb9fa41a{color:red}"}</_JSXStyle>
+
+  </div>);

package/tests/fixture/multiple-jsx/input.js

@@ -0,0 +1,43 @@
+const attrs = {
+  id: 'test'
+}
+
+const Test1 = () => (
+  <div>
+    <span {...attrs} data-test="test">test</span>
+    <Component />
+    <style jsx>{`
+      span {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
+
+const Test2 = () => <span>test</span>
+
+const Test3 = () => (
+  <div>
+    <span>test</span>
+    <style jsx>{`
+      span {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
+
+export default class {
+  render () {
+    return (
+      <div>
+        <p>test</p>
+        <style jsx>{`
+          p {
+            color: red;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

package/tests/fixture/multiple-jsx/output.js

@@ -0,0 +1,32 @@
+import _JSXStyle from "styled-jsx/style";
+const attrs = {
+    id: 'test'
+};
+const Test1 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
+    <span {...attrs} data-test="test" className={"jsx-a9535d7d5f32c3c4" + " " + (attrs && attrs.className != null && attrs.className || "")}>test</span>
+
+    <Component />
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
+  </div>;
+const Test2 = ()=><span >test</span>;
+const Test3 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
+    <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
+  </div>;
+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/non-styled-jsx-style/input.js

@@ -0,0 +1,7 @@
+export default () => (
+  <div>
+    <p>woot</p>
+    <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>
+    <style jsx>{'p { color: red }'}</style>
+  </div>
+)

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

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
+
+    <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
+
+    <style dangerouslySetInnerHTML={{
+        __html: `body { margin: 0; }`
+    }}></style>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
+
+  </div>);

package/tests/fixture/not-styled-jsx-tagged-templates/input.js

@@ -0,0 +1,30 @@
+import css from 'hell'
+
+const color = 'red'
+
+const bar = css`
+  div {
+    font-size: 3em;
+  }
+`
+export const uh = bar
+
+export const foo = css`div { color: ${color}}`
+
+export default css`
+  div {
+    font-size: 3em;
+  }
+  p {
+    color: ${color};
+  }
+`
+
+const Title = styled.h1`
+  color: red;
+  font-size: 50px;
+`
+
+const AnotherTitle = Title.extend`color: blue;`
+
+export const Component = () => <AnotherTitle>My page</AnotherTitle>

package/tests/fixture/not-styled-jsx-tagged-templates/output.js

@@ -0,0 +1,24 @@
+import css from 'hell';
+const color = 'red';
+const bar = css`
+  div {
+    font-size: 3em;
+  }
+`;
+export const uh = bar;
+export const foo = css`div { color: ${color}}`;
+export default css`
+  div {
+    font-size: 3em;
+  }
+  p {
+    color: ${color};
+  }
+`;
+const Title = styled.h1`
+  color: red;
+  font-size: 50px;
+`;
+const AnotherTitle = Title.extend`color: blue;`;
+export const Component = ()=><AnotherTitle >My page</AnotherTitle>
+;

package/tests/fixture/number-after-placeholder/input.js

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function IndexPage() {
+  return (
+    <div>
+      Hello World.{" "}
+      <Link href="/about">
+        <a>Abound</a>
+      </Link>
+      <style jsx>{`
+        a {
+          color: ${"#abcdef"}12;
+        }
+      `}</style>
+    </div>
+  );
+}

package/tests/fixture/number-after-placeholder/output.js

@@ -0,0 +1,17 @@
+import _JSXStyle from "styled-jsx/style";
+import Link from "next/link";
+export default function IndexPage() {
+    return <div className={"jsx-9a4b3442d519aae9"}>
+
+      Hello World.{" "}
+
+      <Link href="/about">
+
+        <a className={"jsx-9a4b3442d519aae9"}>Abound</a>
+
+      </Link>
+
+      <_JSXStyle id={"9a4b3442d519aae9"}>{`a.jsx-9a4b3442d519aae9{color:${"#abcdef"}12}`}</_JSXStyle>
+
+    </div>;
+}

package/tests/fixture/one-off-global-selectors/input.js

@@ -0,0 +1,10 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      .container :global(> *) {
+        color: red;
+      }
+    `}</style>
+  </div>
+)

package/tests/fixture/one-off-global-selectors/output.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
+
+    <p className={"jsx-c7c3a8e231c9215a"}>test</p>
+
+    <_JSXStyle id={"c7c3a8e231c9215a"}>{".container.jsx-c7c3a8e231c9215a>*{color:red}"}</_JSXStyle>
+
+  </div>);

package/tests/fixture/source-maps/input.js

@@ -0,0 +1,8 @@
+// TODO: needs sourcemaps
+// export default () => (
+//   <div>
+//     <p>test</p>
+//     <p>woot</p>
+//     <style jsx>{'p { color: red }'}</style>
+//   </div>
+// )

package/tests/fixture/source-maps/output.js

@@ -0,0 +1,8 @@
+// TODO: needs sourcemaps
+// export default () => (
+//   <div>
+//     <p>test</p>
+//     <p>woot</p>
+//     <style jsx>{'p { color: red }'}</style>
+//   </div>
+// )

package/tests/fixture/stateless/input.js

@@ -0,0 +1,8 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <p>woot</p>
+    <p>woot</p>
+    <style jsx>{'p { color: red }'}</style>
+  </div>
+)

package/tests/fixture/stateless/output.js

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

package/tests/fixture/styles/input.js

@@ -0,0 +1,57 @@
+import css, { resolve, global } from 'styled-jsx/css'
+import colors, { size } from './constants'
+const color = 'red'
+
+const bar = css`
+  div {
+    font-size: 3em;
+  }
+`
+
+const baz = css.global`
+  div {
+    font-size: 3em;
+  }
+`
+
+const a = global`
+  div {
+    font-size: ${size}em;
+  }
+`
+
+export const uh = bar
+
+export const foo = css`div { color: ${color}}`
+
+css.resolve`
+  div {
+    color: ${colors.green.light};
+  }
+  a { color: red }
+`
+
+const b = resolve`
+  div {
+    color: ${colors.green.light};
+  }
+  a { color: red }
+`
+
+const dynamic = colors => {
+  const b = resolve`
+    div {
+      color: ${colors.green.light};
+    }
+    a { color: red }
+  `
+}
+
+export default css.resolve`
+  div {
+    font-size: 3em;
+  }
+  p {
+    color: ${color};
+  }
+`

package/tests/fixture/styles/output.js

@@ -0,0 +1,39 @@
+import _JSXStyle from "styled-jsx/style";
+import colors, { size } from './constants';
+const color = 'red';
+const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
+bar.__hash = "aaed0341accea8f";
+const baz = new String("div{font-size:3em}");
+baz.__hash = "aaed0341accea8f";
+const a = new String(`div{font-size:${size}em}`);
+a.__hash = "b4e02b3e84cc50c";
+export const uh = bar;
+export const foo = new String(`div.jsx-1a001e3709d54ba4{color:${color}}`);
+foo.__hash = "1a001e3709d54ba4";
+({
+    styles: <_JSXStyle id={"38ae14c4ec5e0907"}>{`div.jsx-38ae14c4ec5e0907{color:${colors.green.light}}a.jsx-38ae14c4ec5e0907{color:red}`}</_JSXStyle>,
+    className: "jsx-38ae14c4ec5e0907"
+});
+const b = {
+    styles: <_JSXStyle id={"38ae14c4ec5e0907"}>{`div.jsx-38ae14c4ec5e0907{color:${colors.green.light}}a.jsx-38ae14c4ec5e0907{color:red}`}</_JSXStyle>,
+    className: "jsx-38ae14c4ec5e0907"
+};
+const dynamic = (colors)=>{
+    const b = {
+        styles: <_JSXStyle id={"b68d3b38146e2a7d"} dynamic={[
+            colors.green.light
+        ]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
+        className: _JSXStyle.dynamic([
+            [
+                "b68d3b38146e2a7d",
+                [
+                    colors.green.light
+                ]
+            ]
+        ])
+    };
+};
+export default {
+    styles: <_JSXStyle id={"e14aa5a1efa47449"}>{`div.jsx-e14aa5a1efa47449{font-size:3em}p.jsx-e14aa5a1efa47449{color:${color}}`}</_JSXStyle>,
+    className: "jsx-e14aa5a1efa47449"
+};

package/tests/fixture/styles-external-invalid/input.js

@@ -0,0 +1,13 @@
+// TODO
+// import css from 'styled-jsx/css'
+
+// const color = 'red'
+
+// export const foo = css`div { color: ${color}}`
+
+// const props = { color: 'red ' }
+
+// export default css`
+//   div { font-size: 3em; color: ${props.color} }
+//   p { color: ${this.props.color};}
+// `

package/tests/fixture/styles-external-invalid/output.js

@@ -0,0 +1,9 @@
+// TODO
+// import css from 'styled-jsx/css'
+// const color = 'red'
+// export const foo = css`div { color: ${color}}`
+// const props = { color: 'red ' }
+// export default css`
+//   div { font-size: 3em; color: ${props.color} }
+//   p { color: ${this.props.color};}
+// `

package/tests/fixture/styles-external-invalid2/input.js

@@ -0,0 +1,11 @@
+// TODO
+// import css from 'styled-jsx/css'
+
+// const color = 'red'
+
+// export const foo = css`div { color: ${color}}`
+
+// export default css`
+//   div { font-size: 3em }
+//   p { color: ${props.color};}
+// `

package/tests/fixture/styles-external-invalid2/output.js

@@ -0,0 +1,8 @@
+// TODO
+// import css from 'styled-jsx/css'
+// const color = 'red'
+// export const foo = css`div { color: ${color}}`
+// export default css`
+//   div { font-size: 3em }
+//   p { color: ${props.color};}
+// `

package/tests/fixture/styles2/input.js

@@ -0,0 +1,6 @@
+// TODO: support common js
+// import css from 'styled-jsx/css'
+
+// module.exports = css`
+//   div { font-size: 3em }
+// `

package/tests/fixture/styles2/output.js

@@ -0,0 +1,5 @@
+// TODO: support common js
+// import css from 'styled-jsx/css'
+// module.exports = css`
+//   div { font-size: 3em }
+// `

package/tests/fixture/too-many/input.js

@@ -0,0 +1,35 @@
+
+
+export const Red = ({
+  Component = 'button',
+}) => {
+  
+  return (
+    <Component
+     
+    >
+
+      {/* Dynamic Styles */}
+      <style jsx>{`
+        .button {
+          --button-1: ${e1};
+          --button-2: ${e2};
+          --button-3: ${e3};
+          --button-4: ${e4};
+          --button-5: ${e5};
+          --button-6: ${e6};
+          --button-7: ${e7};
+          --button-8: ${e8};
+          --button-9: ${e9};
+          --button-10: ${e10};
+          --button-11: ${e11};
+          --button-12: ${e12};
+          --button-13: ${e13};
+          --button-14: ${e14};
+          --button-15: ${e15};
+        }
+      `}</style>
+    </Component>
+  );
+};
+

package/tests/fixture/too-many/output.js

@@ -0,0 +1,49 @@
+import _JSXStyle from "styled-jsx/style";
+export const Red = ({ Component ='button' ,  })=>{
+    return <Component className={_JSXStyle.dynamic([
+        [
+            "1a9f9e2fa701f7ec",
+            [
+                e1,
+                e2,
+                e3,
+                e4,
+                e5,
+                e6,
+                e7,
+                e8,
+                e9,
+                e10,
+                e11,
+                e12,
+                e13,
+                e14,
+                e15
+            ]
+        ]
+    ])}>
+
+
+
+      {}
+
+      <_JSXStyle id={"1a9f9e2fa701f7ec"} dynamic={[
+        e1,
+        e2,
+        e3,
+        e4,
+        e5,
+        e6,
+        e7,
+        e8,
+        e9,
+        e10,
+        e11,
+        e12,
+        e13,
+        e14,
+        e15
+    ]}>{`.button.__jsx-style-dynamic-selector{--button-1:${e1};--button-2:${e2};--button-3:${e3};--button-4:${e4};--button-5:${e5};--button-6:${e6};--button-7:${e7};--button-8:${e8};--button-9:${e9};--button-10:${e10};--button-11:${e11};--button-12:${e12};--button-13:${e13};--button-14:${e14};--button-15:${e15}}`}</_JSXStyle>
+
+    </Component>;
+};

package/tests/fixture/tpl-escape-1/input.js

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

package/tests/fixture/tpl-escape-1/output.js

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

package/tests/fixture/tpl-escape-2/input.js

@@ -0,0 +1,17 @@
+export default function Home({ fontFamily }) {
+  return (
+    <div>
+      <style jsx global>
+        {`
+          body {
+            font-family: ${fontFamily};
+          }
+          code:before,
+          code:after {
+            content: '\`';
+          }
+        `}
+      </style>
+    </div>
+  )
+}

package/tests/fixture/tpl-escape-2/output.js

@@ -0,0 +1,17 @@
+import _JSXStyle from "styled-jsx/style";
+export default function Home({ fontFamily  }) {
+    return <div className={_JSXStyle.dynamic([
+        [
+            "3892513b52a23034",
+            [
+                fontFamily
+            ]
+        ]
+    ])}>
+
+      <_JSXStyle id={"3892513b52a23034"} dynamic={[
+        fontFamily
+    ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:"\`"}`}</_JSXStyle>
+
+    </div>;
+}