diff --git a/bs-css/src/Css_AtomicTypes.res b/bs-css/src/Css_AtomicTypes.res
index 0a30bf0..3fe44bb 100644
--- a/bs-css/src/Css_AtomicTypes.res
+++ b/bs-css/src/Css_AtomicTypes.res
@@ -607,11 +607,11 @@ module FontWeight = {
 
 module Transform = {
   type t = [
-    | #translate(Length.t, Length.t)
-    | #translate3d(Length.t, Length.t, Length.t)
-    | #translateX(Length.t)
-    | #translateY(Length.t)
-    | #translateZ(Length.t)
+    | #translate(PercentageLengthCalc.t, PercentageLengthCalc.t)
+    | #translate3d(PercentageLengthCalc.t, PercentageLengthCalc.t, Length.t)
+    | #translateX(PercentageLengthCalc.t)
+    | #translateY(PercentageLengthCalc.t)
+    | #translateZ(PercentageLengthCalc.t)
     | #scale(float, float)
     | #scale3d(float, float, float)
     | #scaleX(float)
@@ -652,19 +652,23 @@ module Transform = {
 
   let string_of_translate3d = (x, y, z) =>
     "translate3d(" ++
-    Length.toString(x) ++
+    PercentageLengthCalc.toString(x) ++
     ", " ++
-    Length.toString(y) ++
+    PercentageLengthCalc.toString(y) ++
     ", " ++
     Length.toString(z) ++ ")"
 
   let toString = x =>
     switch x {
-    | #translate(x, y) => "translate(" ++ Length.toString(x) ++ ", " ++ Length.toString(y) ++ ")"
+    | #translate(x, y) =>
+      "translate(" ++
+      PercentageLengthCalc.toString(x) ++
+      ", " ++
+      PercentageLengthCalc.toString(y) ++ ")"
     | #translate3d(x, y, z) => string_of_translate3d(x, y, z)
-    | #translateX(x) => "translateX(" ++ Length.toString(x) ++ ")"
-    | #translateY(y) => "translateY(" ++ Length.toString(y) ++ ")"
-    | #translateZ(z) => "translateZ(" ++ Length.toString(z) ++ ")"
+    | #translateX(x) => "translateX(" ++ PercentageLengthCalc.toString(x) ++ ")"
+    | #translateY(y) => "translateY(" ++ PercentageLengthCalc.toString(y) ++ ")"
+    | #translateZ(z) => "translateZ(" ++ PercentageLengthCalc.toString(z) ++ ")"
     | #scale(x, y) => string_of_scale(x, y)
     | #scale3d(x, y, z) =>
       "scale3d(" ++
diff --git a/bs-css/src/Css_AtomicTypes.resi b/bs-css/src/Css_AtomicTypes.resi
index 7d773e1..4b4bfc6 100644
--- a/bs-css/src/Css_AtomicTypes.resi
+++ b/bs-css/src/Css_AtomicTypes.resi
@@ -433,11 +433,11 @@ module FontWeight: {
 
 module Transform: {
   type t = [
-    | #translate(Length.t, Length.t)
-    | #translate3d(Length.t, Length.t, Length.t)
-    | #translateX(Length.t)
-    | #translateY(Length.t)
-    | #translateZ(Length.t)
+    | #translate(PercentageLengthCalc.t, PercentageLengthCalc.t)
+    | #translate3d(PercentageLengthCalc.t, PercentageLengthCalc.t, Length.t)
+    | #translateX(PercentageLengthCalc.t)
+    | #translateY(PercentageLengthCalc.t)
+    | #translateZ(PercentageLengthCalc.t)
     | #scale(float, float)
     | #scale3d(float, float, float)
     | #scaleX(float)
@@ -454,11 +454,11 @@ module Transform: {
     | #perspective(int)
   ]
 
-  let translate: (Length.t, Length.t) => [> #translate(Length.t, Length.t)]
-  let translate3d: (Length.t, Length.t, Length.t) => [> #translate3d(Length.t, Length.t, Length.t)]
-  let translateX: Length.t => [> t]
-  let translateY: Length.t => [> t]
-  let translateZ: Length.t => [> t]
+  let translate: (PercentageLengthCalc.t, PercentageLengthCalc.t) => [> t]
+  let translate3d: (PercentageLengthCalc.t, PercentageLengthCalc.t, Length.t) => [> t]
+  let translateX: PercentageLengthCalc.t => [> t]
+  let translateY: PercentageLengthCalc.t => [> t]
+  let translateZ: PercentageLengthCalc.t => [> t]
   let scale: (float, float) => [> t]
   let scale3d: (float, float, float) => [> t]
   let scaleX: float => [> t]
diff --git a/bs-css/src/Css_Js_Core.res b/bs-css/src/Css_Js_Core.res
index c91625d..3fb56dd 100644
--- a/bs-css/src/Css_Js_Core.res
+++ b/bs-css/src/Css_Js_Core.res
@@ -363,16 +363,18 @@ let borderLeftColor = x => D("borderLeftColor", string_of_color(x))
 
 let borderLeftWidth = x => D("borderLeftWidth", Length.toString(x))
 
-let borderSpacing = x => D("borderSpacing", Length.toString(x))
+let borderSpacing = x => D("borderSpacing", PercentageLengthCalc.toString(x))
 
-let borderRadius = x => D("borderRadius", Length.toString(x))
+let borderRadius = x => D("borderRadius", PercentageLengthCalc.toString(x))
 let borderRadius4 = (~topLeft, ~topRight, ~bottomLeft, ~bottomRight) => D(
   "borderRadius",
-  Length.toString(topLeft) ++
+  PercentageLengthCalc.toString(topLeft) ++
   (" " ++
-  (Length.toString(topRight) ++
+  (PercentageLengthCalc.toString(topRight) ++
   (" " ++
-  (Length.toString(bottomLeft) ++ (" " ++ Length.toString(bottomRight)))))),
+  (PercentageLengthCalc.toString(bottomLeft) ++
+  (" " ++
+  PercentageLengthCalc.toString(bottomRight)))))),
 )
 
 let borderRightColor = x => D("borderRightColor", string_of_color(x))
@@ -381,13 +383,13 @@ let borderRightWidth = x => D("borderRightWidth", Length.toString(x))
 
 let borderTopColor = x => D("borderTopColor", string_of_color(x))
 
-let borderTopLeftRadius = x => D("borderTopLeftRadius", Length.toString(x))
+let borderTopLeftRadius = x => D("borderTopLeftRadius", PercentageLengthCalc.toString(x))
 
-let borderTopRightRadius = x => D("borderTopRightRadius", Length.toString(x))
+let borderTopRightRadius = x => D("borderTopRightRadius", PercentageLengthCalc.toString(x))
 
-let borderTopWidth = x => D("borderTopWidth", Length.toString(x))
+let borderTopWidth = x => D("borderTopWidth", PercentageLengthCalc.toString(x))
 
-let borderWidth = x => D("borderWidth", Length.toString(x))
+let borderWidth = x => D("borderWidth", PercentageLengthCalc.toString(x))
 
 let bottom = x => D("bottom", string_of_position(x))
 
@@ -1994,7 +1996,6 @@ let animationName = x => D("animationName", x)
 /**
  * SVG
  */
-
 module SVG = {
   let fill = x => D(
     "fill",
diff --git a/bs-css/src/Css_Js_Core.resi b/bs-css/src/Css_Js_Core.resi
index 604ad9d..fd0c5c4 100644
--- a/bs-css/src/Css_Js_Core.resi
+++ b/bs-css/src/Css_Js_Core.resi
@@ -303,15 +303,15 @@ let borderRightStyle: [< Types.BorderStyle.t | Types.Var.t | Types.Cascading.t]
 
 let borderRightWidth: Types.Length.t => rule
 
-let borderRadius: Types.Length.t => rule
+let borderRadius: Types.PercentageLengthCalc.t => rule
 let borderRadius4: (
-  ~topLeft: Types.Length.t,
-  ~topRight: Types.Length.t,
-  ~bottomLeft: Types.Length.t,
-  ~bottomRight: Types.Length.t,
+  ~topLeft: Types.PercentageLengthCalc.t,
+  ~topRight: Types.PercentageLengthCalc.t,
+  ~bottomLeft: Types.PercentageLengthCalc.t,
+  ~bottomRight: Types.PercentageLengthCalc.t,
 ) => rule
 
-let borderSpacing: Types.Length.t => rule
+let borderSpacing: Types.PercentageLengthCalc.t => rule
 
 /**
  The border-style shorthand CSS property sets the line style for all four sides of an element's border.
@@ -320,15 +320,15 @@ let borderStyle: [< Types.BorderStyle.t | Types.Var.t | Types.Cascading.t] => ru
 
 let borderTopColor: [< Types.Color.t | Types.Var.t] => rule
 
-let borderTopLeftRadius: Types.Length.t => rule
+let borderTopLeftRadius: Types.PercentageLengthCalc.t => rule
 
-let borderTopRightRadius: Types.Length.t => rule
+let borderTopRightRadius: Types.PercentageLengthCalc.t => rule
 
 let borderTopStyle: [< Types.BorderStyle.t | Types.Var.t | Types.Cascading.t] => rule
 
-let borderTopWidth: Types.Length.t => rule
+let borderTopWidth: Types.PercentageLengthCalc.t => rule
 
-let borderWidth: Types.Length.t => rule
+let borderWidth: Types.PercentageLengthCalc.t => rule
 
 let bottom: [< #auto | Types.PercentageLengthCalc.t | Types.Var.t | Types.Cascading.t] => rule
 
@@ -1385,7 +1385,6 @@ let selection: array<rule> => rule
 /**
  Combinators selectors
  */
-
 /**
  The > combinator selects nodes that are direct children of the first element.
  */
@@ -1660,11 +1659,15 @@ let fillBox: [> Types.GeometryBox.t]
 let strokeBox: [> Types.GeometryBox.t]
 let viewBox: [> Types.GeometryBox.t]
 
-let translate: (Types.Length.t, Types.Length.t) => [> Types.Transform.t]
-let translate3d: (Types.Length.t, Types.Length.t, Types.Length.t) => [> Types.Transform.t]
-let translateX: Types.Length.t => [> Types.Transform.t]
-let translateY: Types.Length.t => [> Types.Transform.t]
-let translateZ: Types.Length.t => [> Types.Transform.t]
+let translate: (Types.PercentageLengthCalc.t, Types.PercentageLengthCalc.t) => [> Types.Transform.t]
+let translate3d: (
+  Types.PercentageLengthCalc.t,
+  Types.PercentageLengthCalc.t,
+  Types.Length.t,
+) => [> Types.Transform.t]
+let translateX: Types.PercentageLengthCalc.t => [> Types.Transform.t]
+let translateY: Types.PercentageLengthCalc.t => [> Types.Transform.t]
+let translateZ: Types.PercentageLengthCalc.t => [> Types.Transform.t]
 let scale: (float, float) => [> Types.Transform.t]
 let scale3d: (float, float, float) => [> Types.Transform.t]
 let scaleX: float => [> Types.Transform.t]
@@ -1829,7 +1832,6 @@ let fontFace: (
 /**
  * Transition
  */
-
 module Transition: {
   type t = [#value(string)]
 
@@ -1857,7 +1859,6 @@ let transitions: array<[Transition.t]> => rule
 /**
  * Animation
  */
-
 module Animation: {
   type t = [#value(string)]
 
diff --git a/bs-css/src/Css_Legacy_Core.res b/bs-css/src/Css_Legacy_Core.res
index a8102f4..546b3d2 100644
--- a/bs-css/src/Css_Legacy_Core.res
+++ b/bs-css/src/Css_Legacy_Core.res
@@ -1992,7 +1992,6 @@ let animationName = x => D("animationName", x)
 /**
  * SVG
  */
-
 module SVG = {
   let fill = x => D(
     "fill",
diff --git a/bs-css/src/Css_Legacy_Core.resi b/bs-css/src/Css_Legacy_Core.resi
index b0453ca..b450f61 100644
--- a/bs-css/src/Css_Legacy_Core.resi
+++ b/bs-css/src/Css_Legacy_Core.resi
@@ -1371,7 +1371,6 @@ let selection: list<rule> => rule
 /**
  Combinators selectors
  */
-
 /**
  The > combinator selects nodes that are direct children of the first element.
  */
@@ -1646,11 +1645,15 @@ let fillBox: [> Types.GeometryBox.t]
 let strokeBox: [> Types.GeometryBox.t]
 let viewBox: [> Types.GeometryBox.t]
 
-let translate: (Types.Length.t, Types.Length.t) => [> Types.Transform.t]
-let translate3d: (Types.Length.t, Types.Length.t, Types.Length.t) => [> Types.Transform.t]
-let translateX: Types.Length.t => [> Types.Transform.t]
-let translateY: Types.Length.t => [> Types.Transform.t]
-let translateZ: Types.Length.t => [> Types.Transform.t]
+let translate: (Types.PercentageLengthCalc.t, Types.PercentageLengthCalc.t) => [> Types.Transform.t]
+let translate3d: (
+  Types.PercentageLengthCalc.t,
+  Types.PercentageLengthCalc.t,
+  Types.Length.t,
+) => [> Types.Transform.t]
+let translateX: Types.PercentageLengthCalc.t => [> Types.Transform.t]
+let translateY: Types.PercentageLengthCalc.t => [> Types.Transform.t]
+let translateZ: Types.PercentageLengthCalc.t => [> Types.Transform.t]
 let scale: (float, float) => [> Types.Transform.t]
 let scale3d: (float, float, float) => [> Types.Transform.t]
 let scaleX: float => [> Types.Transform.t]
@@ -1815,7 +1818,6 @@ let fontFace: (
 /**
  * Transition
  */
-
 module Transition: {
   type t = [#value(string)]
 
@@ -1843,7 +1845,6 @@ let transitions: list<[Transition.t]> => rule
 /**
  * Animation
  */
-
 module Animation: {
   type t = [#value(string)]
 
@@ -1918,7 +1919,6 @@ let animationTimingFunction: Types.TimingFunction.t => rule
 /**
  SVG
  *** */
-
 module SVG: {
   let fill: [< Types.SVG.Fill.t | Types.Color.t | Types.Var.t | Types.Url.t] => rule
   let fillRule: [#nonzero | #evenodd] => rule