@swc/plugin-styled-jsx 1.5.84 → 1.5.87

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

@@ -1,34 +0,0 @@
-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/transform/tests/fixture/external-stylesheet-global/input.js

@@ -1,19 +0,0 @@
-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/transform/tests/fixture/external-stylesheet-global/output.lightningcss.js

@@ -1,18 +0,0 @@
-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/transform/tests/fixture/external-stylesheet-global/output.swc.js

@@ -1,18 +0,0 @@
-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/transform/tests/fixture/external-stylesheet-multi-line/input.js

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

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

@@ -1,9 +0,0 @@
-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/transform/tests/fixture/external-stylesheet-multi-line/output.swc.js

@@ -1,9 +0,0 @@
-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/transform/tests/fixture/fragment/input.js

@@ -1,51 +0,0 @@
-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/transform/tests/fixture/fragment/output.lightningcss.js

@@ -1,47 +0,0 @@
-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:#0ff}.foo.jsx-6dd5f97e085c0297{color:#ff69b4;font-size:18px}#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/fragment/output.swc.js

@@ -1,47 +0,0 @@
-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/input.js

@@ -1,22 +0,0 @@
-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/transform/tests/fixture/global/output.lightningcss.js

@@ -1,7 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
-
-    <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;animation:1s ease-out foo;display:flex}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/output.swc.js

@@ -1,7 +0,0 @@
-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/input.js

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

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

@@ -1,8 +0,0 @@
-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-child-selector/output.swc.js

@@ -1,8 +0,0 @@
-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/input.js

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

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

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

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

@@ -1,10 +0,0 @@
-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/input.js

@@ -1,11 +0,0 @@
-
-
-export default ({ breakPoint }) => (
-  <div>
-    <style jsx>{`@media (${breakPoint}) {
-      .test {
-        margin-bottom: 1em;
-      }
-    }`}</style>
-  </div>
-)

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

@@ -1,15 +0,0 @@
-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-30480/output.swc.js

@@ -1,15 +0,0 @@
-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/input.js

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

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

@@ -1,12 +0,0 @@
-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){h1{color:#ff69b4}}"}</_JSXStyle>
-
-      </div>;
-}

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

@@ -1,12 +0,0 @@
-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/input.js

@@ -1,30 +0,0 @@
-
-
-
-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/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.lightningcss.js

@@ -1,43 +0,0 @@
-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/issue-31562-interpolation-in-mdea/output.swc.js

@@ -1,43 +0,0 @@
-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/input.js

@@ -1,9 +0,0 @@
-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/transform/tests/fixture/mixed-global-scoped/output.lightningcss.js

@@ -1,11 +0,0 @@
-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/mixed-global-scoped/output.swc.js

@@ -1,11 +0,0 @@
-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>);