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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

import _JSXStyle from "next/dist/shared/lib/styled-jsx";
const darken = (c)=>c;
const color = 'red';
const otherColor = 'green';
const mediumScreen = '680px';
const animationDuration = '200ms';
const animationName = 'my-cool-animation';
const obj = {
    display: 'block'
};
export default (({ display  })=><div className={"jsx-ee922fe7eac00c5e " + _JSXStyle.dynamic([
        [
            "374046f7d83960f0",
            [
                display ? 'block' : 'none'
            ]
        ],
        [
            "f297f0e8b24d55b4",
            [
                darken(color) + 2
            ]
        ],
        [
            "f03bb8922a3e69b1",
            [
                darken(color)
            ]
        ]
    ])}>

    <p className={"jsx-ee922fe7eac00c5e " + _JSXStyle.dynamic([
        [
            "374046f7d83960f0",
            [
                display ? 'block' : 'none'
            ]
        ],
        [
            "f297f0e8b24d55b4",
            [
                darken(color) + 2
            ]
        ],
        [
            "f03bb8922a3e69b1",
            [
                darken(color)
            ]
        ]
    ])}>test</p>

    <_JSXStyle id={"a8107430c6c528d0"}>{`p.${color}.jsx-ee922fe7eac00c5e{color:${otherColor};display:${obj.display}}`}</_JSXStyle>

    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-ee922fe7eac00c5e{color:red}"}</_JSXStyle>

    <_JSXStyle id={"f0a3b803e45f3568"}>{`body{background:${color}}`}</_JSXStyle>

    <_JSXStyle id={"f0a3b803e45f3568"}>{`body{background:${color}}`}</_JSXStyle>

    // TODO: the next two should have the same hash

    <_JSXStyle id={"accb2339a5faf0f2"}>{`p.jsx-ee922fe7eac00c5e{color:${color}}`}</_JSXStyle>

    <_JSXStyle id={"accb2339a5faf0f2"}>{`p.jsx-ee922fe7eac00c5e{color:${color}}`}</_JSXStyle>

    <_JSXStyle id={"f03bb8922a3e69b1"} dynamic={[
        darken(color)
    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color)}}`}</_JSXStyle>

    <_JSXStyle id={"f297f0e8b24d55b4"} dynamic={[
        darken(color) + 2
    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color) + 2}}`}</_JSXStyle>

    <_JSXStyle id={"d7df5b0be4ac2e3b"}>{`@media(min-width:${mediumScreen}){p.jsx-ee922fe7eac00c5e{color:green}p.jsx-ee922fe7eac00c5e{color:${`red`}}}p.jsx-ee922fe7eac00c5e{color:red}`}</_JSXStyle>

    <_JSXStyle id={"ff76c479bb5bf1a9"}>{`p.jsx-ee922fe7eac00c5e{-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};-o-animation-duration:${animationDuration};animation-duration:${animationDuration}}`}</_JSXStyle>

    <_JSXStyle id={"f4ba3ad133457656"}>{`p.jsx-ee922fe7eac00c5e{-webkit-animation:${animationDuration} forwards ${animationName};-moz-animation:${animationDuration} forwards ${animationName};-o-animation:${animationDuration} forwards ${animationName};animation:${animationDuration} forwards ${animationName}}div.jsx-ee922fe7eac00c5e{background:${color}}`}</_JSXStyle>



    <_JSXStyle id={"374046f7d83960f0"} dynamic={[
        display ? 'block' : 'none'
    ]}>{`span.__jsx-style-dynamic-selector{display:${display ? 'block' : 'none'}}`}</_JSXStyle>

    // TODO: causes bad syntax

    {}

  </div>);