@swc/plugin-styled-jsx 1.5.83 → 1.5.86

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

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

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

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

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

@@ -1,55 +0,0 @@
-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/transform/tests/fixture/attribute-generation-classname-rewriting/output.lightningcss.js

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

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

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