From c1ba64937d4431259ffd6f429ad02a0cbe1afe6e Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Thu, 8 Aug 2024 00:26:50 +0700 Subject: [PATCH 1/2] cleanup grid properties --- packages/ppx/src/Property_to_runtime.re | 26 +- .../css-support/grid-layout-module.t/input.re | 25 +- .../css-support/grid-layout-module.t/run.t | 456 ++++++++++-------- packages/runtime/native/shared/Alias.ml | 46 +- packages/runtime/native/shared/Css_types.ml | 178 ++++++- .../runtime/native/shared/Declarations.ml | 89 +--- 6 files changed, 482 insertions(+), 338 deletions(-) diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 156760174..be295dc61 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -3692,7 +3692,7 @@ let render_line_names = (~loc, value: Types.line_names) => { line_names |> String.concat(" ") |> Printf.sprintf("[%s]") - |> (name => [[%expr `name([%e render_string(~loc, name)])]]); + |> (name => [[%expr `lineNames([%e render_string(~loc, name)])]]); }; let render_maybe_line_names = (~loc, value) => { @@ -3899,13 +3899,15 @@ let grid_template_columns = (~loc) => [%expr CSS.gridTemplateColumns], (~loc, value: Types.property_grid_template_columns) => switch (value) { - | `None => [%expr [|`none|]] | `Interpolation(v) => render_variable(~loc, v) + | `None => [%expr `none] | `Track_list(track_list, line_names) => - render_track_list(~loc, track_list, line_names) - | `Auto_track_list(list) => render_auto_track_list(~loc, list) - | `Static((), None) => [%expr [|`subgrid|]] - | `Static((), Some(subgrid)) => render_subgrid(~loc, subgrid) + [%expr `value([%e render_track_list(~loc, track_list, line_names)])] + | `Auto_track_list(list) => + [%expr `value([%e render_auto_track_list(~loc, list)])] + | `Static((), None) => [%expr `value([|`subgrid|])] + | `Static((), Some(subgrid)) => + [%expr `value([%e render_subgrid(~loc, subgrid)])] }, ); @@ -3915,13 +3917,15 @@ let grid_template_rows = (~loc) => [%expr CSS.gridTemplateRows], (~loc, value: Types.property_grid_template_rows) => switch (value) { - | `None => [%expr [|`none|]] | `Interpolation(v) => render_variable(~loc, v) + | `None => [%expr `none] | `Track_list(track_list, line_names) => - render_track_list(~loc, track_list, line_names) - | `Auto_track_list(list) => render_auto_track_list(~loc, list) - | `Static((), None) => [%expr [|`subgrid|]] - | `Static((), Some(subgrid)) => render_subgrid(~loc, subgrid) + [%expr `value([%e render_track_list(~loc, track_list, line_names)])] + | `Auto_track_list(list) => + [%expr `value([%e render_auto_track_list(~loc, list)])] + | `Static((), None) => [%expr `value([|`subgrid|])] + | `Static((), Some(subgrid)) => + [%expr `value([%e render_subgrid(~loc, subgrid)])] }, ); diff --git a/packages/ppx/test/css-support/grid-layout-module.t/input.re b/packages/ppx/test/css-support/grid-layout-module.t/input.re index 908a6dc45..eb3dfb9b0 100644 --- a/packages/ppx/test/css-support/grid-layout-module.t/input.re +++ b/packages/ppx/test/css-support/grid-layout-module.t/input.re @@ -35,18 +35,19 @@ [%css {|grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; |} ]; -let value = [| - `repeat(( - `num(4), - [| - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - `name({js|[col-end]|js}), - |], - )), - `pxFloat(10.), -|]; +let value = + `value([| + `repeat(( + `num(4), + [| + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + `lineNames({js|[col-end]|js}), + |], + )), + `pxFloat(10.), + |]); [%css {|grid-template-columns: $(value)|}]; [%css {|grid-template-rows: none|}]; [%css {|grid-template-rows: auto|}]; diff --git a/packages/ppx/test/css-support/grid-layout-module.t/run.t b/packages/ppx/test/css-support/grid-layout-module.t/run.t index 1313ac175..6d02d0dd9 100644 --- a/packages/ppx/test/css-support/grid-layout-module.t/run.t +++ b/packages/ppx/test/css-support/grid-layout-module.t/run.t @@ -18,137 +18,167 @@ If this test fail means that the module is not in sync with the ppx CSS.display(`grid); CSS.display(`inlineGrid); - CSS.gridTemplateColumns([|`none|]); - CSS.gridTemplateColumns([|`auto|]); - CSS.gridTemplateColumns([|`pxFloat(100.)|]); - CSS.gridTemplateColumns([|`fr(1.)|]); - CSS.gridTemplateColumns([|`pxFloat(100.), `fr(1.), `auto|]); - CSS.gridTemplateColumns([| - `repeat((`num(2), [|`pxFloat(100.), `fr(1.)|])), - |]); - CSS.gridTemplateColumns([| - `repeat(( - `num(4), - [| - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - `name({js|[col-end]|js}), - |], - )), - `pxFloat(10.), - |]); - CSS.gridTemplateColumns([| - `pxFloat(100.), - `fr(1.), - `maxContent, - `minmax((`minContent, `fr(1.))), - |]); - CSS.gridTemplateColumns([| - `repeat((`autoFill, [|`minmax((`ch(25.), `fr(1.)))|])), - |]); - CSS.gridTemplateColumns([| - `name({js|[col-end]|js}), - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - |]); - CSS.gridTemplateColumns([| - `name({js|[last]|js}), - `name({js|[first nav-start]|js}), - `pxFloat(150.), - `name({js|[main-start]|js}), - `fr(1.), - |]); - CSS.gridTemplateColumns([| - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - `name({js|[col-end]|js}), - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - `name({js|[col-end]|js}), - `pxFloat(10.), - |]); - CSS.gridTemplateColumns([| - `name({js|[a]|js}), - `auto, - `name({js|[b]|js}), - `minmax((`minContent, `fr(1.))), - `name({js|[b c d]|js}), - `repeat((`num(2), [|`name({js|[e]|js}), `pxFloat(40.)|])), - `repeat((`num(5), [|`auto|])), - |]); - CSS.gridTemplateColumns([| - `pxFloat(200.), - `repeat((`autoFill, [|`pxFloat(100.)|])), - `pxFloat(300.), - |]); - CSS.gridTemplateColumns([| - `minmax((`pxFloat(100.), `maxContent)), - `repeat((`autoFill, [|`pxFloat(200.)|])), - `percent(20.), - |]); - CSS.gridTemplateColumns([| - `name({js|[linename1]|js}), - `pxFloat(100.), - `name({js|[linename2]|js}), - `repeat(( - `autoFit, - [|`name({js|[linename3 linename4]|js}), `pxFloat(300.)|], - )), - `pxFloat(100.), - |]); + CSS.gridTemplateColumns(`none); + CSS.gridTemplateColumns(`value([|`auto|])); + CSS.gridTemplateColumns(`value([|`pxFloat(100.)|])); + CSS.gridTemplateColumns(`value([|`fr(1.)|])); + CSS.gridTemplateColumns(`value([|`pxFloat(100.), `fr(1.), `auto|])); + CSS.gridTemplateColumns( + `value([|`repeat((`num(2), [|`pxFloat(100.), `fr(1.)|]))|]), + ); + CSS.gridTemplateColumns( + `value([| + `repeat(( + `num(4), + [| + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + `lineNames({js|[col-end]|js}), + |], + )), + `pxFloat(10.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `pxFloat(100.), + `fr(1.), + `maxContent, + `minmax((`minContent, `fr(1.))), + |]), + ); + CSS.gridTemplateColumns( + `value([|`repeat((`autoFill, [|`minmax((`ch(25.), `fr(1.)))|]))|]), + ); + CSS.gridTemplateColumns( + `value([| + `lineNames({js|[col-end]|js}), + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `lineNames({js|[last]|js}), + `lineNames({js|[first nav-start]|js}), + `pxFloat(150.), + `lineNames({js|[main-start]|js}), + `fr(1.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + `lineNames({js|[col-end]|js}), + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + `lineNames({js|[col-end]|js}), + `pxFloat(10.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `lineNames({js|[a]|js}), + `auto, + `lineNames({js|[b]|js}), + `minmax((`minContent, `fr(1.))), + `lineNames({js|[b c d]|js}), + `repeat((`num(2), [|`lineNames({js|[e]|js}), `pxFloat(40.)|])), + `repeat((`num(5), [|`auto|])), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `pxFloat(200.), + `repeat((`autoFill, [|`pxFloat(100.)|])), + `pxFloat(300.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `minmax((`pxFloat(100.), `maxContent)), + `repeat((`autoFill, [|`pxFloat(200.)|])), + `percent(20.), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `lineNames({js|[linename1]|js}), + `pxFloat(100.), + `lineNames({js|[linename2]|js}), + `repeat(( + `autoFit, + [|`lineNames({js|[linename3 linename4]|js}), `pxFloat(300.)|], + )), + `pxFloat(100.), + |]), + ); - CSS.gridTemplateColumns([| - `name({js|[linename1 linename2]|js}), - `pxFloat(100.), - `repeat((`autoFit, [|`name({js|[linename1]|js}), `pxFloat(300.)|])), - `name({js|[linename3]|js}), - |]); - let value = [| - `repeat(( - `num(4), - [| - `pxFloat(10.), - `name({js|[col-start]|js}), - `pxFloat(250.), - `name({js|[col-end]|js}), - |], - )), - `pxFloat(10.), - |]; + CSS.gridTemplateColumns( + `value([| + `lineNames({js|[linename1 linename2]|js}), + `pxFloat(100.), + `repeat(( + `autoFit, + [|`lineNames({js|[linename1]|js}), `pxFloat(300.)|], + )), + `lineNames({js|[linename3]|js}), + |]), + ); + let value = + `value([| + `repeat(( + `num(4), + [| + `pxFloat(10.), + `lineNames({js|[col-start]|js}), + `pxFloat(250.), + `lineNames({js|[col-end]|js}), + |], + )), + `pxFloat(10.), + |]); (CSS.gridTemplateColumns(value): CSS.rule); - CSS.gridTemplateRows([|`none|]); - CSS.gridTemplateRows([|`auto|]); - CSS.gridTemplateRows([|`pxFloat(100.)|]); - CSS.gridTemplateRows([|`fr(1.)|]); - CSS.gridTemplateRows([|`pxFloat(100.), `fr(1.), `auto|]); - CSS.gridTemplateRows([| - `repeat((`num(2), [|`pxFloat(100.), `fr(1.)|])), - |]); - CSS.gridTemplateRows([| - `pxFloat(100.), - `fr(1.), - `maxContent, - `minmax((`minContent, `fr(1.))), - |]); - CSS.gridTemplateRows([| - `name({js|[row-end]|js}), - `pxFloat(10.), - `name({js|[row-start]|js}), - `pxFloat(250.), - |]); - CSS.gridTemplateRows([| - `name({js|[last]|js}), - `name({js|[first header-start]|js}), - `pxFloat(50.), - `name({js|[main-start]|js}), - `fr(1.), - `name({js|[footer-start]|js}), - `pxFloat(50.), - |]); + CSS.gridTemplateRows(`none); + CSS.gridTemplateRows(`value([|`auto|])); + CSS.gridTemplateRows(`value([|`pxFloat(100.)|])); + CSS.gridTemplateRows(`value([|`fr(1.)|])); + CSS.gridTemplateRows(`value([|`pxFloat(100.), `fr(1.), `auto|])); + CSS.gridTemplateRows( + `value([|`repeat((`num(2), [|`pxFloat(100.), `fr(1.)|]))|]), + ); + CSS.gridTemplateRows( + `value([| + `pxFloat(100.), + `fr(1.), + `maxContent, + `minmax((`minContent, `fr(1.))), + |]), + ); + CSS.gridTemplateRows( + `value([| + `lineNames({js|[row-end]|js}), + `pxFloat(10.), + `lineNames({js|[row-start]|js}), + `pxFloat(250.), + |]), + ); + CSS.gridTemplateRows( + `value([| + `lineNames({js|[last]|js}), + `lineNames({js|[first header-start]|js}), + `pxFloat(50.), + `lineNames({js|[main-start]|js}), + `fr(1.), + `lineNames({js|[footer-start]|js}), + `pxFloat(50.), + |]), + ); CSS.unsafe({js|gridTemplateAreas|js}, {js|none|js}); CSS.unsafe({js|gridTemplateAreas|js}, {js|'articles'|js}); CSS.unsafe({js|gridTemplateAreas|js}, {js|'head head'|js}); @@ -227,71 +257,103 @@ If this test fail means that the module is not in sync with the ppx CSS.gridGap(`em(1.)); CSS.unsafe({js|gridGap|js}, {js|1em 1em|js}); - CSS.gridTemplateColumns([|`subgrid|]); - CSS.gridTemplateColumns([|`subgrid, `name({js|[sub-a]|js})|]); - CSS.gridTemplateColumns([| - `subgrid, - `name({js|[sub-a]|js}), - `name({js|[sub-b]|js}), - |]); - CSS.gridTemplateColumns([| - `subgrid, - `repeat((`num(1), [|`name({js|[sub-a]|js})|])), - |]); - CSS.gridTemplateColumns([| - `subgrid, - `repeat((`num(2), [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), - `name({js|[sub-c]|js}), - |]); - CSS.gridTemplateColumns([| - `subgrid, - `repeat((`autoFill, [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), - |]); - CSS.gridTemplateColumns([| - `subgrid, - `name({js|[sub-a]|js}), - `repeat(( - `autoFill, - [| - `name({js|[sub-b]|js}), - `name({js|[sub-c]|js}), - `name({js|[sub-d]|js}), - |], - )), - `name({js|[sub-e]|js}), - `repeat((`num(1), [|`name({js|[sub-g]|js})|])), - |]); - CSS.gridTemplateRows([|`subgrid|]); - CSS.gridTemplateRows([|`subgrid, `name({js|[sub-a]|js})|]); - CSS.gridTemplateRows([| - `subgrid, - `name({js|[sub-a]|js}), - `name({js|[sub-b]|js}), - |]); - CSS.gridTemplateRows([| - `subgrid, - `repeat((`num(1), [|`name({js|[sub-a]|js})|])), - |]); - CSS.gridTemplateRows([| - `subgrid, - `repeat((`num(2), [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), - `name({js|[sub-c]|js}), - |]); - CSS.gridTemplateRows([| - `subgrid, - `repeat((`autoFill, [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), - |]); - CSS.gridTemplateRows([| - `subgrid, - `name({js|[sub-a]|js}), - `repeat(( - `autoFill, - [| - `name({js|[sub-b]|js}), - `name({js|[sub-c]|js}), - `name({js|[sub-d]|js}), - |], - )), - `name({js|[sub-e]|js}), - `repeat((`num(1), [|`name({js|[sub-g]|js})|])), - |]); + CSS.gridTemplateColumns(`value([|`subgrid|])); + CSS.gridTemplateColumns(`value([|`subgrid, `lineNames({js|[sub-a]|js})|])); + CSS.gridTemplateColumns( + `value([| + `subgrid, + `lineNames({js|[sub-a]|js}), + `lineNames({js|[sub-b]|js}), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `subgrid, + `repeat((`num(1), [|`lineNames({js|[sub-a]|js})|])), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `subgrid, + `repeat(( + `num(2), + [|`lineNames({js|[sub-a]|js}), `lineNames({js|[sub-b]|js})|], + )), + `lineNames({js|[sub-c]|js}), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `subgrid, + `repeat(( + `autoFill, + [|`lineNames({js|[sub-a]|js}), `lineNames({js|[sub-b]|js})|], + )), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `subgrid, + `lineNames({js|[sub-a]|js}), + `repeat(( + `autoFill, + [| + `lineNames({js|[sub-b]|js}), + `lineNames({js|[sub-c]|js}), + `lineNames({js|[sub-d]|js}), + |], + )), + `lineNames({js|[sub-e]|js}), + `repeat((`num(1), [|`lineNames({js|[sub-g]|js})|])), + |]), + ); + CSS.gridTemplateRows(`value([|`subgrid|])); + CSS.gridTemplateRows(`value([|`subgrid, `lineNames({js|[sub-a]|js})|])); + CSS.gridTemplateRows( + `value([| + `subgrid, + `lineNames({js|[sub-a]|js}), + `lineNames({js|[sub-b]|js}), + |]), + ); + CSS.gridTemplateRows( + `value([| + `subgrid, + `repeat((`num(1), [|`lineNames({js|[sub-a]|js})|])), + |]), + ); + CSS.gridTemplateRows( + `value([| + `subgrid, + `repeat(( + `num(2), + [|`lineNames({js|[sub-a]|js}), `lineNames({js|[sub-b]|js})|], + )), + `lineNames({js|[sub-c]|js}), + |]), + ); + CSS.gridTemplateRows( + `value([| + `subgrid, + `repeat(( + `autoFill, + [|`lineNames({js|[sub-a]|js}), `lineNames({js|[sub-b]|js})|], + )), + |]), + ); + CSS.gridTemplateRows( + `value([| + `subgrid, + `lineNames({js|[sub-a]|js}), + `repeat(( + `autoFill, + [| + `lineNames({js|[sub-b]|js}), + `lineNames({js|[sub-c]|js}), + `lineNames({js|[sub-d]|js}), + |], + )), + `lineNames({js|[sub-e]|js}), + `repeat((`num(1), [|`lineNames({js|[sub-g]|js})|])), + |]), + ); diff --git a/packages/runtime/native/shared/Alias.ml b/packages/runtime/native/shared/Alias.ml index c753f9a0f..7ac4e4b97 100644 --- a/packages/runtime/native/shared/Alias.ml +++ b/packages/runtime/native/shared/Alias.ml @@ -2,9 +2,9 @@ open Css_types -let initial : Cascading.t = `initial -let inherit_ : Cascading.t = `inherit_ -let unset : Cascading.t = `unset +let initial = `initial +let inherit_ = `inherit_ +let unset = `unset let var ?default (x : string) : Var.t = match default with None -> `var x | Some default -> `varDefault (x, default) @@ -12,26 +12,26 @@ let var ?default (x : string) : Var.t = let auto = `auto let none = `none let text = `text -let pct (f : float) : Percentage.t = `percent f -let ch x : Length.t = `ch x -let cm x : Length.t = `cm x -let em x : Length.t = `em x -let ex x : Length.t = `ex x -let mm x : Length.t = `mm x -let pt x : Length.t = `pt x -let px x : Length.t = `px x -let pxFloat x : Length.t = `pxFloat x -let rem x : Length.t = `rem x -let vh x : Length.t = `vh x -let vmin x : Length.t = `vmin x -let vmax x : Length.t = `vmax x -let zero : Length.t = `zero -let deg x : Angle.t = `deg x -let rad x : Angle.t = `rad x -let grad x : Angle.t = `grad x -let turn x : Angle.t = `turn x -let ltr : Direction.t = `ltr -let rtl : Direction.t = `rtl +let pct (f : float) = `percent f +let ch x = `ch x +let cm x = `cm x +let em x = `em x +let ex x = `ex x +let mm x = `mm x +let pt x = `pt x +let px x = `px x +let pxFloat x = `pxFloat x +let rem x = `rem x +let vh x = `vh x +let vmin x = `vmin x +let vmax x = `vmax x +let zero = `zero +let deg x = `deg x +let rad x = `rad x +let grad x = `grad x +let turn x = `turn x +let ltr = `ltr +let rtl = `rtl let absolute = PropertyPosition.absolute let relative = PropertyPosition.relative let static = PropertyPosition.static diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml index f26e54e66..0254d107e 100644 --- a/packages/runtime/native/shared/Css_types.ml +++ b/packages/runtime/native/shared/Css_types.ml @@ -729,20 +729,6 @@ module TimingFunction = struct | #Cascading.t as c -> Cascading.toString c end -module RepeatValue = struct - type t = - [ `autoFill - | `autoFit - | `num of int - ] - - let toString x = - match x with - | `autoFill -> {js|auto-fill|js} - | `autoFit -> {js|auto-fit|js} - | `num x -> Kloth.Int.to_string x -end - module ListStyleType = struct type t = [ `disc @@ -4076,3 +4062,167 @@ module FontVariantEmoji = struct | #Var.t as var -> Var.toString var | #Cascading.t as c -> Cascading.toString c end + +module InflexibleBreadth = struct + type t = + [ Length.t + | `minContent + | `maxContent + | `auto + ] + + let toString x = + match x with + | #Length.t as x -> Length.toString x + | `minContent -> {js|min-content|js} + | `maxContent -> {js|max-content|js} + | `auto -> {js|auto|js} +end + +module TrackBreadth = struct + type t = + [ InflexibleBreadth.t + | `fr of float + ] + + let toString x = + match x with + | #InflexibleBreadth.t as x -> InflexibleBreadth.toString x + | `fr x -> Kloth.Float.to_string x ^ {js|fr|js} +end + +module MinMax = struct + type t = [ `minmax of InflexibleBreadth.t * TrackBreadth.t ] + + let toString (x : t) = + match x with + | `minmax (a, b) -> + {js|minmax(|js} + ^ InflexibleBreadth.toString a + ^ {js|,|js} + ^ TrackBreadth.toString b + ^ {js|)|js} +end + +module TrackSize = struct + type t = + [ TrackBreadth.t + | MinMax.t + | `fitContent of Length.t + ] + + let toString (x : t) = + match x with + | #TrackBreadth.t as x -> TrackBreadth.toString x + | #MinMax.t as x -> MinMax.toString x + | `fitContent x -> + {js|fit-content|js} ^ {js|(|js} ^ Length.toString x ^ {js|)|js} +end + +module GridAutoRows = struct + type t = + [ `value of TrackSize.t array + | Var.t + | Cascading.t + ] + + let toString x = + match x with + | `value xs -> + Kloth.Array.map_and_join ~f:TrackSize.toString ~sep:{js| |js} xs + | #Var.t as var -> Var.toString var + | #Cascading.t as c -> Cascading.toString c +end + +module GridAutoColumns = GridAutoRows + +module FixedSize = struct + type t = + [ Length.t + | MinMax.t + ] + + let toString (x : t) = + match x with + | #Length.t as x -> Length.toString x + | #MinMax.t as x -> MinMax.toString x +end + +module RepeatValue = struct + type t = + [ `autoFill + | `autoFit + | `num of int + ] + + let toString x = + match x with + | `autoFill -> {js|auto-fill|js} + | `autoFit -> {js|auto-fit|js} + | `num x -> Kloth.Int.to_string x +end + +module RepeatTrack = struct + type t = + [ `lineNames of string + | FixedSize.t + | TrackSize.t + ] + + let toString (x : t) = + match x with + | `lineNames name -> name + | #FixedSize.t as x -> FixedSize.toString x + | #TrackSize.t as x -> TrackSize.toString x +end + +module Repeat = struct + type t = [ `repeat of RepeatValue.t * RepeatTrack.t array ] + + let toString (x : t) = + match x with + | `repeat (n, x) -> + {js|repeat(|js} + ^ RepeatValue.toString n + ^ {js|, |js} + ^ Kloth.Array.map_and_join ~f:RepeatTrack.toString ~sep:{js| |js} x + ^ {js|)|js} +end + +module Track = struct + type t = + [ `lineNames of string + | `subgrid + | FixedSize.t + | Repeat.t + | TrackSize.t + ] + + let toString (x : t) = + match x with + | `lineNames names -> names + | `subgrid -> {js|subgrid|js} + | #FixedSize.t as x -> FixedSize.toString x + | #Repeat.t as x -> Repeat.toString x + | #TrackSize.t as x -> TrackSize.toString x +end + +module GridTemplateRows = struct + type t = + [ None.t + | `value of Track.t array + | Var.t + | Cascading.t + ] + + let value x = `value x + + let toString (x : t) = + match x with + | #None.t -> None.toString + | `value x -> Kloth.Array.map_and_join ~f:Track.toString ~sep:{js| |js} x + | #Var.t as va -> Var.toString va + | #Cascading.t as c -> Cascading.toString c +end + +module GridTemplateColumns = GridTemplateRows diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml index 70983230e..28c1f9380 100644 --- a/packages/runtime/native/shared/Declarations.ml +++ b/packages/runtime/native/shared/Declarations.ml @@ -642,92 +642,19 @@ let flexBasis x = let order x = Rule.declaration ({js|order|js}, Kloth.Int.to_string x) -let string_of_minmax x = - match x with - | `auto -> {js|auto|js} - | #Length.t as l -> Length.toString l - | `fr x -> Kloth.Float.to_string x ^ {js|fr|js} - | `minContent -> {js|min-content|js} - | `maxContent -> {js|max-content|js} - -let string_of_dimension x = - match x with - | `auto -> {js|auto|js} - | `none -> {js|none|js} - | `subgrid -> {js|subgrid|js} - | #Length.t as l -> Length.toString l - | `fr x -> Kloth.Float.to_string x ^ {js|fr|js} - | `fitContent -> {js|fit-content|js} - | `minContent -> {js|min-content|js} - | `maxContent -> {js|max-content|js} - | `minmax (a, b) -> - {js|minmax(|js} - ^ string_of_minmax a - ^ {js|,|js} - ^ string_of_minmax b - ^ {js|)|js} - -type minmax = - [ `fr of float - | `minContent - | `maxContent - | `auto - | Length.t - ] - -type trackLength = - [ Length.t - | `auto - | `fr of float - | `minContent - | `maxContent - | `minmax of minmax * minmax - ] - -type gridLength = - [ trackLength - | `repeat of RepeatValue.t * trackLength array - ] - -let rec gridLengthToJs x = - match x with - | `name name -> name - | `subgrid -> {js|subgrid|js} - | `none -> {js|none|js} - | `auto -> {js|auto|js} - | #Length.t as l -> Length.toString l - | `fr x -> Kloth.Float.to_string x ^ {js|fr|js} - | `minContent -> {js|min-content|js} - | `maxContent -> {js|max-content|js} - | `fitContent x -> - {js|fit-content|js} ^ {js|(|js} ^ Length.toString x ^ {js|)|js} - | `repeat (n, x) -> - {js|repeat(|js} - ^ RepeatValue.toString n - ^ {js|, |js} - ^ string_of_dimensions x - ^ {js|)|js} - | `minmax (a, b) -> - {js|minmax(|js} - ^ string_of_minmax a - ^ {js|,|js} - ^ string_of_minmax b - ^ {js|)|js} - -and string_of_dimensions dimensions = - Kloth.Array.map_and_join ~f:gridLengthToJs ~sep:{js| |js} dimensions - let gridTemplateColumns dimensions = - Rule.declaration ({js|gridTemplateColumns|js}, string_of_dimensions dimensions) + Rule.declaration + ({js|gridTemplateColumns|js}, GridTemplateColumns.toString dimensions) let gridTemplateRows dimensions = - Rule.declaration ({js|gridTemplateRows|js}, string_of_dimensions dimensions) + Rule.declaration + ({js|gridTemplateRows|js}, GridTemplateRows.toString dimensions) -let gridAutoColumns dimensions = - Rule.declaration ({js|gridAutoColumns|js}, string_of_dimension dimensions) +let gridAutoColumns sizes = + Rule.declaration ({js|gridAutoColumns|js}, GridAutoColumns.toString sizes) -let gridAutoRows dimensions = - Rule.declaration ({js|gridAutoRows|js}, string_of_dimension dimensions) +let gridAutoRows sizes = + Rule.declaration ({js|gridAutoRows|js}, GridAutoRows.toString sizes) let gridArea x = Rule.declaration ({js|gridArea|js}, GridArea.toString x) From 93767d0e22bf4e799e9037fa8dc7aadda6610ea8 Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Thu, 8 Aug 2024 00:28:18 +0700 Subject: [PATCH 2/2] promote more test cases --- packages/ppx/test/css-support/random.t/run.t | 30 +++++++++++--------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/ppx/test/css-support/random.t/run.t b/packages/ppx/test/css-support/random.t/run.t index a695b97c5..d374b5edb 100644 --- a/packages/ppx/test/css-support/random.t/run.t +++ b/packages/ppx/test/css-support/random.t/run.t @@ -70,19 +70,23 @@ If this test fail means that the module is not in sync with the ppx CSS.unsafe({js|gridColumn|js}, {js|unset|js}); CSS.unsafe({js|gridRow|js}, {js|unset|js}); - CSS.gridTemplateColumns([|`maxContent, `maxContent|]); - CSS.gridTemplateColumns([| - `minmax((`pxFloat(10.), `auto)), - `fitContent(`pxFloat(20.)), - `fitContent(`pxFloat(20.)), - |]); - CSS.gridTemplateColumns([| - `minmax((`pxFloat(51.), `auto)), - `fitContent(`pxFloat(20.)), - `fitContent(`pxFloat(20.)), - |]); - CSS.gridTemplateColumns([|`repeat((`num(2), [|`auto|]))|]); - CSS.gridTemplateColumns([|`repeat((`num(3), [|`auto|]))|]); + CSS.gridTemplateColumns(`value([|`maxContent, `maxContent|])); + CSS.gridTemplateColumns( + `value([| + `minmax((`pxFloat(10.), `auto)), + `fitContent(`pxFloat(20.)), + `fitContent(`pxFloat(20.)), + |]), + ); + CSS.gridTemplateColumns( + `value([| + `minmax((`pxFloat(51.), `auto)), + `fitContent(`pxFloat(20.)), + `fitContent(`pxFloat(20.)), + |]), + ); + CSS.gridTemplateColumns(`value([|`repeat((`num(2), [|`auto|]))|])); + CSS.gridTemplateColumns(`value([|`repeat((`num(3), [|`auto|]))|])); CSS.unsafe({js|height|js}, {js|fit-content|js}); CSS.justifyItems(`start); CSS.unsafe({js|justifySelf|js}, {js|unset|js});