handle var() globally

davesnx · Aug 11, 2024 · 1cd72fc · 1cd72fc
1 parent 4ad5d0e
commit 1cd72fc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re
@@ -138,7 +138,7 @@ and cf_mixing_image = [%value.rec "[ <extended-percentage> ]? && <image>"]
 and class_selector = [%value.rec "'.' <ident-token>"]
 and clip_source = [%value.rec "<url>"]
 and color = [%value.rec
-  "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | 'currentColor' | <deprecated-system-color> | <interpolation> | <var()> | <color-mix()>"
+  "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | 'currentColor' | <deprecated-system-color> | <interpolation> | <color-mix()>"
 ]
 and color_stop = [%value.rec "<color-stop-length> | <color-stop-angle>"]
 and color_stop_angle = [%value.rec "[ <extended-angle> ]{1,2}"]

diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
@@ -1034,11 +1034,6 @@ let render_function_hsla = (~loc, (hue, saturation, lightness, alpha)) => {
   };
 };
 
-let render_var = (~loc, string) => {
-  let string = render_string(~loc, string);
-  [%expr `var([%e string])];
-};
-
 let rec render_color = (~loc, value) =>
   switch ((value: Types.color)) {
   | `Interpolation(v) => render_variable(~loc, v)
@@ -1049,7 +1044,6 @@ let rec render_color = (~loc, value) =>
     render_function_color_mix(~loc, color_mix)
   | `Function_rgb(rgb) => render_function_rgb(~loc, rgb)
   | `Function_rgba(rgba) => render_function_rgba(~loc, rgba)
-  | `Function_var(v) => render_var(~loc, v)
   | `Function_hsl(`Hsl_0(hsl)) => render_function_hsl(~loc, hsl)
   | `Function_hsla(`Hsla_0(hsla)) => render_function_hsla(~loc, hsla)
   /* Function_hsl(a) with `Hsl(a)_1 aren't supported */
@@ -5370,6 +5364,33 @@ let render_to_expr = (~loc, property, value, important) => {
   };
 };
 
+let render_css_variable = (~loc, property, value) => {
+  let.ok tokens =
+    Styled_ppx_css_parser.Lexer.tokenize(property ++ ": " ++ value ++ ";")
+    |> Result.map_error(_ =>
+         failwith("property and value should already be valid")
+       );
+
+  let varExist =
+    List.exists(
+      ((token, _, _)) => {
+        switch ((token: Styled_ppx_css_parser.Parser.token)) {
+        | FUNCTION("var") => true
+        | _ => false
+        }
+      },
+      tokens,
+    );
+
+  if (varExist) {
+    let property = property |> to_camel_case |> render_string(~loc);
+    let value = value |> render_string(~loc);
+    Ok([[%expr CSS.unsafe([%e property], [%e value])]]);
+  } else {
+    Error("CSS variable does not exist");
+  };
+};
+
 let render = (~loc: Location.t, property, value, important) =>
   if (isVariableDeclaration(property)) {
     Ok([render_variable_declaration(~loc, property, value)]);
@@ -5378,17 +5399,21 @@ let render = (~loc: Location.t, property, value, important) =>
       Property_parser.check_property(~name=property, value)
       |> Result.map_error((`Unknown_value) => `Property_not_found);
 
-    switch (render_css_global_values(~loc, property, value)) {
+    switch (render_css_variable(~loc, property, value)) {
     | Ok(value) => Ok(value)
     | Error(_) =>
-      switch (render_to_expr(~loc, property, value, important)) {
+      switch (render_css_global_values(~loc, property, value)) {
       | Ok(value) => Ok(value)
-      | exception (Invalid_value(v)) =>
-        Error(`Invalid_value(value ++ ". " ++ v))
-      | Error(_)
-      | exception Unsupported_feature =>
-        let.ok () = is_valid_string ? Ok() : Error(`Invalid_value(value));
-        Ok([render_when_unsupported_features(~loc, property, value)]);
+      | Error(_) =>
+        switch (render_to_expr(~loc, property, value, important)) {
+        | Ok(value) => Ok(value)
+        | exception (Invalid_value(v)) =>
+          Error(`Invalid_value(value ++ ". " ++ v))
+        | Error(_)
+        | exception Unsupported_feature =>
+          let.ok () = is_valid_string ? Ok() : Error(`Invalid_value(value));
+          Ok([render_when_unsupported_features(~loc, property, value)]);
+        }
       }
     };
   };
diff --git a/packages/ppx/test/css-support/random.t/run.t b/packages/ppx/test/css-support/random.t/run.t
@@ -57,7 +57,7 @@ If this test fail means that the module is not in sync with the ppx
   CSS.unsafe({js|breakInside|js}, {js|avoid|js});
   CSS.unsafe({js|caretColor|js}, {js|#e15a46|js});
   CSS.unsafe({js|color|js}, {js|inherit|js});
-  CSS.color(`var({js|--color-link|js}));
+  CSS.unsafe({js|color|js}, {js|var(--color-link)|js});
   CSS.columnWidth(`pxFloat(125.));
   CSS.columnWidth(`auto);
 
@@ -150,6 +150,6 @@ If this test fail means that the module is not in sync with the ppx
 
   CSS.style([|CSS.aspectRatio(`ratio((16, 9)))|]);
 
-  CSS.color(`var({js|--color-link|js}));
+  CSS.unsafe({js|color|js}, {js|var(--color-link)|js});
 
   $ dune build
diff --git a/packages/ppx/test/native/Static_test.re b/packages/ppx/test/native/Static_test.re
@@ -787,7 +787,12 @@ let properties_static_css_tests = [
   (
     [%css "color: var(--main-c)"],
     [%expr [%css "color: var(--main-c)"]],
-    [%expr CSS.color(`var({js|--main-c|js}))],
+    [%expr CSS.unsafe({js|color|js}, {js|var(--main-c)|js})],
+  ),
+  (
+    [%css "transition-property: var(--a) random 10px var(--b)"],
+    [%expr [%css "transition-property: var(--a) random 10px var(--b)"]],
+    [%expr CSS.unsafe({js|transitionProperty|js}, {js|var(--a) random 10px var(--b)|js})],
   ),
   (
     [%css "box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2)"],
@@ -1249,7 +1254,7 @@ let properties_static_css_tests = [
   (
     [%css {|color: var(--color-link);|}],
     [%expr [%css {|color: var(--color-link);|}]],
-    [%expr CSS.color(`var({js|--color-link|js}))],
+    [%expr CSS.unsafe({js|color|js}, {js|var(--color-link)|js})],
   ),
   // unsupported
   /*