add more props

packages/css-property-parser/lib/Parser.re

@@ -1415,18 +1415,18 @@ and property_overflow_anchor = [%value.rec "'auto' | 'none'"]
 and property_overflow_block = [%value.rec
   "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
 ]
-and property_overflow_clip_box = [%value.rec "'padding-box' | 'content-box'"]
+and property_overflow_clip_margin = [%value.rec "<visual-box> || <extended-length>"]
 and property_overflow_inline = [%value.rec
   "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
 ]
 and property_overflow_wrap = [%value.rec
   "'normal' | 'break-word' | 'anywhere'"
 ]
 and property_overflow_x = [%value.rec
-  "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'"
+  "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
 ]
 and property_overflow_y = [%value.rec
-  "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'"
+  "'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | <interpolation>"
 ]
 and property_overscroll_behavior = [%value.rec
   "[ 'contain' | 'none' | 'auto' ]{1,2}"
@@ -1645,7 +1645,7 @@ and property_text_combine_upright = [%value.rec
   "'none' | 'all' | 'digits' [ <integer> ]?"
 ]
 and property_text_decoration = [%value.rec
-  "[ <'text-decoration-line'>] [<'text-decoration-style'>]? [<'text-decoration-color'>]?"
+  "<'text-decoration-color'> || <'text-decoration-style'> || <'text-decoration-thickness'> || <'text-decoration-line'>"
 ]
 and property_text_justify_trim = [%value.rec "'none' | 'all' | 'auto'"]
 and property_text_kashida = [%value.rec
@@ -1657,7 +1657,7 @@ and property_text_decoration_color = [%value.rec "<color>"]
 /* and this definition has changed from the origianl, it might be a bug on the spec or our Generator,
    but simplifying to "|" simplifies it and solves the bug */
 and property_text_decoration_line = [%value.rec
-  "'none' | <interpolation> | [ 'underline' | 'overline' | 'line-through' | 'blink' ]{1,2}"
+  "'none' | <interpolation> | [ 'underline' || 'overline' || 'line-through' || 'blink' ]"
 ]
 and property_text_decoration_skip = [%value.rec
   "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'"
@@ -1968,6 +1968,7 @@ and type_selector = [%value.rec "<wq-name> | [ <ns-prefix> ]? '*'"]
 and viewport_length = [%value.rec
   "'auto' | <extended-length> | <extended-percentage>"
 ]
+and visual_box = [%value.rec "'content-box' | 'padding-box' | 'border-box'"]
 and wq_name = [%value.rec "[ <ns-prefix> ]? <ident-token>"]
 and x = [%value.rec "<number>"]
 and y = [%value.rec "<number>"];
@@ -3084,7 +3085,7 @@ let check_map =
       ("property-overflow", check(property_overflow)),
       ("property-overflow-anchor", check(property_overflow_anchor)),
       ("property-overflow-block", check(property_overflow_block)),
-      ("property-overflow-clip-box", check(property_overflow_clip_box)),
+      ("property-overflow-clip-margin", check(property_overflow_clip_margin)),
       ("property-overflow-inline", check(property_overflow_inline)),
       ("property-overflow-wrap", check(property_overflow_wrap)),
       ("property-overflow-x", check(property_overflow_x)),

packages/ppx/src/Property_to_runtime.re

@@ -2134,13 +2134,25 @@ let box_shadow =
 
 // css-overflow-3
 let overflow_x =
-  variants(Property_parser.property_overflow_x, (~loc) =>
-    [%expr CSS.overflowX]
+  monomorphic(
+    Property_parser.property_overflow_x,
+    (~loc) => [%expr CSS.overflowX],
+    (~loc) =>
+      fun
+      | `Interpolation(x) => render_variable(~loc, x)
+      | (`Visible | `Hidden | `Clip | `Scroll | `Auto) as x =>
+        variant_to_expression(~loc, x),
   );
 
 let overflow_y =
-  variants(Property_parser.property_overflow_y, (~loc) =>
-    [%expr CSS.overflowY]
+  monomorphic(
+    Property_parser.property_overflow_y,
+    (~loc) => [%expr CSS.overflowY],
+    (~loc) =>
+      fun
+      | `Interpolation(x) => render_variable(~loc, x)
+      | (`Visible | `Hidden | `Clip | `Scroll | `Auto) as x =>
+        variant_to_expression(~loc, x),
   );
 
 let overflow =
@@ -2177,39 +2189,29 @@ let overflow =
       }
   );
 
-/* let overflow_clip_margin =
-   unsupportedProperty(Property_parser.property_overflow_clip_margin); */
+let overflow_clip_margin =
+  unsupportedProperty(Property_parser.property_overflow_clip_margin);
 
 let overflow_block =
   monomorphic(
     Property_parser.property_overflow_block,
     (~loc) => [%expr CSS.overflowBlock],
-    (~loc, value) => {
-      switch (value) {
-      | `Interpolation(i) => render_variable(~loc, i)
-      | `Auto => variant_to_expression(~loc, `Auto)
-      | `Clip => variant_to_expression(~loc, `Clip)
-      | `Hidden => variant_to_expression(~loc, `Hidden)
-      | `Scroll => variant_to_expression(~loc, `Scroll)
-      | `Visible => variant_to_expression(~loc, `Visible)
-      }
-    },
+    (~loc) =>
+      fun
+      | `Interpolation(x) => render_variable(~loc, x)
+      | (`Visible | `Hidden | `Clip | `Scroll | `Auto) as x =>
+        variant_to_expression(~loc, x),
   );
 
 let overflow_inline =
   monomorphic(
     Property_parser.property_overflow_inline,
     (~loc) => [%expr CSS.overflowInline],
-    (~loc, value) => {
-      switch (value) {
-      | `Interpolation(i) => render_variable(~loc, i)
-      | `Auto => variant_to_expression(~loc, `Auto)
-      | `Clip => variant_to_expression(~loc, `Clip)
-      | `Hidden => variant_to_expression(~loc, `Hidden)
-      | `Scroll => variant_to_expression(~loc, `Scroll)
-      | `Visible => variant_to_expression(~loc, `Visible)
-      }
-    },
+    (~loc) =>
+      fun
+      | `Interpolation(x) => render_variable(~loc, x)
+      | (`Visible | `Hidden | `Clip | `Scroll | `Auto) as x =>
+        variant_to_expression(~loc, x),
   );
 
 let text_overflow =
@@ -2552,20 +2554,27 @@ let font_variant_emoji =
     [%expr CSS.fontVariantEmoji]
   );
 
-// css-text-decor-3
-let render_text_decoration_line =
-    (~loc, value: Types.property_text_decoration_line) =>
-  switch (value) {
+let render_text_decoration_line = (~loc) =>
+  fun
   | `Interpolation(v) => render_variable(~loc, v)
-  | `None => variant_to_expression(~loc, `None)
-  | `Xor([`Underline]) => variant_to_expression(~loc, `Underline)
-  | `Xor([`Overline]) => variant_to_expression(~loc, `Overline)
-  | `Xor([`Line_through]) => variant_to_expression(~loc, `Line_Through)
-  | `Xor([`Blink]) => variant_to_expression(~loc, `Blink)
-  /* bs-css doesn't support multiple text decoration line */
-  | `Xor(_) => raise(Unsupported_feature)
-  };
+  | `None => [%expr `none]
+  | `Or(underline, overline, lineThrough, blink) => [%expr
+      CSS.Types.TextDecorationLine.Value.make(
+        ~underline=?[%e
+          render_option(~loc, (~loc, _) => [%expr true], underline)
+        ],
+        ~overline=?[%e
+          render_option(~loc, (~loc, _) => [%expr true], overline)
+        ],
+        ~lineThrough=?[%e
+          render_option(~loc, (~loc, _) => [%expr true], lineThrough)
+        ],
+        ~blink=?[%e render_option(~loc, (~loc, _) => [%expr true], blink)],
+        (),
+      )
+    ];
 
+// css-text-decor-3
 let text_decoration_line =
   monomorphic(
     Property_parser.property_text_decoration_line,
@@ -2610,16 +2619,24 @@ let text_decoration_thickness =
   );
 
 let text_decoration =
-  monomorphic(
+  polymorphic(
     Property_parser.property_text_decoration,
-    (~loc) => [%expr CSS.textDecoration],
-    (~loc, v) =>
-      switch (v) {
-      | (line, None, None) => render_text_decoration_line(~loc, line)
-      | (_line, None, Some(_color)) => raise(Unsupported_feature)
-      | (_line, Some(_style), None) => raise(Unsupported_feature)
-      | (_line, Some(_style), Some(_color)) => raise(Unsupported_feature)
-      },
+    (~loc, (color, style, thickness, line)) =>
+    [
+      [%expr
+        CSS.textDecoration2(
+          ~line=?[%e render_option(~loc, render_text_decoration_line, line)],
+          ~thickness=?[%e
+            render_option(~loc, render_text_decoration_thickness, thickness)
+          ],
+          ~style=?[%e
+            render_option(~loc, render_text_decoration_style, style)
+          ],
+          ~color=?[%e render_option(~loc, render_color, color)],
+          (),
+        )
+      ],
+    ]
   );
 
 let text_underline_position =
@@ -5148,9 +5165,6 @@ let orphans = unsupportedProperty(Property_parser.property_orphans);
 let overflow_anchor =
   unsupportedProperty(Property_parser.property_overflow_anchor);
 
-let overflow_clip_box =
-  unsupportedProperty(Property_parser.property_overflow_clip_box);
-
 let padding_block_end =
   unsupportedProperty(Property_parser.property_padding_block_end);
 
@@ -5524,7 +5538,7 @@ let properties = [
   ("outline-width", found(outline_width)),
   ("overflow-anchor", found(overflow_anchor)),
   ("overflow-block", found(overflow_block)),
-  ("overflow-clip-box", found(overflow_clip_box)),
+  ("overflow-clip-margin", found(overflow_clip_margin)),
   ("overflow-inline", found(overflow_inline)),
   ("overflow-wrap", found(overflow_wrap)),
   ("overflow-x", found(overflow_x)),

packages/ppx/test/css-support/text-decoration.t/run.t

@@ -17,10 +17,42 @@ If this test fail means that the module is not in sync with the ppx
   $ dune describe pp ./input.re | sed '1,/^];$/d'
 
   CSS.textDecorationLine(`none);
-  CSS.textDecorationLine(`underline);
-  CSS.textDecorationLine(`overline);
-  CSS.textDecorationLine(`lineThrough);
-  CSS.unsafe({js|textDecorationLine|js}, {js|underline overline|js});
+  CSS.textDecorationLine(
+    CSS.Types.TextDecorationLine.Value.make(
+      ~underline=?Some(true),
+      ~overline=?None,
+      ~lineThrough=?None,
+      ~blink=?None,
+      (),
+    ),
+  );
+  CSS.textDecorationLine(
+    CSS.Types.TextDecorationLine.Value.make(
+      ~underline=?None,
+      ~overline=?Some(true),
+      ~lineThrough=?None,
+      ~blink=?None,
+      (),
+    ),
+  );
+  CSS.textDecorationLine(
+    CSS.Types.TextDecorationLine.Value.make(
+      ~underline=?None,
+      ~overline=?None,
+      ~lineThrough=?Some(true),
+      ~blink=?None,
+      (),
+    ),
+  );
+  CSS.textDecorationLine(
+    CSS.Types.TextDecorationLine.Value.make(
+      ~underline=?Some(true),
+      ~overline=?Some(true),
+      ~lineThrough=?None,
+      ~blink=?None,
+      (),
+    ),
+  );
   CSS.textDecorationColor(CSS.white);
   CSS.textDecorationStyle(`solid);
   CSS.textDecorationStyle(`double);

packages/ppx/test/css-support/type-error-interpolation-location.t/run.t

@@ -15,6 +15,7 @@ If this test fail means that the module is not in sync with the ppx
   $ dune build
   File "input.re", line 11, characters 21-29:
   Error: This expression has type [> `underlin ]
-         but an expression was expected of type Css_types.TextDecoration.t
+         but an expression was expected of type
+           Css_types.TextDecorationLine.Value.t
          The second variant type does not allow tag(s) `underlin
   [1]

packages/ppx/test/snapshot/reason/reason-styled-global.t/run.t

@@ -36,8 +36,38 @@
         {js|abbr[title]|js},
         [|
           CSS.unsafe({js|borderBottom|js}, {js|none|js}),
-          CSS.textDecoration(`underline),
-          CSS.unsafe({js|textDecoration|js}, {js|underline dotted|js}),
+          CSS.textDecoration2(
+            ~line=?
+              Some(
+                CSS.Types.TextDecorationLine.Value.make(
+                  ~underline=?Some(true),
+                  ~overline=?None,
+                  ~lineThrough=?None,
+                  ~blink=?None,
+                  (),
+                ),
+              ),
+            ~thickness=?None,
+            ~style=?None,
+            ~color=?None,
+            (),
+          ),
+          CSS.textDecoration2(
+            ~line=?
+              Some(
+                CSS.Types.TextDecorationLine.Value.make(
+                  ~underline=?Some(true),
+                  ~overline=?None,
+                  ~lineThrough=?None,
+                  ~blink=?None,
+                  (),
+                ),
+              ),
+            ~thickness=?None,
+            ~style=?Some(`dotted),
+            ~color=?None,
+            (),
+          ),
         |],
       ),
       CSS.selector({js|b, strong|js}, [|CSS.fontWeight(`bolder)|]),

packages/runtime/native/shared/Alias.ml

@@ -272,7 +272,7 @@ end
 
 module Transition = struct
   (* backwards compatibility *)
-  let shorthand = Css_types.Transition.make
+  let shorthand = Css_types.Transition.Value.make
 end
 
 type animationName = AnimationName.t