feat(transition): added support for CSS transitions

packages/css/src/AncestorCss.res

@@ -113,6 +113,12 @@ module Make = (
     textDecorationLine?: Parser.t<TextDecorationLine.t>,
     textDecoration?: Parser.t<TextDecoration.t>,
     transform?: Parser.t<Transform.t>,
+    transition?: Parser.t<Transition.t>,
+    transitionProperty?: Parser.t<string>,
+    transitionDelay?: Parser.t<Duration.t>,
+    transitionDuration?: Parser.t<Duration.t>,
+    transitionTimingFunction?: Parser.t<TimingFunction.t>,
+    transitions?: Parser.t<TransitionList.t>,
     /*
      * Pseudo selectors
      */
@@ -255,6 +261,12 @@ module Make = (
       s("text-decoration-line", styles.textDecorationLine, TextDecorationLine.toString),
       s("text-decoration", styles.textDecoration, TextDecoration.toString(~colors)),
       s("transform", styles.transform, Transform.toString),
+      s("transition", styles.transition, Transition.toString),
+      s("transition-property", styles.transitionProperty, v => v),
+      s("transition-delay", styles.transitionDelay, Duration.toString),
+      s("transition-duration", styles.transitionDuration, Duration.toString),
+      s("transition-timing-function", styles.transitionTimingFunction, TimingFunction.toString),
+      s("transition", styles.transitions, TransitionList.toString),
       p("&:hover", styles._hover),
       p("&:focus", styles._focus),
       p("&:active", styles._active),

packages/css/src/AncestorCss_Stories.res

@@ -86,3 +86,17 @@ let customSetup = () => {
     <ProviderTest />
   </CustomCss.Provider>
 }
+
+let transition = () => {
+  let className = AncestorCss.css({
+    bgColor: #hex("#000"),
+    color: #hex("#fafafa"),
+    transitionProperty: "background-color",
+    transitionDuration: 600.0->#ms,
+    _hover: {
+      bgColor: #hex("#363636"),
+    },
+  })
+
+  <button className> {"Click here"->React.string} </button>
+}

packages/css/src/AncestorCss_Types.res

@@ -761,4 +761,100 @@ module Make = (Config: Config) => {
   }
 
   module Height = Width
+  module Duration = {
+    type t = [
+      | #s(float)
+      | #ms(float)
+    ]
+
+    let toString = (v: t) =>
+      switch v {
+      | #s(value) => `${value->Js.Float.toString}s`
+      | #ms(value) => `${value->Js.Float.toString}ms`
+      }
+  }
+
+  module TimingFunction = {
+    type t = [
+      | #linear
+      | #"cubic-bezier"(float, float, float, float)
+      | #ease
+      | #"ease-in"
+      | #"ease-out"
+      | #"ease-in-out"
+      | #steps(int, [#start | #end])
+      | #"step-start"
+      | #"step-end"
+      | #"jump-start"
+      | #"jump-end"
+      | #"jump-none"
+      | #"jump-both"
+    ]
+
+    let floatOfString = Js.Float.toString
+
+    let toString = (v: t) =>
+      switch v {
+      | #linear => "linear"
+      | #ease => "ease"
+      | #"ease-in" => "ease-in"
+      | #"ease-out" => "ease-out"
+      | #"ease-in-out" => "ease-in-out"
+      | #"step-start" => "step-start"
+      | #"step-end" => "step-end"
+      | #"jump-start" => "jump-start"
+      | #"jump-end" => "jump-end"
+      | #"jump-none" => "jump-none"
+      | #"jump-both" => "jump-both"
+      | #steps(value, position) => `steps(${Js.Int.toString(value)}, ${(position :> string)})`
+      | #"cubic-bezier"(v1, v2, v3, v4) => {
+          let values = [v1, v2, v3, v4]->Js.Array2.map(Js.Float.toString)->Js.Array2.joinWith(", ")
+          `cubic-bezier(${values})`
+        }
+      }
+  }
+
+  module Transition = {
+    type transition = {
+      prop: string,
+      duration: Duration.t,
+      easing?: TimingFunction.t,
+      delay?: Duration.t,
+    }
+
+    type t = [
+      | #inherit
+      | #initial
+      | #revert
+      | #"revert-layer"
+      | #unset
+      | #v(transition)
+    ]
+
+    let toString = (v: t) =>
+      switch v {
+      | #inherit => "inherit"
+      | #initial => "initial"
+      | #revert => "revert"
+      | #"revert-layer" => "revert-layer"
+      | #unset => "unset"
+      | #v({prop, duration, ?easing, ?delay}) =>
+        [
+          prop,
+          duration->Duration.toString,
+          easing->Belt.Option.mapWithDefault("", TimingFunction.toString),
+          delay->Belt.Option.mapWithDefault("", Duration.toString),
+        ]->Js.Array2.joinWith(" ")
+      }
+  }
+
+  module TransitionList = {
+    type t = array<Transition.transition>
+
+    let toString = (v: t) =>
+      v
+      ->Js.Array2.map(value => #v(value))
+      ->Js.Array2.map(Transition.toString)
+      ->Js.Array2.joinWith(", ")
+  }
 }