@swc/plugin-styled-jsx 1.5.75 → 1.5.77

package/transform/tests/fixture/fragment/output.swc.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/transform/tests/fixture/global/output.swc.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/transform/tests/fixture/global-child-selector/output.swc.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/transform/tests/fixture/global-redundant/output.swc.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/transform/tests/fixture/issue-30480/output.swc.js

@@ -0,0 +1,15 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
+        [
+            "ff798a455a83a572",
+            [
+                breakPoint
+            ]
+        ]
+    ])}>
+
+    <_JSXStyle id={"ff798a455a83a572"} dynamic={[
+        breakPoint
+    ]}>{`@media(${breakPoint}){.test.__jsx-style-dynamic-selector{margin-bottom:1em}}`}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/issue-30570/output.swc.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>;
+}

package/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.swc.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/transform/tests/fixture/mixed-global-scoped/output.swc.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/transform/tests/fixture/multiple-jsx/output.swc.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/transform/tests/fixture/next-54653/output.swc.js

@@ -0,0 +1,3 @@
+const _defaultExport = new String("@media(max-width:870px){th.expiration-date-cell,td.expiration-date-cell{display:none}}");
+_defaultExport.__hash = "fd71bf06ba8860bb";
+export default _defaultExport;

package/transform/tests/fixture/non-styled-jsx-style/output.swc.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/transform/tests/fixture/not-styled-jsx-tagged-templates/{output.js → output.lightningcss.js}

@@ -20,5 +20,4 @@ const Title = styled.h1`
   font-size: 50px;
 `;
 const AnotherTitle = Title.extend`color: blue;`;
-export const Component = ()=><AnotherTitle >My page</AnotherTitle>
-;
+export const Component = ()=><AnotherTitle>My page</AnotherTitle>;

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

@@ -0,0 +1,23 @@
+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/transform/tests/fixture/number-after-placeholder/output.swc.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/transform/tests/fixture/one-off-global-selectors/output.swc.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/transform/tests/fixture/source-maps/output.swc.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/transform/tests/fixture/styles/output.swc.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={"7a7480dd17e82e07"}>{`div.jsx-7a7480dd17e82e07{color:${colors.green.light}}a.jsx-7a7480dd17e82e07{color:red}`}</_JSXStyle>,
+    className: "jsx-7a7480dd17e82e07"
+});
+const b = {
+    styles: <_JSXStyle id={"7a7480dd17e82e07"}>{`div.jsx-7a7480dd17e82e07{color:${colors.green.light}}a.jsx-7a7480dd17e82e07{color:red}`}</_JSXStyle>,
+    className: "jsx-7a7480dd17e82e07"
+};
+const dynamic = (colors)=>{
+    const b = {
+        styles: <_JSXStyle id={"9f775f199a8dfb95"} dynamic={[
+            colors.green.light
+        ]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
+        className: _JSXStyle.dynamic([
+            [
+                "9f775f199a8dfb95",
+                [
+                    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/transform/tests/fixture/styles-external-invalid/output.swc.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/transform/tests/fixture/styles-external-invalid2/output.swc.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/transform/tests/fixture/styles2/output.swc.js

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

package/transform/tests/fixture/too-many/output.swc.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/transform/tests/fixture/tpl-escape-1/output.swc.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/transform/tests/fixture/tpl-escape-2/output.swc.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>;
+}

package/transform/tests/fixture/tpl-placeholder-1-as-property/output.swc.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "fc144a5ba38f1ea7",
+                [
+                    inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "fc144a5ba38f1ea7",
+                [
+                    inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"fc144a5ba38f1ea7"} dynamic={[
+            inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
+        ]}>{`@media only screen{a.__jsx-style-dynamic-selector{${inputSize ? 'height: calc(2 * var(--a)) !important;' : ''}:0}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.swc.js

@@ -0,0 +1,34 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "2afd62ca79f8b081",
+                [
+                    a[b],
+                    -1 * (c || 0),
+                    d
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "2afd62ca79f8b081",
+                [
+                    a[b],
+                    -1 * (c || 0),
+                    d
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"2afd62ca79f8b081"} dynamic={[
+            a[b],
+            -1 * (c || 0),
+            d
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{a:${a[b]}px!important;b:translate3d(0,${-1 * (c || 0)}px,-${d}px)scale(1)!important}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/transform/tests/fixture/tpl-placeholder-3-as-value/output.swc.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "e37942245bf0eb35",
+                [
+                    a
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "e37942245bf0eb35",
+                [
+                    a
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"e37942245bf0eb35"} dynamic={[
+            a
+        ]}>{`@media only screen{a.__jsx-style-dynamic-selector{color:${a}}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.swc.js

@@ -0,0 +1,31 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "b9b97de593829e6",
+                [
+                    a || 'var(--c)',
+                    b || 'inherit'
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "b9b97de593829e6",
+                [
+                    a || 'var(--c)',
+                    b || 'inherit'
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"b9b97de593829e6"} dynamic={[
+            a || 'var(--c)',
+            b || 'inherit'
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{display:inline-block;padding:0 ${a || 'var(--c)'};color:${b || 'inherit'}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.swc.js

@@ -0,0 +1,31 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "23692842dc904882",
+                [
+                    a ? '100%' : '200px',
+                    b ? '0' : '8px 20px'
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "23692842dc904882",
+                [
+                    a ? '100%' : '200px',
+                    b ? '0' : '8px 20px'
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"23692842dc904882"} dynamic={[
+            a ? '100%' : '200px',
+            b ? '0' : '8px 20px'
+        ]}>{`.item.__jsx-style-dynamic-selector{max-width:${a ? '100%' : '200px'};padding:${b ? '0' : '8px 20px'}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/transform/tests/fixture/transform-css/output.swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-4a27e5cf1c34b3df"}>
+
+    <p className={"jsx-4a27e5cf1c34b3df"}>test</p>
+
+    <_JSXStyle id={"4a27e5cf1c34b3df"}>{'html.jsx-4a27e5cf1c34b3df{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:#001}p{color:#002}p,a.jsx-4a27e5cf1c34b3df{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}p.jsx-4a27e5cf1c34b3df{color:#005}p.jsx-4a27e5cf1c34b3df{color:#006}*.jsx-4a27e5cf1c34b3df{color:#007}[href="woot"].jsx-4a27e5cf1c34b3df{color:#008}p.jsx-4a27e5cf1c34b3df a.jsx-4a27e5cf1c34b3df span.jsx-4a27e5cf1c34b3df{color:#009}p.jsx-4a27e5cf1c34b3df span{background:#00a}p.jsx-4a27e5cf1c34b3df a[title="\'w \' \'  t\'"].jsx-4a27e5cf1c34b3df{margin:auto}p.jsx-4a27e5cf1c34b3df span:not(.test){color:#00b}p.jsx-4a27e5cf1c34b3df,h1.jsx-4a27e5cf1c34b3df{color:#00c;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-4a27e5cf1c34b3df{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-4a27e5cf1c34b3df:hover{color:#00d}p.jsx-4a27e5cf1c34b3df::before{color:#00e}.jsx-4a27e5cf1c34b3df:hover{color:#00f}.jsx-4a27e5cf1c34b3df::before{color:#010}.jsx-4a27e5cf1c34b3df:hover p.jsx-4a27e5cf1c34b3df{color:#011}p.jsx-4a27e5cf1c34b3df+a.jsx-4a27e5cf1c34b3df{color:#012}p.jsx-4a27e5cf1c34b3df~a.jsx-4a27e5cf1c34b3df{color:#013}p.jsx-4a27e5cf1c34b3df>a.jsx-4a27e5cf1c34b3df{color:#014}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-4a27e5cf1c34b3df{color:#015}}.test.jsx-4a27e5cf1c34b3df{display:block}.inline-flex.jsx-4a27e5cf1c34b3df{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-4a27e5cf1c34b3df{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-4a27e5cf1c34b3df{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=","].jsx-4a27e5cf1c34b3df{display:inline-block}.test.is-status.jsx-4a27e5cf1c34b3df .test.jsx-4a27e5cf1c34b3df{color:#016}.a-selector.jsx-4a27e5cf1c34b3df:hover,.a-selector.jsx-4a27e5cf1c34b3df:focus{outline:none}@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-4a27e5cf1c34b3df{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-4a27e5cf1c34b3df{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-4a27e5cf1c34b3df{margin-bottom:2rem}}}'}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/transform-css-complex-selector/output.swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-713499aa363d6373"}>
+
+    <p className={"jsx-713499aa363d6373"}>test</p>
+
+    <_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:blue}p.jsx-713499aa363d6373 a[title=\"'w ' '  t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 span:not(.test){color:green}p.jsx-713499aa363d6373,h1.jsx-713499aa363d6373{color:blue;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-713499aa363d6373{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-713499aa363d6373:hover{color:red}p.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover{color:red}.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover p.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373+a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373~a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373>a.jsx-713499aa363d6373{color:red}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-713499aa363d6373{color:red}}.test.jsx-713499aa363d6373{display:block}.inline-flex.jsx-713499aa363d6373{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-713499aa363d6373{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-713499aa363d6373{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=\",\"].jsx-713499aa363d6373{display:inline-block}.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}.a-selector.jsx-713499aa363d6373:hover,.a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/transform-css-complex-selector-2/output.swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-efc590d693035654"}>
+
+    <p className={"jsx-efc590d693035654"}>test</p>
+
+    <_JSXStyle id={"efc590d693035654"}>{".a-selector.jsx-efc590d693035654:hover,.a-selector.jsx-efc590d693035654:focus{outline:none}"}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/transform-css-global/output.swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-6881055ff9b1aeb6"}>
+
+    <p className={"jsx-6881055ff9b1aeb6"}>test</p>
+
+    <_JSXStyle id={"6881055ff9b1aeb6"}>{'html.jsx-6881055ff9b1aeb6{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:#001}h1{color:#002}h2,a.jsx-6881055ff9b1aeb6{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}'}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/transform-css-media-query/output.swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-1f7963ae04c6466a"}>
+
+    <p className={"jsx-1f7963ae04c6466a"}>test</p>
+
+    <_JSXStyle id={"1f7963ae04c6466a"}>{'@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-1f7963ae04c6466a{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-1f7963ae04c6466a{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-1f7963ae04c6466a{margin-bottom:2rem}}}'}</_JSXStyle>
+
+  </div>);