Source file test_style.ml

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
open! Core
open Test_utils

let%expect_test "Style" =
  test
    {|
    <div style="background-color: tomato"> </div>
  |};
  [%expect
    {|
    Difference between ppx_html and ppx_html_kernel

    PPX_HTML:
    Html_syntax.Node.div
      ~attrs:[([%css "background-color: tomato;"] : Virtual_dom.Vdom.Attr.t)]
      [Html_syntax.Node.Primitives.text " "]

    PPX_HTML_KERNEL (diff):
    === DIFF HUNK ===
      Html_syntax.Node.div
    -|  ~attrs:[([%css "background-color: tomato;"] : Virtual_dom.Vdom.Attr.t)]
    +|  ~attrs:[((Html_syntax.Attr.style)[@merlin.focus ])
    +|            "background-color: tomato"]
        [Html_syntax.Node.Primitives.text " "]
    |}]
;;

let%expect_test "Many styles" =
  test
    {|
    <div style="background-color: tomato; background-color: red"> </div>
  |};
  [%expect
    {|
    Difference between ppx_html and ppx_html_kernel

    PPX_HTML:
    Html_syntax.Node.div
      ~attrs:[([%css "background-color: tomato; background-color: red;"] :
             Virtual_dom.Vdom.Attr.t)] [Html_syntax.Node.Primitives.text " "]

    PPX_HTML_KERNEL (diff):
    === DIFF HUNK ===
      Html_syntax.Node.div
    -|  ~attrs:[([%css "background-color: tomato; background-color: red;"] :
    -|         Virtual_dom.Vdom.Attr.t)] [Html_syntax.Node.Primitives.text " "]
    +|  ~attrs:[((Html_syntax.Attr.style)[@merlin.focus ])
    +|            "background-color: tomato; background-color: red"]
    +|  [Html_syntax.Node.Primitives.text " "]
    |}]
;;

let%expect_test "Interpolation within styles" =
  (* NOTE: We want to make ppx_css do this. *)
  test
    {|
    <div style="background-color: tomato; background-color: %{color}"> </div>
  |};
  [%expect
    {|
    Difference between ppx_html and ppx_html_kernel

    PPX_HTML:
    Html_syntax.Node.div
      ~attrs:[([%css "background-color: tomato; background-color: %{(color)};"] :
             Virtual_dom.Vdom.Attr.t)] [Html_syntax.Node.Primitives.text " "]

    PPX_HTML_KERNEL (diff):
    === DIFF HUNK ===
      Html_syntax.Node.div
    -|  ~attrs:[([%css "background-color: tomato; background-color: %{(color)};"] :
    -|         Virtual_dom.Vdom.Attr.t)] [Html_syntax.Node.Primitives.text " "]
    +|  ~attrs:[((Html_syntax.Attr.style)[@merlin.focus ])
    +|            ([%string
    +|               "background-color: tomato; background-color: %{(color)}"])]
    +|  [Html_syntax.Node.Primitives.text " "]
    |}]
;;

let%expect_test "Whole-sale interpolation does not call ppx_css" =
  (* NOTE: We do not want to make ppx_css do this. *)
  test
    {|
    <div style=%{Css_gen.foo}> </div>
  |};
  [%expect
    {|
    Difference between ppx_html and ppx_html_kernel

    PPX_HTML:
    Html_syntax.Node.div
      ~attrs:[(Html_syntax.Attr.style Css_gen.foo : Virtual_dom.Vdom.Attr.t)]
      [Html_syntax.Node.Primitives.text " "]

    PPX_HTML_KERNEL (diff):
    === DIFF HUNK ===
      Html_syntax.Node.div
    -|  ~attrs:[(Html_syntax.Attr.style Css_gen.foo : Virtual_dom.Vdom.Attr.t)]
    +|  ~attrs:[((Html_syntax.Attr.style)[@merlin.focus ]) Css_gen.foo]
        [Html_syntax.Node.Primitives.text " "]
    |}]
;;

let%expect_test "PPX CSS's interpolation syntax" =
  test
    {|
    <div style="background-color: %{color#Color}"> </div>
  |};
  [%expect
    {|
    Difference between ppx_html and ppx_html_kernel

    PPX_HTML:
    Html_syntax.Node.div
      ~attrs:[([%css "background-color: %{(color)#Color};"] : Virtual_dom.Vdom.Attr.t)]
      [Html_syntax.Node.Primitives.text " "]

    PPX_HTML_KERNEL (diff):
    === DIFF HUNK ===
      Html_syntax.Node.div
    -|  ~attrs:[([%css "background-color: %{(color)#Color};"] : Virtual_dom.Vdom.Attr.t)]
    +|  ~attrs:[((Html_syntax.Attr.style)[@merlin.focus ])
    +|            ([%string "background-color: %{(color)#Color}"])]
        [Html_syntax.Node.Primitives.text " "]
    |}]
;;