@swc/plugin-styled-jsx 1.3.0 → 1.5.0

package/tests/errors/nested-style-tags/input.js

@@ -0,0 +1,31 @@
+const Component = () => (
+  <>
+    <header>
+      <Comp>
+        <style jsx>{styles}</style>
+        <style jsx global>{``}</style>
+      </Comp>
+      <p><style jsx>{``}</style></p>
+    </header>
+    <div>
+      <h1>
+        Welcome!
+        <style jsx>{``}</style>
+      </h1>
+      <style jsx>{``}</style>
+    </div>
+    <div>
+      <style jsx>{``}</style>
+      <h1>
+        Hello world!
+        <style jsx global>{``}</style>
+      </h1>
+    </div>
+    <div>
+      <>
+        <style jsx>{styles}</style>
+      </>
+      <style jsx>{``}</style>
+    </div>
+  </>
+)

package/tests/errors/nested-style-tags/output.js

@@ -0,0 +1,31 @@
+import _JSXStyle from "styled-jsx/style";
+const Component = ()=><>
+    <header >
+      <Comp >
+        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+        <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+      </Comp>
+      <p className={"jsx-b3e1b6a7c9b96113"}><_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle></p>
+    </header>
+    <div className={"jsx-b3e1b6a7c9b96113"}>
+      <h1 className={"jsx-b3e1b6a7c9b96113"}>
+        Welcome!
+        <style jsx>{``}</style>
+      </h1>
+      <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+    </div>
+    <div className={"jsx-b3e1b6a7c9b96113"}>
+      <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+      <h1 className={"jsx-b3e1b6a7c9b96113"}>
+        Hello world!
+        <style jsx global>{``}</style>
+      </h1>
+    </div>
+    <div className={"jsx-b3e1b6a7c9b96113"}>
+      <>
+        <style jsx>{styles}</style>
+      </>
+      <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+    </div>
+  </>
+;

package/tests/errors/nested-style-tags/output.stderr

@@ -0,0 +1,21 @@
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:13:9]
+ 13 | <style jsx>{``}</style>
+    : ^^^^^^^^^^^^^^^^^^^^^^^
+    `----
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:21:9]
+ 21 | <style jsx global>{``}</style>
+    : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    `----
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:26:9]
+ 26 | <style jsx>{styles}</style>
+    : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    `----

package/tests/errors/no-child/input.js

@@ -0,0 +1,6 @@
+export default () => (
+  <div>
+    <style jsx>
+    </style>
+  </div>
+)

package/tests/errors/no-child/output.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div >
+
+    <style jsx>
+
+    </style>
+
+  </div>);

package/tests/errors/no-child/output.stderr

@@ -0,0 +1,7 @@
+
+  x Expected one child under JSX style tag, but got 0.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:3:5]
+ 3 | ,-> <style jsx>
+ 4 | `->     </style>
+   `----

package/tests/errors/ts-with-css-resolve/input.js

@@ -0,0 +1,10 @@
+import css from 'styled-jsx/css'
+
+export default css.resolve`
+  .container {
+    background: #000;
+    color: white;
+    font-weight: 700;
+    height: 100px;
+  }
+`

package/tests/errors/ts-with-css-resolve/output.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+export default {
+    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
+    className: "jsx-71f03d42ea0ec6"
+};

package/tests/errors/ts-with-css-resolve/output.stderr

@@ -0,0 +1,2 @@
+
+  x /some-project/src/some-file.ts uses `css.resolve`, but ends with `.ts`. The file extension needs to be `.tsx` so that the jsx injected by `css.resolve` will be transformed.

package/tests/errors/two-children/input.js

@@ -0,0 +1,8 @@
+export default () => (
+  <div>
+    <style jsx>
+      {`.p {}`}
+      {`.p {}`}
+    </style>
+  </div>
+)

package/tests/errors/two-children/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div >
+
+    <style jsx>
+
+      {`.p {}`}
+
+      {`.p {}`}
+
+    </style>
+
+  </div>);

package/tests/errors/two-children/output.stderr

@@ -0,0 +1,9 @@
+
+  x Expected one child under JSX style tag, but got 2.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:3:5]
+ 3 | ,-> <style jsx>
+ 4 | |         {`.p {}`}
+ 5 | |         {`.p {}`}
+ 6 | `->     </style>
+   `----

package/tests/errors/wrong-child-type/input.js

@@ -0,0 +1,7 @@
+export default () => (
+  <div>
+    <style jsx>
+      10
+    </style>
+  </div>
+)

package/tests/errors/wrong-child-type/output.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div >
+
+    <style jsx>
+
+      10
+
+    </style>
+
+  </div>);

package/tests/errors/wrong-child-type/output.stderr

@@ -0,0 +1,8 @@
+
+  x Expected a single child of type JSXExpressionContainer under JSX Style tag.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:3:5]
+ 3 | ,-> <style jsx>
+ 4 | |         10
+ 5 | `->     </style>
+   `----

package/tests/errors/wrong-jsx-expression-type/input.js

@@ -0,0 +1,7 @@
+export default () => (
+  <div>
+    <style jsx>
+      {[]}
+    </style>
+  </div>
+)

package/tests/errors/wrong-jsx-expression-type/output.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div >
+
+    <style jsx>
+
+      {[]}
+
+    </style>
+
+  </div>);

package/tests/errors/wrong-jsx-expression-type/output.stderr

@@ -0,0 +1,8 @@
+
+  x Expected a template literal, string or identifier inside the JSXExpressionContainer.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:3:5]
+ 3 | ,-> <style jsx>
+ 4 | |         {[]}
+ 5 | `->     </style>
+   `----

package/tests/fixture/absent/input.js

@@ -0,0 +1,6 @@
+const a = () => (
+  <div>
+    <p>hi</p>
+    <style>{'woot'}</style>
+  </div>
+)

package/tests/fixture/absent/output.js

@@ -0,0 +1,7 @@
+const a = ()=><div >
+
+    <p >hi</p>
+
+    <style >{'woot'}</style>
+
+  </div>;

package/tests/fixture/attribute-generation-classname-rewriting/input.js

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

package/tests/fixture/attribute-generation-classname-rewriting/output.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/tests/fixture/attribute-generation-modes/input.js

@@ -0,0 +1,166 @@
+import styles from './styles'
+
+const styles2 = require('./styles2')
+
+// external only
+export const Test1 = () => (
+  <div>
+    <p>external only</p>
+    <style jsx>{styles}</style>
+    <style jsx>{styles2}</style>
+  </div>
+)
+
+// external and static
+export const Test2 = () => (
+  <div>
+    <p>external and static</p>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+    `}</style>
+    <style jsx>{styles}</style>
+  </div>
+)
+
+// external and dynamic
+export const Test3 = ({ color }) => (
+  <div>
+    <p>external and dynamic</p>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+    <style jsx>{styles}</style>
+  </div>
+)
+
+// external, static and dynamic
+export const Test4 = ({ color }) => (
+  <div>
+    <p>external, static and dynamic</p>
+    <style jsx>{`
+      p {
+        display: inline-block;
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+    <style jsx>{styles}</style>
+  </div>
+)
+
+// static only
+export const Test5 = () => (
+  <div>
+    <p>static only</p>
+    <style jsx>{`
+      p {
+        display: inline-block;
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
+
+// static and dynamic
+export const Test6 = ({ color }) => (
+  <div>
+    <p>static and dynamic</p>
+    <style jsx>{`
+      p {
+        display: inline-block;
+      }
+    `}</style>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+  </div>
+)
+
+// dynamic only
+export const Test7 = ({ color }) => (
+  <div>
+    <p>dynamic only</p>
+    <style jsx>{`
+      p {
+        color: ${color};
+      }
+    `}</style>
+  </div>
+)
+
+// dynamic with scoped compound variable
+export const Test8 = ({ color }) => {
+  if (color) {
+    const innerProps = { color }
+
+    return (
+      <div>
+        <p>dynamic with scoped compound variable</p>
+        <style jsx>{`
+          p {
+            color: ${innerProps.color};
+          }
+        `}</style>
+      </div>
+    )
+  }
+}
+
+// dynamic with compound variable
+export const Test9 = ({ color }) => {
+  const innerProps = { color }
+
+  return (
+    <div>
+      <p>dynamic with compound variable</p>
+      <style jsx>{`
+        p {
+          color: ${innerProps.color};
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const foo = 'red'
+
+// dynamic with constant variable
+export const Test10 = () => (
+  <div>
+    <p>dynamic with constant variable</p>
+    <style jsx>{`
+      p {
+        color: ${foo};
+      }
+    `}</style>
+  </div>
+)
+
+// dynamic with complex scope
+export const Test11 = ({ color }) => {
+  const items = Array.from({ length: 5 }).map((item, i) => (
+    <li className="item" key={i}>
+      <style jsx>{`
+        .item {
+          color: ${color};
+        }
+      `}</style>
+      Item #{i + 1}
+    </li>
+  ))
+
+  return <ul className="items">{items}</ul>
+}