fix interp order for transition

davesnx · May 31, 2024 · 0bedb73 · 0bedb73
1 parent e7318d2
commit 0bedb73
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 23 deletions.
diff --git a/packages/ppx/src/declarations_to_emotion.re b/packages/ppx/src/declarations_to_emotion.re
@@ -3043,11 +3043,11 @@ let render_single_transition = (~loc) =>
          [%e render_transition_property(~loc, property)],
        )];
     }
-  | `Static_1(property, duration, delay) => {
+  | `Static_1(property, duration, timingFunction) => {
       [%expr
        CssJs.Transition.shorthand(
          ~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)],
        )];
     }

diff --git a/packages/ppx/test/css-support/transitions.t/input.re b/packages/ppx/test/css-support/transitions.t/input.re
@@ -46,9 +46,20 @@ let property2 = "opacity";
 [%css
   {|transition: $(property) $(duration) $(timingFunction) $(delay), $(property2) 0s|}
 ];
-[%css {|transition: margin-right 0s $(timingFunction) 0s|}];
-[%css {|transition: all 2s $(timingFunction) 0s|}];
-[%css {|transition: $(property) 0s|}];
-[%css {|transition: all $(duration)|}];
-[%css {|transition: all $(duration) ease 3s|}];
-[%css {|transition: all 0s ease $(delay)|}];
+[%css {|transition: $(property) 0.2s ease-out 3s|}];
+[%css {|transition: $(property) 0.2s $(timingFunction) 3s|}];
+[%css {|transition: $(property) $(duration) $(timingFunction) 3s|}];
+[%css {|transition: margin-right $(duration) ease-out $(delay)|}];
+[%css {|transition: $(property) $(duration) ease-out $(delay)|}];
+[%css {|transition: margin-right 0.2s $(timingFunction) 3s|}];
+[%css {|transition: margin-right 0.2s ease-out $(delay)|}];
+[%css {|transition: $(property) 0.2s ease-in|}];
+[%css {|transition: $(property) 0.2s $(timingFunction)|}];
+[%css {|transition: margin-right $(duration) ease-in|}];
+[%css {|transition: $(property) $(duration) ease-in|}];
+[%css {|transition: margin-right 0.2s $(timingFunction)|}];
+[%css {|transition: $(property) 0.2s ease-in|}];
+[%css {|transition: margin-right $(duration) ease-in|}];
+[%css {|transition: margin-right 0.2s $(timingFunction)|}];
+[%css {|transition: $(property) 0.2s|}];
+[%css {|transition: margin-right $(duration)|}];
diff --git a/packages/ppx/test/css-support/transitions.t/run.t b/packages/ppx/test/css-support/transitions.t/run.t
@@ -152,37 +152,111 @@ This test only runs against Css_Js_Core from styled-ppx.css_native
   |]);
   CssJs.transitionList([|
     CssJs.Transition.shorthand(
-      ~duration=`s(0),
-      ~delay=`s(0),
+      ~duration=`ms(200),
+      ~delay=`s(3),
+      ~timingFunction=`easeOut,
+      property,
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
+      ~delay=`s(3),
       ~timingFunction,
-      {js|margin-right|js},
+      property,
     ),
   |]);
   CssJs.transitionList([|
     CssJs.Transition.shorthand(
-      ~duration=`s(2),
-      ~delay=`s(0),
+      ~duration,
+      ~delay=`s(3),
       ~timingFunction,
-      {js|all|js},
+      property,
     ),
   |]);
   CssJs.transitionList([|
-    CssJs.Transition.shorthand(~duration=`s(0), property),
+    CssJs.Transition.shorthand(
+      ~duration,
+      ~delay,
+      ~timingFunction=`easeOut,
+      {js|margin-right|js},
+    ),
   |]);
-  CssJs.transitionList([|CssJs.Transition.shorthand(~duration, {js|all|js})|]);
   CssJs.transitionList([|
     CssJs.Transition.shorthand(
       ~duration,
+      ~delay,
+      ~timingFunction=`easeOut,
+      property,
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
       ~delay=`s(3),
-      ~timingFunction=`ease,
-      {js|all|js},
+      ~timingFunction,
+      {js|margin-right|js},
     ),
   |]);
   CssJs.transitionList([|
     CssJs.Transition.shorthand(
-      ~duration=`s(0),
+      ~duration=`ms(200),
       ~delay,
-      ~timingFunction=`ease,
-      {js|all|js},
+      ~timingFunction=`easeOut,
+      {js|margin-right|js},
     ),
   |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
+      ~timingFunction=`easeIn,
+      property,
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(~duration=`ms(200), ~timingFunction, property),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration,
+      ~timingFunction=`easeIn,
+      {js|margin-right|js},
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(~duration, ~timingFunction=`easeIn, property),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
+      ~timingFunction,
+      {js|margin-right|js},
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
+      ~timingFunction=`easeIn,
+      property,
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration,
+      ~timingFunction=`easeIn,
+      {js|margin-right|js},
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(
+      ~duration=`ms(200),
+      ~timingFunction,
+      {js|margin-right|js},
+    ),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(~duration=`ms(200), property),
+  |]);
+  CssJs.transitionList([|
+    CssJs.Transition.shorthand(~duration, {js|margin-right|js}),
+  |]);
diff --git a/packages/reason-css-parser/lib/Parser.re b/packages/reason-css-parser/lib/Parser.re
@@ -1783,9 +1783,13 @@ and single_animation_fill_mode = [%value.rec
 ]
 and single_animation_iteration_count = [%value.rec "'infinite' | <number>"]
 and single_animation_play_state = [%value.rec "'running' | 'paused'"]
-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_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> <extended-time>] | [ [<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'"