From 53f96b3f0c8442189a7b6e766c084426d0b1720d Mon Sep 17 00:00:00 2001 From: zakybilfagih Date: Sun, 28 Jul 2024 18:06:08 +0700 Subject: [PATCH] make property optional on the transtion make function --- packages/css-property-parser/lib/Parser.re | 6 +- packages/ppx/src/Property_to_runtime.re | 26 ++---- .../test/css-support/transitions.t/input.re | 4 +- .../ppx/test/css-support/transitions.t/run.t | 92 ++++++++++++------- packages/runtime/native/shared/Css_types.ml | 2 +- .../runtime/native/shared/Declarations.ml | 4 +- 6 files changed, 78 insertions(+), 56 deletions(-) diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index 72ace706d..c3b101d12 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -1850,9 +1850,9 @@ and single_transition_no_interp = [%value.rec "[ | 'none' ] || || || " ] and single_transition = [%value.rec - "[ [ | 'none'] ] - | [ [ | 'none'] ] - | [ [ | 'none'] ]" + "[ [ | 'none'] ] + | [ [ | 'none'] ] + | [ [ | 'none'] ]" ] and single_transition_property = [%value.rec " | | 'all'" diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 156760174..c91cbcaa4 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -3108,6 +3108,8 @@ let transition_delay = let render_transition_property = (~loc) => fun | `None => render_string(~loc, "none") + | `Single_transition_property_no_interp(x) => + render_single_transition_property_no_interp(~loc, x) | `Single_transition_property(x) => render_single_transition_property(~loc, x); @@ -3117,7 +3119,8 @@ let render_single_transition = (~loc) => [%expr CSS.Transition.shorthand( ~duration=[%e render_extended_time(~loc, duration)], - [%e render_transition_property(~loc, property)], + ~property=[%e render_transition_property(~loc, property)], + (), )]; } | `Static_1(property, duration, timingFunction) => { @@ -3125,7 +3128,8 @@ let render_single_transition = (~loc) => CSS.Transition.shorthand( ~duration=[%e render_extended_time(~loc, duration)], ~timingFunction=[%e render_timing(~loc, timingFunction)], - [%e render_transition_property(~loc, property)], + ~property=[%e render_transition_property(~loc, property)], + (), )]; } | `Static_2(property, duration, timingFunction, delay) => { @@ -3134,7 +3138,8 @@ let render_single_transition = (~loc) => ~duration=[%e render_extended_time(~loc, duration)], ~delay=[%e render_extended_time(~loc, delay)], ~timingFunction=[%e render_timing(~loc, timingFunction)], - [%e render_transition_property(~loc, property)], + ~property=[%e render_transition_property(~loc, property)], + (), )]; }; @@ -3143,18 +3148,6 @@ let render_single_transition_no_interp = ~loc, (property, delay, timingFunction, duration): Types.single_transition_no_interp, ) => { - let property = - switch ( - Option.value( - property, - ~default=`Single_transition_property_no_interp(`All), - ) - ) { - | `None => render_string(~loc, "none") - | `Single_transition_property_no_interp(x) => - render_single_transition_property_no_interp(~loc, x) - }; - [%expr CSS.Transition.shorthand( ~duration=?[%e @@ -3164,7 +3157,8 @@ let render_single_transition_no_interp = ~timingFunction=?[%e render_option(~loc, render_timing_no_interp, timingFunction) ], - [%e property], + ~property=?[%e render_option(~loc, render_transition_property, property)], + (), )]; }; diff --git a/packages/ppx/test/css-support/transitions.t/input.re b/packages/ppx/test/css-support/transitions.t/input.re index 8cdeb8f16..9d32a1c84 100644 --- a/packages/ppx/test/css-support/transitions.t/input.re +++ b/packages/ppx/test/css-support/transitions.t/input.re @@ -31,8 +31,8 @@ // Interpolation let transitions = [| - CSS.Transition.shorthand("margin-left"), - CSS.Transition.shorthand(~duration=`s(2), "opacity"), + CSS.Transition.shorthand(~property="margin-left", ()), + CSS.Transition.shorthand(~duration=`s(2), ~property="opacity", ()), |]; let property = "margin-right"; let timingFunction = `easeOut; diff --git a/packages/ppx/test/css-support/transitions.t/run.t b/packages/ppx/test/css-support/transitions.t/run.t index 6cdf6edac..897a2b458 100644 --- a/packages/ppx/test/css-support/transitions.t/run.t +++ b/packages/ppx/test/css-support/transitions.t/run.t @@ -41,13 +41,15 @@ If this test fail means that the module is not in sync with the ppx ~duration=?Some(`s(2)), ~delay=?None, ~timingFunction=?None, - {js|margin-right|js}, + ~property=?Some({js|margin-right|js}), + (), ), CSS.Transition.shorthand( ~duration=?Some(`ms(500)), ~delay=?None, ~timingFunction=?None, - {js|opacity|js}, + ~property=?Some({js|opacity|js}), + (), ), |]); CSS.transitionList([| @@ -55,7 +57,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?Some(`s(1)), ~delay=?Some(`s(2)), ~timingFunction=?Some(`linear), - {js|width|js}, + ~property=?Some({js|width|js}), + (), ), |]); CSS.transitionList([| @@ -63,7 +66,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?None, ~delay=?None, ~timingFunction=?None, - {js|none|js}, + ~property=?Some({js|none|js}), + (), ), |]); CSS.transitionList([| @@ -71,7 +75,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?None, ~delay=?None, ~timingFunction=?None, - {js|margin-right|js}, + ~property=?Some({js|margin-right|js}), + (), ), |]); CSS.transitionList([| @@ -79,7 +84,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?None, ~delay=?None, ~timingFunction=?Some(`easeIn), - {js|margin-right|js}, + ~property=?Some({js|margin-right|js}), + (), ), |]); CSS.transitionList([| @@ -87,7 +93,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?Some(`ms(500)), ~delay=?None, ~timingFunction=?None, - {js|all|js}, + ~property=?None, + (), ), |]); CSS.transitionList([| @@ -95,7 +102,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?Some(`ms(200)), ~delay=?Some(`ms(500)), ~timingFunction=?None, - {js|all|js}, + ~property=?None, + (), ), |]); CSS.transitionList([| @@ -103,7 +111,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=?None, ~delay=?None, ~timingFunction=?Some(`linear), - {js|all|js}, + ~property=?None, + (), ), |]); CSS.transitionList([| @@ -111,13 +120,14 @@ If this test fail means that the module is not in sync with the ppx ~duration=?Some(`s(1)), ~delay=?Some(`ms(500)), ~timingFunction=?Some(`linear), - {js|margin-right|js}, + ~property=?Some({js|margin-right|js}), + (), ), |]); let transitions = [| - CSS.Transition.shorthand("margin-left"), - CSS.Transition.shorthand(~duration=`s(2), "opacity"), + CSS.Transition.shorthand(~property="margin-left", ()), + CSS.Transition.shorthand(~duration=`s(2), ~property="opacity", ()), |]; let property = "margin-right"; let timingFunction = `easeOut; @@ -128,18 +138,19 @@ If this test fail means that the module is not in sync with the ppx (CSS.transitionList(transitions): CSS.rule); CSS.transitionList([| - CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property), + CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, ~property, ()), |]); CSS.transitionList([| - CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property), - CSS.Transition.shorthand(~duration=`s(0), property2), + CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, ~property, ()), + CSS.Transition.shorthand(~duration=`s(0), ~property=property2, ()), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration=`ms(200), ~delay=`s(3), ~timingFunction=`easeOut, - property, + ~property, + (), ), |]); CSS.transitionList([| @@ -147,7 +158,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=`ms(200), ~delay=`s(3), ~timingFunction, - property, + ~property, + (), ), |]); CSS.transitionList([| @@ -155,7 +167,8 @@ If this test fail means that the module is not in sync with the ppx ~duration, ~delay=`s(3), ~timingFunction, - property, + ~property, + (), ), |]); CSS.transitionList([| @@ -163,7 +176,8 @@ If this test fail means that the module is not in sync with the ppx ~duration, ~delay, ~timingFunction=`easeOut, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| @@ -171,7 +185,8 @@ If this test fail means that the module is not in sync with the ppx ~duration, ~delay, ~timingFunction=`easeOut, - property, + ~property, + (), ), |]); CSS.transitionList([| @@ -179,7 +194,8 @@ If this test fail means that the module is not in sync with the ppx ~duration=`ms(200), ~delay=`s(3), ~timingFunction, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| @@ -187,60 +203,72 @@ If this test fail means that the module is not in sync with the ppx ~duration=`ms(200), ~delay, ~timingFunction=`easeOut, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction=`easeIn, - property, + ~property, + (), ), |]); CSS.transitionList([| - CSS.Transition.shorthand(~duration=`ms(200), ~timingFunction, property), + CSS.Transition.shorthand( + ~duration=`ms(200), + ~timingFunction, + ~property, + (), + ), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration, ~timingFunction=`easeIn, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| - CSS.Transition.shorthand(~duration, ~timingFunction=`easeIn, property), + CSS.Transition.shorthand(~duration, ~timingFunction=`easeIn, ~property, ()), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction=`easeIn, - property, + ~property, + (), ), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration, ~timingFunction=`easeIn, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction, - {js|margin-right|js}, + ~property={js|margin-right|js}, + (), ), |]); CSS.transitionList([| - CSS.Transition.shorthand(~duration=`ms(200), property), + CSS.Transition.shorthand(~duration=`ms(200), ~property, ()), |]); CSS.transitionList([| - CSS.Transition.shorthand(~duration, {js|margin-right|js}), + CSS.Transition.shorthand(~duration, ~property={js|margin-right|js}, ()), |]); diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml index f26e54e66..9f3d9feec 100644 --- a/packages/runtime/native/shared/Css_types.ml +++ b/packages/runtime/native/shared/Css_types.ml @@ -1098,7 +1098,7 @@ module Transition = struct ] let make ?(duration = `ms 0) ?(delay = `ms 0) ?(timingFunction = `ease) - property : t = + ?(property = "all") () : t = `value { duration; delay; timingFunction; property } let toString x = diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml index 70983230e..c88373776 100644 --- a/packages/runtime/native/shared/Declarations.ml +++ b/packages/runtime/native/shared/Declarations.ml @@ -829,11 +829,11 @@ let transitionList x = ( {js|transition|js}, Kloth.Array.map_and_join ~sep:{js|, |js} ~f:Transition.toString x ) -let transition ?duration ?delay ?timingFunction property = +let transition ?duration ?delay ?timingFunction ?property () = Rule.declaration ( {js|transition|js}, Transition.toString - (Transition.make ?duration ?delay ?timingFunction property) ) + (Transition.make ?duration ?delay ?timingFunction ?property ()) ) let transitionDelay i = Rule.declaration ({js|transitionDelay|js}, Time.toString i)