Skip to content

Commit

Permalink
make property optional on the transtion make function
Browse files Browse the repository at this point in the history
  • Loading branch information
@zakybilfagih
zakybilfagih committed Jul 28, 2024
1 parent 4ad5d0e commit 53f96b3
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 56 deletions.
6 changes: 3 additions & 3 deletions packages/css-property-parser/lib/Parser.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1850,9 +1850,9 @@ and single_transition_no_interp = [%value.rec
"[ <single-transition-property-no-interp> | 'none' ] || <extended-time-no-interp> || <timing-function-no-interp> || <extended-time-no-interp>"
]
and single_transition = [%value.rec
"[ [<single-transition-property> | 'none'] <extended-time>]
| [ [<single-transition-property> | 'none'] <extended-time> <timing-function>]
| [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time>]"
"[ [<single-transition-property> | 'none'] <extended-time> ]
| [ [<single-transition-property> | 'none'] <extended-time> <timing-function> ]
| [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time> ]"
]
and single_transition_property = [%value.rec
"<custom-ident> | <interpolation> | 'all'"
Expand Down
26 changes: 10 additions & 16 deletions packages/ppx/src/Property_to_runtime.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -3117,15 +3119,17 @@ 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) => {
[%expr
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) => {
Expand All @@ -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)],
(),
)];
};

Expand All @@ -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
Expand All @@ -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)],
(),
)];
};

Expand Down
4 changes: 2 additions & 2 deletions packages/ppx/test/css-support/transitions.t/input.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
92 changes: 60 additions & 32 deletions packages/ppx/test/css-support/transitions.t/run.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,83 +41,93 @@ 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([|
CSS.Transition.shorthand(
~duration=?Some(`s(1)),
~delay=?Some(`s(2)),
~timingFunction=?Some(`linear),
{js|width|js},
~property=?Some({js|width|js}),
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?None,
~delay=?None,
~timingFunction=?None,
{js|none|js},
~property=?Some({js|none|js}),
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?None,
~delay=?None,
~timingFunction=?None,
{js|margin-right|js},
~property=?Some({js|margin-right|js}),
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?None,
~delay=?None,
~timingFunction=?Some(`easeIn),
{js|margin-right|js},
~property=?Some({js|margin-right|js}),
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?Some(`ms(500)),
~delay=?None,
~timingFunction=?None,
{js|all|js},
~property=?None,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?Some(`ms(200)),
~delay=?Some(`ms(500)),
~timingFunction=?None,
{js|all|js},
~property=?None,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=?None,
~delay=?None,
~timingFunction=?Some(`linear),
{js|all|js},
~property=?None,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~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;
Expand All @@ -128,119 +138,137 @@ 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([|
CSS.Transition.shorthand(
~duration=`ms(200),
~delay=`s(3),
~timingFunction,
property,
~property,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration,
~delay=`s(3),
~timingFunction,
property,
~property,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration,
~delay,
~timingFunction=`easeOut,
{js|margin-right|js},
~property={js|margin-right|js},
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration,
~delay,
~timingFunction=`easeOut,
property,
~property,
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~duration=`ms(200),
~delay=`s(3),
~timingFunction,
{js|margin-right|js},
~property={js|margin-right|js},
(),
),
|]);
CSS.transitionList([|
CSS.Transition.shorthand(
~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}, ()),
|]);
2 changes: 1 addition & 1 deletion packages/runtime/native/shared/Css_types.ml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime/native/shared/Declarations.ml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 53f96b3

Please sign in to comment.