@swc/plugin-styled-jsx 1.5.75 → 1.5.77

package/transform/tests/fixture/attribute-generation-classname-rewriting/output.swc.js

@@ -0,0 +1,112 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=>{
+    const Element = 'div';
+    return <div className={"jsx-abb4c2202db1a207"}>
+
+      <div {...test.test} className={"jsx-abb4c2202db1a207" + " " + (test.test && test.test.className != null && test.test.className || "test")}/>
+
+      <div {...test.test.test} className={"jsx-abb4c2202db1a207" + " " + (test.test.test && test.test.test.className != null && test.test.test.className || "test")}/>
+
+      <div {...this.test.test} className={"jsx-abb4c2202db1a207" + " " + (this.test.test && this.test.test.className != null && this.test.test.className || "test")}/>
+
+      <div data-test="test" className={"jsx-abb4c2202db1a207"}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + `test`}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + `test${true ? ' test2' : ''}`}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + ('test ' + test || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + ([
+        'test',
+        'test2'
+    ].join(' ') || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (true && 'test' || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + ((test ? 'test' : null) || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (test || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (test && 'test' || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (test && test('test') || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (undefined || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (null || "")}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + (false || "")}/>
+
+      <div data-test className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div data-test className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div data-test="test" className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || 'test')}/>
+
+      <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || 'test')}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || `test ${test ? 'test' : ''}`)}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test('test') || "")}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test('test') && 'test' || "")}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test('test') && test2('test') || "")}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + 'test'}/>
+
+      <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || 'test')}/>
+
+      <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || "")}/>
+
+      <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")}/>
+
+      <div {...props} data-foo {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")}/>
+
+      <div {...props} data-foo {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || 'test')}/>
+
+      <div {...{
+        id: 'foo'
+    }} className={"jsx-abb4c2202db1a207"}/>
+
+      <div className={"jsx-abb4c2202db1a207" + " " + 'foo'}/>
+
+      <div {...{
+        className: 'foo'
+    }} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
+      <div className="test" className={"jsx-abb4c2202db1a207" + " " + 'foo'}/>
+
+      <div {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || 'foo')}/>
+
+      <div {...{
+        className: 'foo'
+    }} {...bar} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
+      <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || 'foo')}/>
+
+      <div className="test" className={"jsx-abb4c2202db1a207" + " " + (props.className || "")}/>
+
+      <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || props.className || "")}/>
+
+      <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (props.className || "")}/>
+
+      <div {...bar()} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
+      <Element className={"jsx-abb4c2202db1a207"}/>
+
+      <Element className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
+      <Element {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || "")}/>
+
+      <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>
+
+    </div>;
+});

package/transform/tests/fixture/attribute-generation-modes/output.swc.js

@@ -0,0 +1,228 @@
+import _JSXStyle from "styled-jsx/style";
+import styles from './styles';
+const styles2 = require('./styles2');
+// external only
+export const Test1 = ()=><div className={`jsx-${styles2.__hash} jsx-${styles.__hash}`}>
+
+    <p className={`jsx-${styles2.__hash} jsx-${styles.__hash}`}>external only</p>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
+
+  </div>;
+// external and static
+export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>
+
+    <p className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>external and static</p>
+
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-81a68341e430a972{color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// external and dynamic
+export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>external and dynamic</p>
+
+    <_JSXStyle id={"f08108daf927b99d"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// external, static and dynamic
+export const Test4 = ({ color })=><div className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>external, static and dynamic</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"9779eebad83219f8"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
+  </div>;
+// static only
+export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
+
+    <p className={"jsx-df0159ebd3f9fb6f"}>static only</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-df0159ebd3f9fb6f{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-df0159ebd3f9fb6f{color:red}"}</_JSXStyle>
+
+  </div>;
+// static and dynamic
+export const Test6 = ({ color })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
+        [
+            "9779eebad83219f8",
+            [
+                color
+            ]
+        ]
+    ])}>static and dynamic</p>
+
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
+
+    <_JSXStyle id={"9779eebad83219f8"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+  </div>;
+// dynamic only
+export const Test7 = ({ color })=><div className={_JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>
+
+    <p className={_JSXStyle.dynamic([
+        [
+            "f08108daf927b99d",
+            [
+                color
+            ]
+        ]
+    ])}>dynamic only</p>
+
+    <_JSXStyle id={"f08108daf927b99d"} dynamic={[
+        color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+  </div>;
+// dynamic with scoped compound variable
+export const Test8 = ({ color })=>{
+    if (color) {
+        const innerProps = {
+            color
+        };
+        return <div className={_JSXStyle.dynamic([
+            [
+                "62256c563b89bfae",
+                [
+                    innerProps.color
+                ]
+            ]
+        ])}>
+
+        <p className={_JSXStyle.dynamic([
+            [
+                "62256c563b89bfae",
+                [
+                    innerProps.color
+                ]
+            ]
+        ])}>dynamic with scoped compound variable</p>
+
+        <_JSXStyle id={"62256c563b89bfae"} dynamic={[
+            innerProps.color
+        ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
+
+      </div>;
+    }
+};
+// dynamic with compound variable
+export const Test9 = ({ color })=>{
+    const innerProps = {
+        color
+    };
+    return <div className={_JSXStyle.dynamic([
+        [
+            "708723e452f192e4",
+            [
+                innerProps.color
+            ]
+        ]
+    ])}>
+
+      <p className={_JSXStyle.dynamic([
+        [
+            "708723e452f192e4",
+            [
+                innerProps.color
+            ]
+        ]
+    ])}>dynamic with compound variable</p>
+
+      <_JSXStyle id={"708723e452f192e4"} dynamic={[
+        innerProps.color
+    ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
+
+    </div>;
+};
+const foo = 'red';
+// dynamic with constant variable
+export const Test10 = ()=><div className={"jsx-f849b7a02be96503"}>
+
+    <p className={"jsx-f849b7a02be96503"}>dynamic with constant variable</p>
+
+    <_JSXStyle id={"f849b7a02be96503"}>{`p.jsx-f849b7a02be96503{color:${foo}}`}</_JSXStyle>
+
+  </div>;
+// dynamic with complex scope
+export const Test11 = ({ color })=>{
+    const items = Array.from({
+        length: 5
+    }).map((item, i)=><li key={i} className={_JSXStyle.dynamic([
+            [
+                "a2585dff420632b1",
+                [
+                    color
+                ]
+            ]
+        ]) + " " + "item"}>
+
+      <_JSXStyle id={"a2585dff420632b1"} dynamic={[
+            color
+        ]}>{`.item.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
+
+      Item #{i + 1}
+
+    </li>);
+    return <ul className="items">{items}</ul>;
+};

package/transform/tests/fixture/class/output.swc.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+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/comments/output.swc.js

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

package/transform/tests/fixture/component-attribute/output.swc.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
+    <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
+
+    <Component/>
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
+  </div>;

package/transform/tests/fixture/conflicts/output.swc.js

@@ -0,0 +1,14 @@
+// TODO
+// export const _JSXStyle = '_JSXStyle-literal'
+// export default function() {
+//   return (
+//     <div>
+//       <p>test</p>
+//       <style jsx>{`
+//         p {
+//           color: red;
+//         }
+//       `}</style>
+//     </div>
+//   )
+// }

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

@@ -0,0 +1,11 @@
+import _JSXStyle from "styled-jsx/style";
+function NavigationItem({ active, className }) {
+    return <span className={"jsx-2342aae4628612c6" + " " + (cn({
+        active
+    }, className, 'navigation-item') || "")}>
+
+      <_JSXStyle id={"2342aae4628612c6"}>{'.navigation-item.jsx-2342aae4628612c6 a::after{content:attr(data-text);content:attr(data-text)/""}'}</_JSXStyle>
+
+    </span>;
+}
+export default NavigationItem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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