poly_styled_jsx 0.6.1

AST transforms for styled-jsx
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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>
  )
}