Add justify-self support (#453)

Co-authored-by: Rusty Key <rusty.key@ahrefs.com>
davesnx · Mar 17, 2024 · cb2bf08 · cb2bf08
1 parent 230212c
commit cb2bf08
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/packages/ppx/src/declarations_to_emotion.re b/packages/ppx/src/declarations_to_emotion.re
@@ -3308,6 +3308,26 @@ let justify_items =
     },
   );
 
+let justify_self =
+  monomorphic(
+    Parser.property_justify_self,
+    (~loc) => [%expr CssJs.justifySelf],
+    (~loc, value) => {
+      switch (value) {
+      | `Auto => [%expr `auto]
+      | `Normal => [%expr `normal]
+      | `Stretch => [%expr `stretch]
+      | `Static(None, position) =>
+        [%expr [%e render_self_position_left_right(~loc, position)]]
+      | `Static(Some(`Safe), position) =>
+        [%expr `safe([%e render_self_position_left_right(~loc, position)])]
+      | `Static(Some(`Unsafe), position) =>
+        [%expr `unsafe([%e render_self_position_left_right(~loc, position)])]
+      | `Baseline_position(pos, ()) => render_baseline_position(~loc, pos)
+      }
+    },
+  );
+
 let align_items =
   monomorphic(
     Parser.property_align_items,
@@ -4059,7 +4079,6 @@ let font_language_override =
    unsupportedProperty(Parser.property_hyphenate_limit_zone); */
 let ime_mode = unsupportedProperty(Parser.property_ime_mode);
 let isolation = unsupportedProperty(Parser.property_isolation);
-let justify_self = unsupportedProperty(Parser.property_justify_self);
 /* let layout_grid = unsupportedProperty(Parser.property_layout_grid); */
 /* let layout_grid_char = unsupportedProperty(Parser.property_layout_grid_char); */
 /* let layout_grid_line = unsupportedProperty(Parser.property_layout_grid_line); */

diff --git a/packages/ppx/test/css-support/css-support.expected.re b/packages/ppx/test/css-support/css-support.expected.re
@@ -1469,22 +1469,22 @@ CssJs.alignContent(`flexStart);
 CssJs.alignContent(`flexEnd);
 CssJs.alignContent(`unsafe(`start));
 CssJs.alignContent(`safe(`start));
-CssJs.unsafe({js|justifySelf|js}, {js|auto|js});
-CssJs.unsafe({js|justifySelf|js}, {js|normal|js});
-CssJs.unsafe({js|justifySelf|js}, {js|stretch|js});
-CssJs.unsafe({js|justifySelf|js}, {js|baseline|js});
-CssJs.unsafe({js|justifySelf|js}, {js|first baseline|js});
-CssJs.unsafe({js|justifySelf|js}, {js|last baseline|js});
-CssJs.unsafe({js|justifySelf|js}, {js|center|js});
-CssJs.unsafe({js|justifySelf|js}, {js|start|js});
-CssJs.unsafe({js|justifySelf|js}, {js|end|js});
-CssJs.unsafe({js|justifySelf|js}, {js|self-start|js});
-CssJs.unsafe({js|justifySelf|js}, {js|self-end|js});
-CssJs.unsafe({js|justifySelf|js}, {js|unsafe start|js});
-CssJs.unsafe({js|justifySelf|js}, {js|safe start|js});
-CssJs.unsafe({js|justifySelf|js}, {js|left|js});
-CssJs.unsafe({js|justifySelf|js}, {js|right|js});
-CssJs.unsafe({js|justifySelf|js}, {js|safe right|js});
+CssJs.justifySelf(`auto);
+CssJs.justifySelf(`normal);
+CssJs.justifySelf(`stretch);
+CssJs.justifySelf(`baseline);
+CssJs.justifySelf(`firstBaseline);
+CssJs.justifySelf(`lastBaseline);
+CssJs.justifySelf(`center);
+CssJs.justifySelf(`start);
+CssJs.justifySelf(`end_);
+CssJs.justifySelf(`selfStart);
+CssJs.justifySelf(`selfEnd);
+CssJs.justifySelf(`unsafe(`start));
+CssJs.justifySelf(`safe(`start));
+CssJs.justifySelf(`left);
+CssJs.justifySelf(`right);
+CssJs.justifySelf(`safe(`right));
 CssJs.justifyItems(`normal);
 CssJs.justifyItems(`stretch);
 CssJs.justifyItems(`baseline);