@swc/plugin-styled-jsx 1.5.84 → 1.5.86

package/transform/tests/fixture/multiple-jsx/input.js

@@ -1,43 +0,0 @@
-const attrs = {
-  id: 'test'
-}
-
-const Test1 = () => (
-  <div>
-    <span {...attrs} data-test="test">test</span>
-    <Component />
-    <style jsx>{`
-      span {
-        color: red;
-      }
-    `}</style>
-  </div>
-)
-
-const Test2 = () => <span>test</span>
-
-const Test3 = () => (
-  <div>
-    <span>test</span>
-    <style jsx>{`
-      span {
-        color: red;
-      }
-    `}</style>
-  </div>
-)
-
-export default class {
-  render () {
-    return (
-      <div>
-        <p>test</p>
-        <style jsx>{`
-          p {
-            color: red;
-          }
-        `}</style>
-      </div>
-    )
-  }
-}

package/transform/tests/fixture/multiple-jsx/output.lightningcss.js

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

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

@@ -1,10 +0,0 @@
-import css from 'styled-jsx/css'
-
-export default css`
-  @media (max-width: 870px) {
-    :global(th.expiration-date-cell),
-    :global(td.expiration-date-cell) {
-      display: none;
-    }
-  }
-`

package/transform/tests/fixture/next-54653/output.lightningcss.js

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

package/transform/tests/fixture/next-54653/output.swc.js

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

@@ -1,7 +0,0 @@
-export default () => (
-  <div>
-    <p>woot</p>
-    <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>
-    <style jsx>{'p { color: red }'}</style>
-  </div>
-)

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

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

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

@@ -1,30 +0,0 @@
-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/not-styled-jsx-tagged-templates/output.lightningcss.js

@@ -1,23 +0,0 @@
-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/not-styled-jsx-tagged-templates/output.swc.js

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

@@ -1,17 +0,0 @@
-import Link from "next/link";
-
-export default function IndexPage() {
-  return (
-    <div>
-      Hello World.{" "}
-      <Link href="/about">
-        <a>Abound</a>
-      </Link>
-      <style jsx>{`
-        a {
-          color: ${"#abcdef"}12;
-        }
-      `}</style>
-    </div>
-  );
-}

package/transform/tests/fixture/number-after-placeholder/output.lightningcss.js

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

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

@@ -1,10 +0,0 @@
-export default () => (
-  <div>
-    <p>test</p>
-    <style jsx>{`
-      .container :global(> *) {
-        color: red;
-      }
-    `}</style>
-  </div>
-)

package/transform/tests/fixture/one-off-global-selectors/output.lightningcss.js

@@ -1,8 +0,0 @@
-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/one-off-global-selectors/output.swc.js

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

@@ -1,8 +0,0 @@
-// TODO: needs sourcemaps
-// export default () => (
-//   <div>
-//     <p>test</p>
-//     <p>woot</p>
-//     <style jsx>{'p { color: red }'}</style>
-//   </div>
-// )

package/transform/tests/fixture/source-maps/output.lightningcss.js

@@ -1,8 +0,0 @@
-// TODO: needs sourcemaps
-// export default () => (
-//   <div>
-//     <p>test</p>
-//     <p>woot</p>
-//     <style jsx>{'p { color: red }'}</style>
-//   </div>
-// )

package/transform/tests/fixture/source-maps/output.swc.js

@@ -1,8 +0,0 @@
-// TODO: needs sourcemaps
-// export default () => (
-//   <div>
-//     <p>test</p>
-//     <p>woot</p>
-//     <style jsx>{'p { color: red }'}</style>
-//   </div>
-// )

package/transform/tests/fixture/stateless/input.js

@@ -1,8 +0,0 @@
-export default () => (
-  <div>
-    <p>test</p>
-    <p>woot</p>
-    <p>woot</p>
-    <style jsx>{'p { color: red }'}</style>
-  </div>
-)

package/transform/tests/fixture/stateless/output.lightningcss.js

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

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

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

package/transform/tests/fixture/styles/input.js

@@ -1,57 +0,0 @@
-import css, { resolve, global } from 'styled-jsx/css'
-import colors, { size } from './constants'
-const color = 'red'
-
-const bar = css`
-  div {
-    font-size: 3em;
-  }
-`
-
-const baz = css.global`
-  div {
-    font-size: 3em;
-  }
-`
-
-const a = global`
-  div {
-    font-size: ${size}em;
-  }
-`
-
-export const uh = bar
-
-export const foo = css`div { color: ${color}}`
-
-css.resolve`
-  div {
-    color: ${colors.green.light};
-  }
-  a { color: red }
-`
-
-const b = resolve`
-  div {
-    color: ${colors.green.light};
-  }
-  a { color: red }
-`
-
-const dynamic = colors => {
-  const b = resolve`
-    div {
-      color: ${colors.green.light};
-    }
-    a { color: red }
-  `
-}
-
-export default css.resolve`
-  div {
-    font-size: 3em;
-  }
-  p {
-    color: ${color};
-  }
-`

package/transform/tests/fixture/styles/output.lightningcss.js

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

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

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

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

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

@@ -1,11 +0,0 @@
-// 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/styles-external-invalid2/output.lightningcss.js

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

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

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

package/transform/tests/fixture/styles2/output.lightningcss.js

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

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

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