styled_jsx 10.0.0

AST transforms visitor 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>
  );
};