From efcda627b578a5862c0cb7d5855752f9142ef491 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 13:50:55 -0300
Subject: [PATCH 01/12] feat: add css <angle>

---
 sketch/src/sketch/angle.gleam | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 sketch/src/sketch/angle.gleam

diff --git a/sketch/src/sketch/angle.gleam b/sketch/src/sketch/angle.gleam
new file mode 100644
index 0000000..5ea1b80
--- /dev/null
+++ b/sketch/src/sketch/angle.gleam
@@ -0,0 +1,33 @@
+import gleam/float
+
+pub opaque type Angle {
+  Deg(Float)
+  Rad(Float)
+  Grad(Float)
+  Turn(Float)
+}
+
+pub fn deg(value: Float) {
+  Deg(value)
+}
+
+pub fn rad(value: Float) {
+  Rad(value)
+}
+
+pub fn grad(value: Float) {
+  Grad(value)
+}
+
+pub fn turn(value: Float) {
+  Turn(value)
+}
+
+pub fn to_string(angle: Angle) {
+  case angle {
+    Deg(value) -> float.to_string(value) <> "deg"
+    Rad(value) -> float.to_string(value) <> "rad"
+    Grad(value) -> float.to_string(value) <> "grad"
+    Turn(value) -> float.to_string(value) <> "turn"
+  }
+}

From 5de51f12b1db83cfe352d0d42f2158252ab76f28 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 14:31:24 -0300
Subject: [PATCH 02/12] feat: initial transform API

---
 sketch/src/sketch.gleam           |   5 +-
 sketch/src/sketch/transform.gleam | 104 ++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 sketch/src/sketch/transform.gleam

diff --git a/sketch/src/sketch.gleam b/sketch/src/sketch.gleam
index 1239ef8..0425547 100644
--- a/sketch/src/sketch.gleam
+++ b/sketch/src/sketch.gleam
@@ -11,6 +11,7 @@ import sketch/internals/cache/setup as cache
 import sketch/internals/style
 import sketch/media.{type Query}
 import sketch/size.{type Size}
+import sketch/transform.{type Transform}
 
 // Types
 
@@ -1983,8 +1984,8 @@ pub fn touch_action(value: String) {
   property("touch-action", value)
 }
 
-pub fn transform(transform: String) {
-  property("transform", transform)
+pub fn transform(transform: Transform) {
+  property("transform", transform.to_string(transform))
 }
 
 pub fn transform_box(transform_box: String) {
diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
new file mode 100644
index 0000000..787d198
--- /dev/null
+++ b/sketch/src/sketch/transform.gleam
@@ -0,0 +1,104 @@
+import gleam/float
+import gleam/list
+import gleam/option.{type Option}
+import gleam/string
+import sketch/angle.{type Angle}
+import sketch/size.{type Size}
+
+pub opaque type Transform {
+  None
+  TransformList(List(TransformFunction))
+}
+
+pub opaque type TransformFunction {
+  Translate(Size, Option(Size))
+  TranslateX(Size)
+  TranslateY(Size)
+  Scale(Float, Option(Float))
+  ScaleX(Float)
+  ScaleY(Float)
+  Rotate(Angle)
+  Skew(Angle, Option(Angle))
+  SkewX(Angle)
+  SkewY(Angle)
+}
+
+fn transform_function_to_string(value: TransformFunction) {
+  case value {
+    Translate(x, option.None) ->
+      "translate("
+      <> string.join([size.to_string(x), size.to_string(x)], ",")
+      <> ")"
+    Translate(x, option.Some(y)) ->
+      "translate("
+      <> string.join([size.to_string(x), size.to_string(y)], ",")
+      <> ")"
+    TranslateX(x) -> "translateX(" <> size.to_string(x) <> ")"
+    TranslateY(y) -> "translateY(" <> size.to_string(y) <> ")"
+    Scale(x, option.None) ->
+      "scale("
+      <> string.join([float.to_string(x), float.to_string(x)], ",")
+      <> ")"
+    Scale(x, option.Some(y)) ->
+      "scale("
+      <> string.join([float.to_string(x), float.to_string(y)], ",")
+      <> ")"
+    ScaleX(x) -> "scaleX(" <> float.to_string(x) <> ")"
+    ScaleY(y) -> "scaleY(" <> float.to_string(y) <> ")"
+    Rotate(ang) -> "rotate(" <> angle.to_string(ang) <> ")"
+    Skew(x, option.None) ->
+      "translate(" <> string.join([angle.to_string(x), "0"], ",") <> ")"
+    Skew(x, option.Some(y)) ->
+      "translate("
+      <> string.join([angle.to_string(x), angle.to_string(y)], ",")
+      <> ")"
+    SkewX(x) -> "skewX(" <> angle.to_string(x) <> ")"
+    SkewY(y) -> "skewY(" <> angle.to_string(y) <> ")"
+  }
+}
+
+pub fn translate(x: Size, y: Option(Size)) {
+  Translate(x, y)
+}
+
+pub fn translate_x(x: Size) {
+  TranslateX(x)
+}
+
+pub fn translate_y(y: Size) {
+  TranslateY(y)
+}
+
+pub fn scale(x: Float, y: Option(Float)) {
+  Scale(x, y)
+}
+
+pub fn scale_x(x: Float) {
+  ScaleX(x)
+}
+
+pub fn scale_y(y: Float) {
+  ScaleY(y)
+}
+
+pub fn skew(x: Angle, y: Option(Angle)) {
+  Skew(x, y)
+}
+
+pub fn skew_x(x: Angle) {
+  SkewX(x)
+}
+
+pub fn skew_y(x: Angle) {
+  SkewY(x)
+}
+
+pub fn to_string(value: Transform) {
+  let content = case value {
+    None -> "none"
+    TransformList(transform_list) ->
+      list.map(transform_list, transform_function_to_string) |> string.join(" ")
+  }
+
+  "transform: " <> content
+}

From f666922559c0ed56ab04f9bcd124f713fc3d9523 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 22:06:02 -0300
Subject: [PATCH 03/12] refactor: change translate() and scale() api

---
 sketch/src/sketch/transform.gleam | 47 +++++++++++++++----------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index 787d198..d464ef1 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -11,56 +11,45 @@ pub opaque type Transform {
 }
 
 pub opaque type TransformFunction {
-  Translate(Size, Option(Size))
+  Translate(Size, Size)
   TranslateX(Size)
   TranslateY(Size)
-  Scale(Float, Option(Float))
+  Scale(Float, Float)
   ScaleX(Float)
   ScaleY(Float)
   Rotate(Angle)
-  Skew(Angle, Option(Angle))
   SkewX(Angle)
   SkewY(Angle)
 }
 
 fn transform_function_to_string(value: TransformFunction) {
   case value {
-    Translate(x, option.None) ->
-      "translate("
-      <> string.join([size.to_string(x), size.to_string(x)], ",")
-      <> ")"
-    Translate(x, option.Some(y)) ->
+    Translate(x, y) ->
       "translate("
       <> string.join([size.to_string(x), size.to_string(y)], ",")
       <> ")"
     TranslateX(x) -> "translateX(" <> size.to_string(x) <> ")"
     TranslateY(y) -> "translateY(" <> size.to_string(y) <> ")"
-    Scale(x, option.None) ->
-      "scale("
-      <> string.join([float.to_string(x), float.to_string(x)], ",")
-      <> ")"
-    Scale(x, option.Some(y)) ->
+    Scale(x, y) ->
       "scale("
       <> string.join([float.to_string(x), float.to_string(y)], ",")
       <> ")"
     ScaleX(x) -> "scaleX(" <> float.to_string(x) <> ")"
     ScaleY(y) -> "scaleY(" <> float.to_string(y) <> ")"
     Rotate(ang) -> "rotate(" <> angle.to_string(ang) <> ")"
-    Skew(x, option.None) ->
-      "translate(" <> string.join([angle.to_string(x), "0"], ",") <> ")"
-    Skew(x, option.Some(y)) ->
-      "translate("
-      <> string.join([angle.to_string(x), angle.to_string(y)], ",")
-      <> ")"
     SkewX(x) -> "skewX(" <> angle.to_string(x) <> ")"
     SkewY(y) -> "skewY(" <> angle.to_string(y) <> ")"
   }
 }
 
-pub fn translate(x: Size, y: Option(Size)) {
+pub fn translate2(x: Size, y: Size) {
   Translate(x, y)
 }
 
+pub fn translate(x: Size) {
+  translate2(x, size.percent(0))
+}
+
 pub fn translate_x(x: Size) {
   TranslateX(x)
 }
@@ -69,10 +58,14 @@ pub fn translate_y(y: Size) {
   TranslateY(y)
 }
 
-pub fn scale(x: Float, y: Option(Float)) {
+pub fn scale2(x: Float, y: Float) {
   Scale(x, y)
 }
 
+pub fn scale(x: Float, ) {
+  Scale(x, x)
+}
+
 pub fn scale_x(x: Float) {
   ScaleX(x)
 }
@@ -81,10 +74,6 @@ pub fn scale_y(y: Float) {
   ScaleY(y)
 }
 
-pub fn skew(x: Angle, y: Option(Angle)) {
-  Skew(x, y)
-}
-
 pub fn skew_x(x: Angle) {
   SkewX(x)
 }
@@ -93,6 +82,14 @@ pub fn skew_y(x: Angle) {
   SkewY(x)
 }
 
+pub fn none() {
+	None
+}
+
+pub fn list(values: List(TransformFunction)) {
+  TransformList(values)
+}
+
 pub fn to_string(value: Transform) {
   let content = case value {
     None -> "none"

From 3e3d44e09a11f11caa06d6165381d73f727cc322 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 23:37:51 -0300
Subject: [PATCH 04/12] feat: add rotate function

---
 sketch/src/sketch/transform.gleam | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index d464ef1..11562f4 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -74,6 +74,10 @@ pub fn scale_y(y: Float) {
   ScaleY(y)
 }
 
+pub fn rotate(value: Angle) {
+	Rotate(value)
+}
+
 pub fn skew_x(x: Angle) {
   SkewX(x)
 }

From 912376b31c2dbfb973c6f84e0b9ad2e151e9bdba Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 23:39:04 -0300
Subject: [PATCH 05/12] doc: add documentation of translate2 and rotate2

---
 sketch/src/sketch/transform.gleam | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index 11562f4..bc88840 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -46,6 +46,7 @@ pub fn translate2(x: Size, y: Size) {
   Translate(x, y)
 }
 
+/// translate(x) is translate2(x, size.percent(0))
 pub fn translate(x: Size) {
   translate2(x, size.percent(0))
 }
@@ -62,8 +63,9 @@ pub fn scale2(x: Float, y: Float) {
   Scale(x, y)
 }
 
-pub fn scale(x: Float, ) {
-  Scale(x, x)
+/// scale(x) is scale2(x, x)
+pub fn scale(x: Float) {
+  scale2(x, x)
 }
 
 pub fn scale_x(x: Float) {

From 276dbf7600f8ded92dd783306719be573c61dc11 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 23:39:13 -0300
Subject: [PATCH 06/12] chore: run formatter

---
 sketch/src/sketch/transform.gleam | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index bc88840..73b4470 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -77,7 +77,7 @@ pub fn scale_y(y: Float) {
 }
 
 pub fn rotate(value: Angle) {
-	Rotate(value)
+  Rotate(value)
 }
 
 pub fn skew_x(x: Angle) {
@@ -89,7 +89,7 @@ pub fn skew_y(x: Angle) {
 }
 
 pub fn none() {
-	None
+  None
 }
 
 pub fn list(values: List(TransformFunction)) {

From 95078c9addffa58cb15acc43817e6fd57484c5a3 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 23:39:25 -0300
Subject: [PATCH 07/12] test: add transform api tests

---
 sketch/test/transform_test.gleam | 105 +++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 sketch/test/transform_test.gleam

diff --git a/sketch/test/transform_test.gleam b/sketch/test/transform_test.gleam
new file mode 100644
index 0000000..1b6b5eb
--- /dev/null
+++ b/sketch/test/transform_test.gleam
@@ -0,0 +1,105 @@
+import gleeunit/should
+import sketch/angle
+import sketch/size
+import sketch/transform
+
+pub fn translate_test() {
+  [transform.translate(size.px(10))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: translate(10.0px,0.0%)")
+}
+
+pub fn translate2_test() {
+  [transform.translate2(size.px(10), size.rem(3.0))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: translate(10.0px,3.0rem)")
+}
+
+pub fn translate_x() {
+  [transform.translate_x(size.px(10))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: translateX(10px)")
+}
+
+pub fn translate_y() {
+  [transform.translate_y(size.px(10))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: translateY(10px)")
+}
+
+pub fn scale2_test() {
+  [transform.scale2(10.0, 10.0)]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: scale(10.0,10.0)")
+}
+
+pub fn scale_test() {
+  [transform.scale(10.0)]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: scale(10.0,10.0)")
+}
+
+pub fn scale_x_test() {
+  [transform.scale_x(10.0)]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: scaleX(10.0)")
+}
+
+pub fn scale_y_test() {
+  [transform.scale_y(10.0)]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: scaleY(10.0)")
+}
+
+pub fn rotate_test() {
+  [transform.rotate(angle.rad(2.0))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: rotate(2.0rad)")
+}
+
+pub fn skew_x() {
+  [transform.skew_x(angle.rad(2.0))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: skewX(2.0rad)")
+}
+
+pub fn skew_y() {
+  [transform.skew_y(angle.rad(2.0))]
+  |> transform.list
+  |> transform.to_string
+  |> should.equal("transform: skewY(2.0rad)")
+}
+
+pub fn translate_equiv_test() {
+  let current =
+    [transform.translate(size.px(10))] |> transform.list |> transform.to_string
+  let expected =
+    [transform.translate2(size.px(10), size.percent(0))]
+    |> transform.list
+    |> transform.to_string
+
+  should.equal(current, expected)
+}
+
+pub fn scale_equiv_test() {
+  let current = [transform.scale(10.0)] |> transform.list |> transform.to_string
+  let expected =
+    [transform.scale2(10.0, 10.0)] |> transform.list |> transform.to_string
+
+  should.equal(current, expected)
+}
+
+pub fn transform_none_test() {
+  transform.to_string(transform.none())
+  |> should.equal("transform: none")
+}

From ddefd4d7cc190a9785c62d700b708d97b24acc3c Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 6 Aug 2024 23:50:29 -0300
Subject: [PATCH 08/12] rever sketch.ml

---
 sketch/src/sketch.gleam | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/sketch/src/sketch.gleam b/sketch/src/sketch.gleam
index 0425547..1239ef8 100644
--- a/sketch/src/sketch.gleam
+++ b/sketch/src/sketch.gleam
@@ -11,7 +11,6 @@ import sketch/internals/cache/setup as cache
 import sketch/internals/style
 import sketch/media.{type Query}
 import sketch/size.{type Size}
-import sketch/transform.{type Transform}
 
 // Types
 
@@ -1984,8 +1983,8 @@ pub fn touch_action(value: String) {
   property("touch-action", value)
 }
 
-pub fn transform(transform: Transform) {
-  property("transform", transform.to_string(transform))
+pub fn transform(transform: String) {
+  property("transform", transform)
 }
 
 pub fn transform_box(transform_box: String) {

From 970f490e8d129cdf21e1e6e91aad05fda91ec699 Mon Sep 17 00:00:00 2001
From: Jose Eduardo Monteiro <mds.josee@gmail.com>
Date: Tue, 13 Aug 2024 15:15:56 -0300
Subject: [PATCH 09/12] refactor: change transform API to List(Transform)

transform.to_string([]) is now None, the None constructor doesn't exists
the only way to construct none is with transform.to_string([]).

Besides that, Transform type represents the TransformFunction
type of CSS WG spec
---
 sketch/src/sketch/transform.gleam | 28 +++++++---------------------
 sketch/test/transform_test.gleam  | 22 ++++------------------
 2 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index 73b4470..2acc45b 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -1,16 +1,10 @@
 import gleam/float
 import gleam/list
-import gleam/option.{type Option}
 import gleam/string
 import sketch/angle.{type Angle}
 import sketch/size.{type Size}
 
 pub opaque type Transform {
-  None
-  TransformList(List(TransformFunction))
-}
-
-pub opaque type TransformFunction {
   Translate(Size, Size)
   TranslateX(Size)
   TranslateY(Size)
@@ -22,7 +16,7 @@ pub opaque type TransformFunction {
   SkewY(Angle)
 }
 
-fn transform_function_to_string(value: TransformFunction) {
+fn transform_to_string(value: Transform) {
   case value {
     Translate(x, y) ->
       "translate("
@@ -46,7 +40,7 @@ pub fn translate2(x: Size, y: Size) {
   Translate(x, y)
 }
 
-/// translate(x) is translate2(x, size.percent(0))
+/// `translate(x)` is `translate2(x, size.percent(0))`
 pub fn translate(x: Size) {
   translate2(x, size.percent(0))
 }
@@ -63,7 +57,7 @@ pub fn scale2(x: Float, y: Float) {
   Scale(x, y)
 }
 
-/// scale(x) is scale2(x, x)
+/// `scale(x)` is `scale2(x, x)`
 pub fn scale(x: Float) {
   scale2(x, x)
 }
@@ -88,19 +82,11 @@ pub fn skew_y(x: Angle) {
   SkewY(x)
 }
 
-pub fn none() {
-  None
-}
-
-pub fn list(values: List(TransformFunction)) {
-  TransformList(values)
-}
-
-pub fn to_string(value: Transform) {
+pub fn to_string(value: List(Transform)) {
   let content = case value {
-    None -> "none"
-    TransformList(transform_list) ->
-      list.map(transform_list, transform_function_to_string) |> string.join(" ")
+    [] -> "none"
+    transform_list ->
+      list.map(transform_list, transform_to_string) |> string.join(" ")
   }
 
   "transform: " <> content
diff --git a/sketch/test/transform_test.gleam b/sketch/test/transform_test.gleam
index 1b6b5eb..982ce47 100644
--- a/sketch/test/transform_test.gleam
+++ b/sketch/test/transform_test.gleam
@@ -5,101 +5,87 @@ import sketch/transform
 
 pub fn translate_test() {
   [transform.translate(size.px(10))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: translate(10.0px,0.0%)")
 }
 
 pub fn translate2_test() {
   [transform.translate2(size.px(10), size.rem(3.0))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: translate(10.0px,3.0rem)")
 }
 
 pub fn translate_x() {
   [transform.translate_x(size.px(10))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: translateX(10px)")
 }
 
 pub fn translate_y() {
   [transform.translate_y(size.px(10))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: translateY(10px)")
 }
 
 pub fn scale2_test() {
   [transform.scale2(10.0, 10.0)]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: scale(10.0,10.0)")
 }
 
 pub fn scale_test() {
   [transform.scale(10.0)]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: scale(10.0,10.0)")
 }
 
 pub fn scale_x_test() {
   [transform.scale_x(10.0)]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: scaleX(10.0)")
 }
 
 pub fn scale_y_test() {
   [transform.scale_y(10.0)]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: scaleY(10.0)")
 }
 
 pub fn rotate_test() {
   [transform.rotate(angle.rad(2.0))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: rotate(2.0rad)")
 }
 
 pub fn skew_x() {
   [transform.skew_x(angle.rad(2.0))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: skewX(2.0rad)")
 }
 
 pub fn skew_y() {
   [transform.skew_y(angle.rad(2.0))]
-  |> transform.list
   |> transform.to_string
   |> should.equal("transform: skewY(2.0rad)")
 }
 
 pub fn translate_equiv_test() {
-  let current =
-    [transform.translate(size.px(10))] |> transform.list |> transform.to_string
+  let current = [transform.translate(size.px(10))] |> transform.to_string
   let expected =
     [transform.translate2(size.px(10), size.percent(0))]
-    |> transform.list
     |> transform.to_string
 
   should.equal(current, expected)
 }
 
 pub fn scale_equiv_test() {
-  let current = [transform.scale(10.0)] |> transform.list |> transform.to_string
-  let expected =
-    [transform.scale2(10.0, 10.0)] |> transform.list |> transform.to_string
+  let current = [transform.scale(10.0)] |> transform.to_string
+  let expected = [transform.scale2(10.0, 10.0)] |> transform.to_string
 
   should.equal(current, expected)
 }
 
 pub fn transform_none_test() {
-  transform.to_string(transform.none())
+  transform.to_string([])
   |> should.equal("transform: none")
 }

From eaa992b0b414b4ea7b2a9df279840d1f78ff0c01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Eduardo=20Monteiro?= <mds.josee@gmail.com>
Date: Sun, 1 Sep 2024 22:12:24 -0300
Subject: [PATCH 10/12] feat: add `transform_` to sketch.gleam

---
 sketch/src/sketch.gleam | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/sketch/src/sketch.gleam b/sketch/src/sketch.gleam
index 1239ef8..aa3d865 100644
--- a/sketch/src/sketch.gleam
+++ b/sketch/src/sketch.gleam
@@ -11,6 +11,7 @@ import sketch/internals/cache/setup as cache
 import sketch/internals/style
 import sketch/media.{type Query}
 import sketch/size.{type Size}
+import sketch/transform.{type Transform}
 
 // Types
 
@@ -1983,10 +1984,17 @@ pub fn touch_action(value: String) {
   property("touch-action", value)
 }
 
+/// `transform` will be turned into `transform_` in 4.0.0
 pub fn transform(transform: String) {
   property("transform", transform)
 }
 
+/// `transform_` uses `sketch.transform` to offer an enhanced API for CSS transforms
+pub fn transform_(transform_args: List(Transform)) {
+  let transform_string = transform.to_string(transform_args)
+  property("transform", transform_string)
+}
+
 pub fn transform_box(transform_box: String) {
   property("transform-box", transform_box)
 }

From 9c0bdfa4aa797028bdaafa6f1e5b4f7ede7bf7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Eduardo=20Monteiro?= <mds.josee@gmail.com>
Date: Mon, 2 Sep 2024 17:02:04 -0300
Subject: [PATCH 11/12] fix: exclude property name from
 sketch.transform.to_string

---
 sketch/src/sketch/transform.gleam | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/sketch/src/sketch/transform.gleam b/sketch/src/sketch/transform.gleam
index 2acc45b..0af8bd6 100644
--- a/sketch/src/sketch/transform.gleam
+++ b/sketch/src/sketch/transform.gleam
@@ -83,11 +83,9 @@ pub fn skew_y(x: Angle) {
 }
 
 pub fn to_string(value: List(Transform)) {
-  let content = case value {
+  case value {
     [] -> "none"
     transform_list ->
       list.map(transform_list, transform_to_string) |> string.join(" ")
   }
-
-  "transform: " <> content
 }

From 646d3be1c411af6d79b100807d7d52e2e2b453ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Eduardo=20Monteiro?= <mds.josee@gmail.com>
Date: Mon, 2 Sep 2024 21:40:18 -0300
Subject: [PATCH 12/12] fix: sketch.transform tests

---
 sketch/test/transform_test.gleam | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/sketch/test/transform_test.gleam b/sketch/test/transform_test.gleam
index 982ce47..bdeeea5 100644
--- a/sketch/test/transform_test.gleam
+++ b/sketch/test/transform_test.gleam
@@ -6,67 +6,67 @@ import sketch/transform
 pub fn translate_test() {
   [transform.translate(size.px(10))]
   |> transform.to_string
-  |> should.equal("transform: translate(10.0px,0.0%)")
+  |> should.equal("translate(10.0px,0.0%)")
 }
 
 pub fn translate2_test() {
   [transform.translate2(size.px(10), size.rem(3.0))]
   |> transform.to_string
-  |> should.equal("transform: translate(10.0px,3.0rem)")
+  |> should.equal("translate(10.0px,3.0rem)")
 }
 
 pub fn translate_x() {
   [transform.translate_x(size.px(10))]
   |> transform.to_string
-  |> should.equal("transform: translateX(10px)")
+  |> should.equal("translateX(10px)")
 }
 
 pub fn translate_y() {
   [transform.translate_y(size.px(10))]
   |> transform.to_string
-  |> should.equal("transform: translateY(10px)")
+  |> should.equal("translateY(10px)")
 }
 
 pub fn scale2_test() {
   [transform.scale2(10.0, 10.0)]
   |> transform.to_string
-  |> should.equal("transform: scale(10.0,10.0)")
+  |> should.equal("scale(10.0,10.0)")
 }
 
 pub fn scale_test() {
   [transform.scale(10.0)]
   |> transform.to_string
-  |> should.equal("transform: scale(10.0,10.0)")
+  |> should.equal("scale(10.0,10.0)")
 }
 
 pub fn scale_x_test() {
   [transform.scale_x(10.0)]
   |> transform.to_string
-  |> should.equal("transform: scaleX(10.0)")
+  |> should.equal("scaleX(10.0)")
 }
 
 pub fn scale_y_test() {
   [transform.scale_y(10.0)]
   |> transform.to_string
-  |> should.equal("transform: scaleY(10.0)")
+  |> should.equal("scaleY(10.0)")
 }
 
 pub fn rotate_test() {
   [transform.rotate(angle.rad(2.0))]
   |> transform.to_string
-  |> should.equal("transform: rotate(2.0rad)")
+  |> should.equal("rotate(2.0rad)")
 }
 
 pub fn skew_x() {
   [transform.skew_x(angle.rad(2.0))]
   |> transform.to_string
-  |> should.equal("transform: skewX(2.0rad)")
+  |> should.equal("skewX(2.0rad)")
 }
 
 pub fn skew_y() {
   [transform.skew_y(angle.rad(2.0))]
   |> transform.to_string
-  |> should.equal("transform: skewY(2.0rad)")
+  |> should.equal("skewY(2.0rad)")
 }
 
 pub fn translate_equiv_test() {
@@ -87,5 +87,5 @@ pub fn scale_equiv_test() {
 
 pub fn transform_none_test() {
   transform.to_string([])
-  |> should.equal("transform: none")
+  |> should.equal("none")
 }