@swc/plugin-styled-jsx 1.5.84 → 1.5.87

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

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

@@ -1,49 +0,0 @@
-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/too-many/output.swc.js

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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-escape-2/output.swc.js

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

@@ -1,17 +0,0 @@
-export default class {
-    render() {
-      return (
-        <div>
-          <p>test</p>
-          <style jsx>{`
-            @media only screen {
-                a {
-                    ${inputSize ? 'height: calc(2 * var(--a)) !important;' : ''}
-                }
-            }
-          `}</style>
-        </div>
-      )
-    }
-  }
-  

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

@@ -1,28 +0,0 @@
-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;' : ''}}`}</_JSXStyle>
-
-        </div>;
-    }
-}

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

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

@@ -1,21 +0,0 @@
-export default class {
-    render() {
-      return (
-        <div>
-          <p>test</p>
-          <style jsx>{`
-            :global(.a):hover .b {
-              a: ${a[b]}px !important;
-              b: translate3d(
-                  0,
-                  ${-1 * (c || 0)}px,
-                  -${d}px
-                )
-                scale(1) !important;
-            }
-          `}</style>
-        </div>
-      )
-    }
-  }
-  

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

@@ -1,34 +0,0 @@
-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-2-as-part-of-value/output.swc.js

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

@@ -1,17 +0,0 @@
-export default class {
-    render() {
-      return (
-        <div>
-          <p>test</p>
-          <style jsx>{`
-            @media only screen {
-                a {
-                    color: ${a};
-                }
-            }
-          `}</style>
-        </div>
-      )
-    }
-  }
-  

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

@@ -1,28 +0,0 @@
-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-3-as-value/output.swc.js

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

@@ -1,17 +0,0 @@
-export default class {
-    render() {
-      return (
-        <div>
-          <p>test</p>
-          <style jsx>{`
-            :global(.a):hover .b {
-              display: inline-block;
-              padding: 0 ${a || 'var(--c)'};
-              color: ${b || 'inherit'};
-            }
-          `}</style>
-        </div>
-      )
-    }
-  }
-  

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

@@ -1,31 +0,0 @@
-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{padding:0 ${a || 'var(--c)'};color:${b || 'inherit'};display:inline-block}`}</_JSXStyle>
-
-        </div>;
-    }
-}

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

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

@@ -1,16 +0,0 @@
-export default class {
-    render() {
-      return (
-        <div>
-          <p>test</p>
-          <style jsx>{`
-            .item {
-              max-width: ${a ? '100%' : '200px'};
-              padding: ${b ? '0' : '8px 20px'};
-            }
-          `}</style>
-        </div>
-      )
-    }
-  }
-  

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

@@ -1,31 +0,0 @@
-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/tpl-placeholder-5-values-of-multiple-properties/output.swc.js

@@ -1,31 +0,0 @@
-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>;
-    }
-}