Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make property optional on the transtion make function #499

Merged
merged 1 commit into from
Aug 12, 2024
Merged

Make property optional on the transtion make function #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/css-property-parser/lib/Parser.re
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading