Add vertical-align and interpolation safe

davesnx · Jul 10, 2023 · bbdb43c · bbdb43c
1 parent 980475c
commit bbdb43c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/packages/ppx/src/declarations_to_emotion.re b/packages/ppx/src/declarations_to_emotion.re
@@ -1704,6 +1704,26 @@ let outline_width =
  render_line_width_interp,
  );
 
+let vertical_align =
+ apply(
+ Parser.property_vertical_align,
+ (~loc) => [%expr CssJs.verticalAlign],
+ (~loc, value) => {
+ switch (value) {
+ | `Baseline => [%expr `baseline]
+ | `Sub => [%expr `sub]
+ | `Super => [%expr `super]
+ | `Text_top => [%expr `textTop]
+ | `Text_bottom => [%expr `textBottom]
+ | `Middle => [%expr `middle]
+ | `Top => [%expr `top]
+ | `Bottom => [%expr `bottom]
+ | `Extended_length(l) => render_extended_length(~loc, l)
+ | `Extended_percentage(p) => render_extended_percentage(~loc, p)
+ }
+ }
+ );
+
 let border =
  emit(
  Parser.property_border,
@@ -3340,6 +3360,7 @@ let properties = [
  ("outline-offset", found(outline_offset)),
  ("outline-style", found(outline_style)),
  ("outline-width", found(outline_width)),
+ ("vertical-align", found(vertical_align)),
  /* SVG */
  ("fill", found(fill)),
  ("stroke", found(stroke)),

diff --git a/packages/ppx/test/css-support/css-support.expected.re b/packages/ppx/test/css-support/css-support.expected.re
@@ -1,3 +1,11 @@
+CssJs.verticalAlign(`baseline);
+CssJs.verticalAlign(`sub);
+CssJs.verticalAlign(`super);
+CssJs.verticalAlign(`top);
+CssJs.verticalAlign(`textTop);
+CssJs.verticalAlign(`middle);
+CssJs.verticalAlign(`bottom);
+CssJs.verticalAlign(`textBottom);
 CssJs.backgroundRepeat(`space);
 CssJs.backgroundRepeat(`round);
 CssJs.backgroundRepeat(`hv((`repeat, `repeat)));

diff --git a/packages/ppx/test/css-support/css-support.re b/packages/ppx/test/css-support/css-support.re
@@ -1,3 +1,12 @@
+[%css {|vertical-align: baseline|}];
+[%css {|vertical-align: sub|}];
+[%css {|vertical-align: super|}];
+[%css {|vertical-align: top|}];
+[%css {|vertical-align: text-top|}];
+[%css {|vertical-align: middle|}];
+[%css {|vertical-align: bottom|}];
+[%css {|vertical-align: text-bottom|}];
+
 /* CSS Backgrounds and Borders Module Level 3 */
 [%css {|background-repeat: space|}];
 [%css {|background-repeat: round|}];