@swc/plugin-styled-jsx 1.5.84 → 1.5.87

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

@@ -1,25 +0,0 @@
-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/transform/tests/fixture/css-tag-same-file/output.lightningcss.js

@@ -1,21 +0,0 @@
-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/transform/tests/fixture/css-tag-same-file/output.swc.js

@@ -1,21 +0,0 @@
-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/transform/tests/fixture/different-jsx-ids/input.js

@@ -1,23 +0,0 @@
-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/transform/tests/fixture/different-jsx-ids/output.lightningcss.js

@@ -1,24 +0,0 @@
-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/transform/tests/fixture/different-jsx-ids/output.swc.js

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

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

@@ -1,40 +0,0 @@
-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/transform/tests/fixture/dynamic-element/output.swc.js

@@ -1,40 +0,0 @@
-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/transform/tests/fixture/dynamic-element-class/input.js

@@ -1,32 +0,0 @@
-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/transform/tests/fixture/dynamic-element-class/output.lightningcss.js

@@ -1,25 +0,0 @@
-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/transform/tests/fixture/dynamic-element-class/output.swc.js

@@ -1,25 +0,0 @@
-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/transform/tests/fixture/dynamic-element-external/input.js

@@ -1,12 +0,0 @@
-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/transform/tests/fixture/dynamic-element-external/output.lightningcss.js

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

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

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

package/transform/tests/fixture/dynamic-this-in-arrow/input.js

@@ -1,41 +0,0 @@
-// TODO
-// import React, { Component } from 'react'
-
-// export default class Index extends Component {
-//   static getInitialProps() {
-//     return { color: 'aquamarine' }
-//   }
-
-//   render() {
-//     return (
-//       <div>
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             {[3, 4].map(idx2 => (
-//               <div key={idx2}>{this.props.color}</div>
-//             ))}
-//           </div>
-//         ))}
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             <div>
-//               {this.props.color}
-//               <div className="something">
-//                 <React.Fragment>
-//                   <div>
-//                     <div>{this.props.color} hello there</div>
-//                   </div>
-//                 </React.Fragment>
-//               </div>
-//             </div>
-//           </div>
-//         ))}
-//         <style jsx>{`
-//           div {
-//             background: ${this.props.color};
-//           }
-//         `}</style>
-//       </div>
-//     )
-//   }
-// }

package/transform/tests/fixture/dynamic-this-in-arrow/output.lightningcss.js

@@ -1,39 +0,0 @@
-// TODO
-// import React, { Component } from 'react'
-// export default class Index extends Component {
-//   static getInitialProps() {
-//     return { color: 'aquamarine' }
-//   }
-//   render() {
-//     return (
-//       <div>
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             {[3, 4].map(idx2 => (
-//               <div key={idx2}>{this.props.color}</div>
-//             ))}
-//           </div>
-//         ))}
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             <div>
-//               {this.props.color}
-//               <div className="something">
-//                 <React.Fragment>
-//                   <div>
-//                     <div>{this.props.color} hello there</div>
-//                   </div>
-//                 </React.Fragment>
-//               </div>
-//             </div>
-//           </div>
-//         ))}
-//         <style jsx>{`
-//           div {
-//             background: ${this.props.color};
-//           }
-//         `}</style>
-//       </div>
-//     )
-//   }
-// }

package/transform/tests/fixture/dynamic-this-in-arrow/output.swc.js

@@ -1,39 +0,0 @@
-// TODO
-// import React, { Component } from 'react'
-// export default class Index extends Component {
-//   static getInitialProps() {
-//     return { color: 'aquamarine' }
-//   }
-//   render() {
-//     return (
-//       <div>
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             {[3, 4].map(idx2 => (
-//               <div key={idx2}>{this.props.color}</div>
-//             ))}
-//           </div>
-//         ))}
-//         {[1, 2].map(idx => (
-//           <div key={idx}>
-//             <div>
-//               {this.props.color}
-//               <div className="something">
-//                 <React.Fragment>
-//                   <div>
-//                     <div>{this.props.color} hello there</div>
-//                   </div>
-//                 </React.Fragment>
-//               </div>
-//             </div>
-//           </div>
-//         ))}
-//         <style jsx>{`
-//           div {
-//             background: ${this.props.color};
-//           }
-//         `}</style>
-//       </div>
-//     )
-//   }
-// }

package/transform/tests/fixture/exported-jsx-style/input.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/exported-jsx-style/output.lightningcss.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/exported-jsx-style/output.swc.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/exported-non-jsx-style/input.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/exported-non-jsx-style/output.lightningcss.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/exported-non-jsx-style/output.swc.js

@@ -1 +0,0 @@
-// module.exports = () => <p><style>{`p { color:red; }`}</style></p>

package/transform/tests/fixture/external-nested-scope/input.js

@@ -1,5 +0,0 @@
-import css from 'styled-jsx/css'
-
-function test() {
-  css.resolve`div { color: red }`
-}

package/transform/tests/fixture/external-nested-scope/output.lightningcss.js

@@ -1,7 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-function test() {
-    ({
-        styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
-        className: "jsx-abb4c2202db1a207"
-    });
-}

package/transform/tests/fixture/external-nested-scope/output.swc.js

@@ -1,7 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-function test() {
-    ({
-        styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
-        className: "jsx-abb4c2202db1a207"
-    });
-}

package/transform/tests/fixture/external-stylesheet/input.js

@@ -1,41 +0,0 @@
-import styles from './styles'
-const styles2 = require('./styles2')
-import { foo as styles3 } from './styles'
-
-export default () => (
-  <div>
-    <p className="foo">test</p>
-    <p>woot</p>
-    <style jsx global>
-      {styles2}
-    </style>
-    <style jsx>{styles3}</style>
-    <div>woot</div>
-    <style jsx>{`
-      p {
-        color: red;
-      }
-      div {
-        color: green;
-      }
-    `}</style>
-    <style jsx>{styles}</style>
-  </div>
-)
-
-export const Test = () => (
-  <div>
-    <p className="foo">test</p>
-    <p>woot</p>
-    <style jsx>{styles3}</style>
-    <div>woot</div>
-    <style jsx>{`
-      p {
-        color: red;
-      }
-      div {
-        color: green;
-      }
-    `}</style>
-  </div>
-)

package/transform/tests/fixture/external-stylesheet/output.lightningcss.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>;