From 1cd72fc85aa70b3970715f0cbb6f2ca81684cc0b Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Sun, 11 Aug 2024 17:54:29 +0700 Subject: [PATCH] handle var() globally --- packages/css-property-parser/lib/Parser.re | 2 +- packages/ppx/src/Property_to_runtime.re | 53 ++++++++++++++------ packages/ppx/test/css-support/random.t/run.t | 4 +- packages/ppx/test/native/Static_test.re | 9 +++- 4 files changed, 49 insertions(+), 19 deletions(-) diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index 72ace706..9153c2a8 100644 --- 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 "[ ]? && "] and class_selector = [%value.rec "'.' "] and clip_source = [%value.rec ""] and color = [%value.rec - " | | | | | | 'currentColor' | | | | " + " | | | | | | 'currentColor' | | | " ] and color_stop = [%value.rec " | "] and color_stop_angle = [%value.rec "[ ]{1,2}"] diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 15676017..057a27e3 100644 --- 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 index a695b97c..a8d3b17b 100644 --- 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 index 3b419c03..2b3f7fec 100644 --- 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 /*