From 155cdc7f7f06727f865dd560dc31d4cfc7aa150f Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Thu, 15 Aug 2024 14:35:35 +0700 Subject: [PATCH 1/3] fix calc function initial --- e2e/melange/src/ui/ui.re | 4 +- packages/css-property-parser/lib/Parser.re | 4 +- packages/ppx/src/Property_to_runtime.re | 87 ++++++----- packages/ppx/src/Property_to_string.re | 161 +++++++++----------- packages/runtime/native/shared/Css_types.ml | 15 +- 5 files changed, 124 insertions(+), 147 deletions(-) diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re index 4ccc7f59..e77de2a5 100644 --- a/e2e/melange/src/ui/ui.re +++ b/e2e/melange/src/ui/ui.re @@ -22,6 +22,7 @@ module Cositas = [%styled.div display: flex; flex-direction: column; gap: $(lola); + width: calc(100% / 3 - 2 * 1em - 2 * 1px); |} ]; @@ -160,7 +161,8 @@ let rec modify = let negate_in_calc = (v: calc_value): calc_value => `calc(`mult((v, `num(-1.)))); -let half_in_calc = (v: calc_value): calc_value => `calc(`div((v, 2.))); +let half_in_calc = (v: calc_value): calc_value => + `calc(`div((v, `num(2.)))); let negative = value => modify((~-.), (~-), negate_in_calc, value); let half = value => modify(x => x /. 2., x => x / 2, half_in_calc, value); diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index 72ace706..3071bf0e 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -126,12 +126,12 @@ and border_radius = [%value.rec " | "] and bottom = [%value.rec " | 'auto'"] and box = [%value.rec "'border-box' | 'padding-box' | 'content-box'"] and calc_product = [%value.rec - " [ '*' | '/' ]*" + " [ [ '*' | '/' ] ]*" ] and calc_sum = [%value.rec " [ [ '+' | '-' ] ]*"] /* and calc_value = [%value.rec " | | | "] */ and calc_value = [%value.rec - " | | | | " + " | | | | | '(' ')'" ] and cf_final_image = [%value.rec " | "] and cf_mixing_image = [%value.rec "[ ]? && "] diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 15676017..21a85274 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -320,28 +320,33 @@ let render_length = (~loc) => | `Zero => [%expr `zero]; let rec render_function_calc = (~loc, calc_sum) => { - render_calc_sum(~loc, calc_sum); + [%expr `calc([%e render_calc_sum(~loc, calc_sum)])]; } -and render_calc_sum = (~loc, calc_sum) => { - switch (calc_sum) { - | (product, []) => render_product(~loc, product) - | (product, list_of_sums) => - /* This isn't a great design of the types, but we need to know the operation - which is in the first position of the array, we ensure that there's one value - since we are on this branch of the switch */ - let op = pick_operation(List.hd(list_of_sums)); - switch (op) { - | `Dash () => - let first = render_product(~loc, product); - let second = render_list_of_sums(~loc, list_of_sums); - [%expr `calc(`sub(([%e first], [%e second])))]; - | `Cross () => - let first = render_product(~loc, product); - let second = render_list_of_sums(~loc, list_of_sums); - [%expr `calc(`add(([%e first], [%e second])))]; +and render_calc_sum = (~loc, (product, sums): Types.calc_sum) => { + let rec go = (left, rest) => { + switch (rest) { + | [] => left + | [x, ...xs] => + switch (x) { + | (`Cross (), calc_product) => + go( + [%expr + `add(([%e left], [%e render_calc_product(~loc, calc_product)])) + ], + xs, + ) + | (`Dash (), calc_product) => + go( + [%expr + `sub(([%e left], [%e render_calc_product(~loc, calc_product)])) + ], + xs, + ) + } }; }; + go(render_calc_product(~loc, product), sums); } and render_function_min_or_max = (~loc, calc_sums: list(Types.calc_sum)) => { switch (calc_sums) { @@ -357,33 +362,26 @@ and render_function_min = (~loc, calc_sums) => { and render_function_max = (~loc, calc_sums) => { [%expr `max([%e render_function_min_or_max(~loc, calc_sums)])]; } -and pick_operation = ((op, _)) => op -and render_list_of_products = (~loc, list_of_products) => { - switch (list_of_products) { - | [one] => render_product_op(~loc, one) - | list => render_list_of_products(~loc, list) - }; -} -and render_list_of_sums = (~loc, list_of_sums) => { - switch (list_of_sums) { - | [(_, one)] => render_product(~loc, one) - | list => render_list_of_sums(~loc, list) - }; -} -and render_product = (~loc, product) => { - switch (product) { - | (calc_value, []) => render_calc_value(~loc, calc_value) - | (calc_value, list_of_products) => - let first = render_calc_value(~loc, calc_value); - let second = render_list_of_products(~loc, list_of_products); - [%expr `calc(`mult(([%e first], [%e second])))]; - }; -} -and render_product_op = (~loc, op) => { - switch (op) { - | `Static_0((), calc_value) => render_calc_value(~loc, calc_value) - | `Static_1((), float) => [%expr `num([%e render_float(~loc, float)])] +and render_calc_product = (~loc, (value, products): Types.calc_product) => { + let rec go = (left, rest) => { + switch (rest) { + | [] => left + | [x, ...xs] => + switch (x) { + | (`Asterisk (), value) => + go( + [%expr `mult(([%e left], [%e render_calc_value(~loc, value)]))], + xs, + ) + | (`Bar (), value) => + go( + [%expr `div(([%e left], [%e render_calc_value(~loc, value)]))], + xs, + ) + } + }; }; + go(render_calc_value(~loc, value), products); } and render_angle = (~loc) => fun @@ -434,6 +432,7 @@ and render_calc_value = (~loc, calc_value) => { | `Extended_percentage(p) => render_extended_percentage(~loc, p) | `Extended_angle(a) => render_extended_angle(~loc, a) | `Extended_time(t) => render_extended_time(~loc, t) + | `Static(_, calc_sum, _) => render_calc_sum(~loc, calc_sum) }; } and render_extended_length = (~loc) => diff --git a/packages/ppx/src/Property_to_string.re b/packages/ppx/src/Property_to_string.re index a018d816..376e22e3 100644 --- a/packages/ppx/src/Property_to_string.re +++ b/packages/ppx/src/Property_to_string.re @@ -133,21 +133,22 @@ let render_length = | `Vw(n) => render_number(n, "vw") | `Zero => render_string("0"); -let rec render_function_calc = calc_sum => { - render_calc_sum(calc_sum); +let rec render_function_calc = + (calc_sum: Css_property_parser.Parser.Types.calc_sum) => { + [%expr "calc(" ++ [%e render_calc_sum(calc_sum)] ++ ")"]; } -and render_calc_sum = calc_sum => - switch (calc_sum) { - | (product, []) => render_product(product) - | (product, list_of_sums) => - /* This isn't a great design of the types, but we need to know the operation - which is in the first position of the array, we ensure that there's one value - since we are on this branch of the switch */ - let op = pick_operation(List.hd(list_of_sums)); - let first = render_product(product); - let second = render_list_of_sums(list_of_sums); - [%expr "calc(" ++ [%e first] ++ [%e op] ++ [%e second] ++ ")"]; - } +and render_calc_sum = _calc_sum => failwith("not implemented") +//switch (calc_sum) { +//| (product, None) => render_product(product) +//| (product, Some((`Cross (), calc_product))) => +// let first = render_product(product); +// let second = render_product(calc_product); +// [%expr [%e first] ++ " + " ++ [%e second]]; +//| (product, Some((`Dash (), calc_product))) => +// let first = render_product(product); +// let second = render_product(calc_product); +// [%expr [%e first] ++ " - " ++ [%e second]]; +//} and render_function_min_or_max = calc_sums => { switch (calc_sums) { | [] => raise(Invalid_value("expected at least one argument")) @@ -162,82 +163,62 @@ and render_function_min = calc_sums => { and render_function_max = calc_sums => { render_function_min_or_max(calc_sums); } -and render_sum_op = op => { - switch (op) { - | `Dash () => [%expr " - "] - | `Cross () => [%expr " + "] - }; -} -and pick_operation = ((op, _)) => render_sum_op(op) -and render_list_of_products = list_of_products => { - switch (list_of_products) { - | [one] => render_product_op(one) - | list => render_list_of_products(list) - }; -} -and render_list_of_sums = list_of_sums => { - switch (list_of_sums) { - | [(_, one)] => render_product(one) - | list => render_list_of_sums(list) - }; -} -and render_product = product => { - switch (product) { - | (calc_value, []) => render_calc_value(calc_value) - | (calc_value, list_of_products) => - let first = render_calc_value(calc_value); - let second = render_list_of_products(list_of_products); - [%expr "calc(" ++ [%e first] ++ " * " ++ [%e second] ++ ")"]; - }; -} -and render_product_op = op => { - switch (op) { - | `Static_0((), calc_value) => render_calc_value(calc_value) - | `Static_1((), float) => render_number(float, "") - }; -} -and render_calc_value = calc_value => { - switch (calc_value) { - | `Number(float) => render_number(float, "") - | `Extended_length(l) => render_extended_length(l) - | `Extended_percentage(p) => render_extended_percentage(p) - | `Extended_angle(a) => render_extended_angle(a) - | `Extended_time(t) => render_extended_time(t) - }; -} -and render_time_as_int = - fun - | `Ms(f) => { - let value = Float.to_int(f); - render_integer(value); - } - | `S(f) => { - let value = Float.to_int(f); - render_integer(value); - } - -and render_extended_time = - fun - | `Time(t) => render_time_as_int(t) - | `Function_calc(fc) => render_function_calc(fc) - | `Interpolation(v) => render_variable(v) - | `Function_min(values) => render_function_min(values) - | `Function_max(values) => render_function_max(values) - -and render_angle = - fun - | `Deg(number) - | `Rad(number) - | `Grad(number) - | `Turn(number) => render_number(number, "") - -and render_extended_angle = - fun - | `Angle(a) => render_angle(a) - | `Function_calc(fc) => render_function_calc(fc) - | `Interpolation(i) => render_variable(i) - | `Function_min(values) => render_function_min(values) - | `Function_max(values) => render_function_max(values) +//and render_product = product => { +// switch (product) { +// | (value, None) => render_calc_value(value) +// | (left, Some((`Asterisk (), right))) => +// let first = render_calc_value(left); +// let second = render_calc_value(right); +// [%expr [%e first] ++ " * " ++ [%e second]]; +// | (left, Some((`Bar (), right))) => +// let first = render_calc_value(left); +// let second = render_calc_value(right); +// [%expr [%e first] ++ " / " ++ [%e second]]; +// }; +//} +//and render_calc_value = calc_value => { +// switch (calc_value) { +// | `Number(float) => render_number(float, "") +// | `Extended_length(l) => render_extended_length(l) +// | `Extended_percentage(p) => render_extended_percentage(p) +// | `Extended_angle(a) => render_extended_angle(a) +// | `Extended_time(t) => render_extended_time(t) +// | `Static(_, calc_sum, _) => render_calc_sum(calc_sum) +// }; +//} +//and render_time_as_int = +// fun +// | `Ms(f) => { +// let value = Float.to_int(f); +// render_integer(value); +// } +// | `S(f) => { +// let value = Float.to_int(f); +// render_integer(value); +// } +// +//and render_extended_time = +// fun +// | `Time(t) => render_time_as_int(t) +// | `Function_calc(fc) => render_function_calc(fc) +// | `Interpolation(v) => render_variable(v) +// | `Function_min(values) => render_function_min(values) +// | `Function_max(values) => render_function_max(values) +// +//and render_angle = +// fun +// | `Deg(number) +// | `Rad(number) +// | `Grad(number) +// | `Turn(number) => render_number(number, "") +// +//and render_extended_angle = +// fun +// | `Angle(a) => render_angle(a) +// | `Function_calc(fc) => render_function_calc(fc) +// | `Interpolation(i) => render_variable(i) +// | `Function_min(values) => render_function_min(values) +// | `Function_max(values) => render_function_max(values) and render_extended_length = fun diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml index f26e54e6..4c8713ed 100644 --- a/packages/runtime/native/shared/Css_types.ml +++ b/packages/runtime/native/shared/Css_types.ml @@ -69,7 +69,7 @@ module Calc = struct | `calc (`mult (a, b)) -> {js|calc(|js} ^ fn a ^ {js| * |js} ^ fn b ^ {js|)|js} | `calc (`div (a, b)) -> - {js|calc(|js} ^ fn a ^ {js| / |js} ^ Kloth.Float.to_string b ^ {js|)|js} + {js|calc(|js} ^ fn a ^ {js| / |js} ^ fn b ^ {js|)|js} | `num n -> Kloth.Float.to_string n | `min xs -> {js|min(|js} ^ max_or_min_values fn xs ^ {js|)|js} | `max xs -> {js|max(|js} ^ max_or_min_values fn xs ^ {js|)|js} @@ -80,8 +80,7 @@ module Calc = struct | `add (x, y) -> {js|calc(|js} ^ fn x ^ {js| + |js} ^ fn y ^ {js|)|js} | `sub (x, y) -> {js|calc(|js} ^ fn x ^ {js| - |js} ^ fn y ^ {js|)|js} | `mult (x, y) -> {js|calc(|js} ^ fn x ^ {js| * |js} ^ fn y ^ {js|)|js} - | `div (x, y) -> - {js|calc(|js} ^ fn x ^ {js| / |js} ^ Kloth.Float.to_string y ^ {js|)|js} + | `div (x, y) -> {js|calc(|js} ^ fn x ^ {js| / |js} ^ fn y ^ {js|)|js} | (`min _ | `max _) as x -> fn_max_min x in aux x @@ -100,7 +99,7 @@ module Time = struct | `add of calc_value * calc_value | `sub of calc_value * calc_value | `mult of calc_value * calc_value - | `div of calc_value * float + | `div of calc_value * calc_value | (* calc_value can be a nested `calc. Ej. width: calc(100vh - calc(2rem + 120px))) *) `calc of @@ -190,7 +189,7 @@ module Length = struct | `add of calc_value * calc_value | `sub of calc_value * calc_value | `mult of calc_value * calc_value - | `div of calc_value * float + | `div of calc_value * calc_value | (* calc_value can be a nested `calc. Ej. width: calc(100vh - calc(2rem + 120px))) *) `calc of @@ -1324,11 +1323,7 @@ module Color = struct type 'a calc_min_max = [ `calc of - [ `add of 'a * 'a - | `sub of 'a * 'a - | `mult of 'a * 'a - | `div of 'a * float - ] + [ `add of 'a * 'a | `sub of 'a * 'a | `mult of 'a * 'a | `div of 'a * 'a ] | `min of 'a array | `max of 'a array ] From 192055a5e0548bbb623b5a5729d105309ba27ca1 Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Thu, 15 Aug 2024 18:50:15 +0700 Subject: [PATCH 2/3] final showdown --- e2e/melange/src/ui/ui.re | 2 +- packages/css-property-parser/lib/Parser.re | 2 +- packages/ppx/src/Property_to_runtime.re | 12 +- packages/ppx/src/Property_to_string.re | 150 ++++++++++-------- packages/ppx/test/css-support/calc.t/run.t | 4 +- .../ppx/test/css-support/color-module.t/run.t | 2 +- packages/ppx/test/native/Static_test.re | 7 +- packages/runtime/native/shared/Css_types.ml | 17 +- 8 files changed, 107 insertions(+), 89 deletions(-) diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re index e77de2a5..a563c6b7 100644 --- a/e2e/melange/src/ui/ui.re +++ b/e2e/melange/src/ui/ui.re @@ -162,7 +162,7 @@ let rec modify = let negate_in_calc = (v: calc_value): calc_value => `calc(`mult((v, `num(-1.)))); let half_in_calc = (v: calc_value): calc_value => - `calc(`div((v, `num(2.)))); + `calc(`div((v, 2.))); let negative = value => modify((~-.), (~-), negate_in_calc, value); let half = value => modify(x => x /. 2., x => x / 2, half_in_calc, value); diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index 3071bf0e..037b3400 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -126,7 +126,7 @@ and border_radius = [%value.rec " | "] and bottom = [%value.rec " | 'auto'"] and box = [%value.rec "'border-box' | 'padding-box' | 'content-box'"] and calc_product = [%value.rec - " [ [ '*' | '/' ] ]*" + " [ '*' | '/' ]*" ] and calc_sum = [%value.rec " [ [ '+' | '-' ] ]*"] /* and calc_value = [%value.rec " | | | "] */ diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 21a85274..fe719766 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -332,14 +332,14 @@ and render_calc_sum = (~loc, (product, sums): Types.calc_sum) => { | (`Cross (), calc_product) => go( [%expr - `add(([%e left], [%e render_calc_product(~loc, calc_product)])) + `add([%e left], [%e render_calc_product(~loc, calc_product)]) ], xs, ) | (`Dash (), calc_product) => go( [%expr - `sub(([%e left], [%e render_calc_product(~loc, calc_product)])) + `sub([%e left], [%e render_calc_product(~loc, calc_product)]) ], xs, ) @@ -368,14 +368,14 @@ and render_calc_product = (~loc, (value, products): Types.calc_product) => { | [] => left | [x, ...xs] => switch (x) { - | (`Asterisk (), value) => + | `Static_0(_, value) => go( - [%expr `mult(([%e left], [%e render_calc_value(~loc, value)]))], + [%expr `mult([%e left], [%e render_calc_value(~loc, value)])], xs, ) - | (`Bar (), value) => + | `Static_1(_, float_value) => go( - [%expr `div(([%e left], [%e render_calc_value(~loc, value)]))], + [%expr `div([%e left], [%e render_float(~loc, float_value)])], xs, ) } diff --git a/packages/ppx/src/Property_to_string.re b/packages/ppx/src/Property_to_string.re index 376e22e3..0e902e45 100644 --- a/packages/ppx/src/Property_to_string.re +++ b/packages/ppx/src/Property_to_string.re @@ -137,18 +137,27 @@ let rec render_function_calc = (calc_sum: Css_property_parser.Parser.Types.calc_sum) => { [%expr "calc(" ++ [%e render_calc_sum(calc_sum)] ++ ")"]; } -and render_calc_sum = _calc_sum => failwith("not implemented") -//switch (calc_sum) { -//| (product, None) => render_product(product) -//| (product, Some((`Cross (), calc_product))) => -// let first = render_product(product); -// let second = render_product(calc_product); -// [%expr [%e first] ++ " + " ++ [%e second]]; -//| (product, Some((`Dash (), calc_product))) => -// let first = render_product(product); -// let second = render_product(calc_product); -// [%expr [%e first] ++ " - " ++ [%e second]]; -//} +and render_calc_sum = ((product, sums)) => { + let rec go = (left, rest) => { + switch (rest) { + | [] => left + | [x, ...xs] => + switch (x) { + | (`Cross (), calc_product) => + go( + [%expr [%e left] ++ " + " ++ [%e render_product(calc_product)]], + xs, + ) + | (`Dash (), calc_product) => + go( + [%expr [%e left] ++ " - " ++ [%e render_product(calc_product)]], + xs, + ) + } + }; + }; + go(render_product(product), sums); +} and render_function_min_or_max = calc_sums => { switch (calc_sums) { | [] => raise(Invalid_value("expected at least one argument")) @@ -163,62 +172,67 @@ and render_function_min = calc_sums => { and render_function_max = calc_sums => { render_function_min_or_max(calc_sums); } -//and render_product = product => { -// switch (product) { -// | (value, None) => render_calc_value(value) -// | (left, Some((`Asterisk (), right))) => -// let first = render_calc_value(left); -// let second = render_calc_value(right); -// [%expr [%e first] ++ " * " ++ [%e second]]; -// | (left, Some((`Bar (), right))) => -// let first = render_calc_value(left); -// let second = render_calc_value(right); -// [%expr [%e first] ++ " / " ++ [%e second]]; -// }; -//} -//and render_calc_value = calc_value => { -// switch (calc_value) { -// | `Number(float) => render_number(float, "") -// | `Extended_length(l) => render_extended_length(l) -// | `Extended_percentage(p) => render_extended_percentage(p) -// | `Extended_angle(a) => render_extended_angle(a) -// | `Extended_time(t) => render_extended_time(t) -// | `Static(_, calc_sum, _) => render_calc_sum(calc_sum) -// }; -//} -//and render_time_as_int = -// fun -// | `Ms(f) => { -// let value = Float.to_int(f); -// render_integer(value); -// } -// | `S(f) => { -// let value = Float.to_int(f); -// render_integer(value); -// } -// -//and render_extended_time = -// fun -// | `Time(t) => render_time_as_int(t) -// | `Function_calc(fc) => render_function_calc(fc) -// | `Interpolation(v) => render_variable(v) -// | `Function_min(values) => render_function_min(values) -// | `Function_max(values) => render_function_max(values) -// -//and render_angle = -// fun -// | `Deg(number) -// | `Rad(number) -// | `Grad(number) -// | `Turn(number) => render_number(number, "") -// -//and render_extended_angle = -// fun -// | `Angle(a) => render_angle(a) -// | `Function_calc(fc) => render_function_calc(fc) -// | `Interpolation(i) => render_variable(i) -// | `Function_min(values) => render_function_min(values) -// | `Function_max(values) => render_function_max(values) +and render_product = ((value, products)) => { + let rec go = (left, rest) => { + switch (rest) { + | [] => left + | [x, ...xs] => + switch (x) { + | `Static_0(_, value) => + go([%expr [%e left] ++ " * " ++ [%e render_calc_value(value)]], xs) + | `Static_1(_, float_value) => + go( + [%expr [%e left] ++ " / " ++ [%e render_number(float_value, "")]], + xs, + ) + } + }; + }; + go(render_calc_value(value), products); +} +and render_calc_value = calc_value => { + switch (calc_value) { + | `Number(float) => render_number(float, "") + | `Extended_length(l) => render_extended_length(l) + | `Extended_percentage(p) => render_extended_percentage(p) + | `Extended_angle(a) => render_extended_angle(a) + | `Extended_time(t) => render_extended_time(t) + | `Static(_, calc_sum, _) => render_calc_sum(calc_sum) + }; +} +and render_time_as_int = + fun + | `Ms(f) => { + let value = Float.to_int(f); + render_integer(value); + } + | `S(f) => { + let value = Float.to_int(f); + render_integer(value); + } + +and render_extended_time = + fun + | `Time(t) => render_time_as_int(t) + | `Function_calc(fc) => render_function_calc(fc) + | `Interpolation(v) => render_variable(v) + | `Function_min(values) => render_function_min(values) + | `Function_max(values) => render_function_max(values) + +and render_angle = + fun + | `Deg(number) + | `Rad(number) + | `Grad(number) + | `Turn(number) => render_number(number, "") + +and render_extended_angle = + fun + | `Angle(a) => render_angle(a) + | `Function_calc(fc) => render_function_calc(fc) + | `Interpolation(i) => render_variable(i) + | `Function_min(values) => render_function_min(values) + | `Function_max(values) => render_function_max(values) and render_extended_length = fun diff --git a/packages/ppx/test/css-support/calc.t/run.t b/packages/ppx/test/css-support/calc.t/run.t index 75d73040..b126f10c 100644 --- a/packages/ppx/test/css-support/calc.t/run.t +++ b/packages/ppx/test/css-support/calc.t/run.t @@ -53,9 +53,7 @@ If this test fail means that the module is not in sync with the ppx `calc( `mult(( `rem(2.), - `calc( - `mult((`rem(2.), `calc(`mult((`rem(2.), `num(4.)))))), - ), + `calc(`mult((`rem(2.), `calc(`div((`rem(2.), 4.)))))), )), ), )), diff --git a/packages/ppx/test/css-support/color-module.t/run.t b/packages/ppx/test/css-support/color-module.t/run.t index 8928343b..e066a230 100644 --- a/packages/ppx/test/css-support/color-module.t/run.t +++ b/packages/ppx/test/css-support/color-module.t/run.t @@ -146,5 +146,5 @@ If this test fail means that the module is not in sync with the ppx CSS.unsafe({js|columnRuleColor|js}, {js|#000000FF|js}); CSS.unsafe({js|columnRuleColor|js}, {js|rebeccapurple|js}); - CSS.color(`rgba((0, 0, 0, `num(1.)))); + CSS.color(`rgba((0, 0, 0, `calc(`num(1.))))); CSS.color(`rgba((0, 0, 0, `calc(`sub((`num(10.), `num(1.))))))); diff --git a/packages/ppx/test/native/Static_test.re b/packages/ppx/test/native/Static_test.re index 3b419c03..6672f5a8 100644 --- a/packages/ppx/test/native/Static_test.re +++ b/packages/ppx/test/native/Static_test.re @@ -668,11 +668,10 @@ let properties_static_css_tests = [ [%expr [%css "flex: none"]], [%expr CSS.flex1(`none)], ), - /* Since calc(x) -> x */ ( [%css "width: calc(100px)"], [%expr [%css "width: calc(100px)"]], - [%expr CSS.width(`pxFloat(100.))], + [%expr CSS.width(`calc(`pxFloat(100.)))], ), ( [%css "width: calc(100% + 32px)"], @@ -1166,12 +1165,12 @@ let properties_static_css_tests = [ ( [%css "transition-duration: max(3s, calc(1ms))"], [%expr [%css "transition-duration: max(3s, calc(1ms))"]], - [%expr CSS.transitionDuration(`max([|`s(3), `ms(1)|]))], + [%expr CSS.transitionDuration(`max([|`s(3), `calc(`ms(1))|]))], ), ( [%css "transition-duration: max(+3s, calc(-0ms))"], [%expr [%css "transition-duration: max(+3s, calc(-0ms))"]], - [%expr CSS.transitionDuration(`max([|`s(3), `ms(0)|]))], + [%expr CSS.transitionDuration(`max([|`s(3), `calc(`ms(0))|]))], ), ( [%css "animation: 3s"], diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml index 4c8713ed..3cc57ddd 100644 --- a/packages/runtime/native/shared/Css_types.ml +++ b/packages/runtime/native/shared/Css_types.ml @@ -69,7 +69,8 @@ module Calc = struct | `calc (`mult (a, b)) -> {js|calc(|js} ^ fn a ^ {js| * |js} ^ fn b ^ {js|)|js} | `calc (`div (a, b)) -> - {js|calc(|js} ^ fn a ^ {js| / |js} ^ fn b ^ {js|)|js} + {js|calc(|js} ^ fn a ^ {js| / |js} ^ Kloth.Float.to_string b ^ {js|)|js} + | `calc (`num a) -> {js|calc(|js} ^ Kloth.Float.to_string a ^ {js|)|js} | `num n -> Kloth.Float.to_string n | `min xs -> {js|min(|js} ^ max_or_min_values fn xs ^ {js|)|js} | `max xs -> {js|max(|js} ^ max_or_min_values fn xs ^ {js|)|js} @@ -80,7 +81,8 @@ module Calc = struct | `add (x, y) -> {js|calc(|js} ^ fn x ^ {js| + |js} ^ fn y ^ {js|)|js} | `sub (x, y) -> {js|calc(|js} ^ fn x ^ {js| - |js} ^ fn y ^ {js|)|js} | `mult (x, y) -> {js|calc(|js} ^ fn x ^ {js| * |js} ^ fn y ^ {js|)|js} - | `div (x, y) -> {js|calc(|js} ^ fn x ^ {js| / |js} ^ fn y ^ {js|)|js} + | `div (x, y) -> + {js|calc(|js} ^ fn x ^ {js| / |js} ^ Kloth.Float.to_string y ^ {js|)|js} | (`min _ | `max _) as x -> fn_max_min x in aux x @@ -99,7 +101,7 @@ module Time = struct | `add of calc_value * calc_value | `sub of calc_value * calc_value | `mult of calc_value * calc_value - | `div of calc_value * calc_value + | `div of calc_value * float | (* calc_value can be a nested `calc. Ej. width: calc(100vh - calc(2rem + 120px))) *) `calc of @@ -189,7 +191,7 @@ module Length = struct | `add of calc_value * calc_value | `sub of calc_value * calc_value | `mult of calc_value * calc_value - | `div of calc_value * calc_value + | `div of calc_value * float | (* calc_value can be a nested `calc. Ej. width: calc(100vh - calc(2rem + 120px))) *) `calc of @@ -1323,7 +1325,12 @@ module Color = struct type 'a calc_min_max = [ `calc of - [ `add of 'a * 'a | `sub of 'a * 'a | `mult of 'a * 'a | `div of 'a * 'a ] + [ `add of 'a * 'a + | `sub of 'a * 'a + | `mult of 'a * 'a + | `div of 'a * float + | `num of float + ] | `min of 'a array | `max of 'a array ] From 1a38d24d242f62cfd7bbd1e8c763c100b1e51d48 Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Fri, 16 Aug 2024 11:08:21 +0700 Subject: [PATCH 3/3] yay now paren works! --- e2e/melange/src/ui/ui.re | 5 ++--- packages/css-property-parser/lib/Standard.re | 10 +++++++++- packages/ppx/src/Property_to_runtime.re | 8 ++++---- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re index a563c6b7..48e32955 100644 --- a/e2e/melange/src/ui/ui.re +++ b/e2e/melange/src/ui/ui.re @@ -22,7 +22,7 @@ module Cositas = [%styled.div display: flex; flex-direction: column; gap: $(lola); - width: calc(100% / 3 - 2 * 1em - 2 * 1px); + height: calc(1px * (2 + 3 / 3)); |} ]; @@ -161,8 +161,7 @@ let rec modify = let negate_in_calc = (v: calc_value): calc_value => `calc(`mult((v, `num(-1.)))); -let half_in_calc = (v: calc_value): calc_value => - `calc(`div((v, 2.))); +let half_in_calc = (v: calc_value): calc_value => `calc(`div((v, 2.))); let negative = value => modify((~-.), (~-), negate_in_calc, value); let half = value => modify(x => x /. 2., x => x / 2, half_in_calc, value); diff --git a/packages/css-property-parser/lib/Standard.re b/packages/css-property-parser/lib/Standard.re index 029c9992..1e8214ff 100644 --- a/packages/css-property-parser/lib/Standard.re +++ b/packages/css-property-parser/lib/Standard.re @@ -4,7 +4,15 @@ open Rule.Pattern; let keyword = string => expect(IDENT(string)); let comma = expect(COMMA); -let delim = string => expect(DELIM(string)); +let delim = + fun + | "(" => expect(LEFT_PAREN) + | ")" => expect(RIGHT_PAREN) + | "[" => expect(LEFT_BRACKET) + | "]" => expect(RIGHT_BRACKET) + | ":" => expect(COLON) + | ";" => expect(SEMI_COLON) + | s => expect(DELIM(s)); let function_call = (name, rule) => { let.bind_match () = token( diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index fe719766..5a8229c0 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -332,14 +332,14 @@ and render_calc_sum = (~loc, (product, sums): Types.calc_sum) => { | (`Cross (), calc_product) => go( [%expr - `add([%e left], [%e render_calc_product(~loc, calc_product)]) + `add(([%e left], [%e render_calc_product(~loc, calc_product)])) ], xs, ) | (`Dash (), calc_product) => go( [%expr - `sub([%e left], [%e render_calc_product(~loc, calc_product)]) + `sub(([%e left], [%e render_calc_product(~loc, calc_product)])) ], xs, ) @@ -370,12 +370,12 @@ and render_calc_product = (~loc, (value, products): Types.calc_product) => { switch (x) { | `Static_0(_, value) => go( - [%expr `mult([%e left], [%e render_calc_value(~loc, value)])], + [%expr `mult(([%e left], [%e render_calc_value(~loc, value)]))], xs, ) | `Static_1(_, float_value) => go( - [%expr `div([%e left], [%e render_float(~loc, float_value)])], + [%expr `div(([%e left], [%e render_float(~loc, float_value)]))], xs, ) }