diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ad927f1..2818c17 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: '26.0.2'
+          otp-version: '27.0.1'
           gleam-version: '1.6.3'
           rebar3-version: '3'
           # elixir-version: "1.15.4"
@@ -33,7 +33,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: '26.0.2'
+          otp-version: '27.0.1'
           gleam-version: '1.6.3'
           rebar3-version: '3'
           # elixir-version: "1.15.4"
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: '26.0.2'
+          otp-version: '27.0.1'
           gleam-version: '1.6.3'
           rebar3-version: '3'
           # elixir-version: "1.15.4"
@@ -71,7 +71,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: '26.0.2'
+          otp-version: '27.0.1'
           gleam-version: '1.6.3'
           rebar3-version: '3'
           # elixir-version: "1.15.4"
@@ -90,7 +90,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: '26.0.2'
+          otp-version: '27.0.1'
           gleam-version: '1.6.3'
           rebar3-version: '3'
           # elixir-version: "1.15.4"
diff --git a/sketch/birdie_snapshots/erlang_aliased_css.accepted b/sketch/birdie_snapshots/erlang_aliased_css.accepted
new file mode 100644
index 0000000..3e85319
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_aliased_css.accepted
@@ -0,0 +1,7 @@
+---
+version: 1.2.5
+title: erlang_aliased_css
+---
+.css-79177302 {
+  background: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_dimensions_css.accepted b/sketch/birdie_snapshots/erlang_dimensions_css.accepted
new file mode 100644
index 0000000..0db0ba4
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_dimensions_css.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: erlang_dimensions_css
+---
+.css-103944017 {
+  padding: 12.0px;
+  margin: 12.0px;
+  transform: rotate(1.0rad) skew(1.0deg, 2.0deg);
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_edges_css.accepted b/sketch/birdie_snapshots/erlang_edges_css.accepted
new file mode 100644
index 0000000..5b467dc
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_edges_css.accepted
@@ -0,0 +1,10 @@
+---
+version: 1.2.5
+title: erlang_edges_css
+---
+.css-117692592 {
+  grid-template-areas: "header"
+"main";
+  --example-property: example-value;
+  color: blue;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_exposed_css.accepted b/sketch/birdie_snapshots/erlang_exposed_css.accepted
new file mode 100644
index 0000000..63ce6ae
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_exposed_css.accepted
@@ -0,0 +1,8 @@
+---
+version: 1.2.5
+title: erlang_exposed_css
+---
+.css-132390646 {
+  background: red;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_exposed_property.accepted b/sketch/birdie_snapshots/erlang_exposed_property.accepted
new file mode 100644
index 0000000..3f11b51
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_exposed_property.accepted
@@ -0,0 +1,8 @@
+---
+version: 1.2.5
+title: erlang_exposed_property
+---
+.css-132390646 {
+  background: red;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_function_css.accepted b/sketch/birdie_snapshots/erlang_function_css.accepted
new file mode 100644
index 0000000..21b94a6
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_function_css.accepted
@@ -0,0 +1,11 @@
+---
+version: 1.2.5
+title: erlang_function_css
+---
+.css-74331814 {
+  background: #ddd;
+  background: red;
+  display: block;
+  color: red;
+  background: green;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_function_property.accepted b/sketch/birdie_snapshots/erlang_function_property.accepted
new file mode 100644
index 0000000..875fe38
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_function_property.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: erlang_function_property
+---
+.css-19844900 {
+  width: 12px;
+  color: blue;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_important_css.accepted b/sketch/birdie_snapshots/erlang_important_css.accepted
new file mode 100644
index 0000000..38e6293
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_important_css.accepted
@@ -0,0 +1,11 @@
+---
+version: 1.2.5
+title: erlang_important_css
+---
+.css-111332210 {
+  background: red;
+  color: red;
+  padding: 12.0px;
+  color: blue;
+  background: #ccc !important;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_medias_and.accepted b/sketch/birdie_snapshots/erlang_medias_and.accepted
new file mode 100644
index 0000000..9d45f61
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_medias_and.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: erlang_medias_and
+---
+.css-112994211 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) and (min-width: 600.0px) {
+  .css-112994211 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_medias_and_or.accepted b/sketch/birdie_snapshots/erlang_medias_and_or.accepted
new file mode 100644
index 0000000..e2173b8
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_medias_and_or.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: erlang_medias_and_or
+---
+.css-123977435 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) and (min-width: 700.0px) or (min-width: 600.0px) {
+  .css-123977435 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_medias_or.accepted b/sketch/birdie_snapshots/erlang_medias_or.accepted
new file mode 100644
index 0000000..fd17837
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_medias_or.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: erlang_medias_or
+---
+.css-18913567 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) or (min-width: 600.0px) {
+  .css-18913567 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_medias_pseudo_class.accepted b/sketch/birdie_snapshots/erlang_medias_pseudo_class.accepted
new file mode 100644
index 0000000..39d8fe0
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_medias_pseudo_class.accepted
@@ -0,0 +1,17 @@
+---
+version: 1.2.5
+title: erlang_medias_pseudo_class
+---
+.css-67993257 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) {
+  .css-67993257 {
+    background: red;
+    background: blue;
+  }
+  .css-67993257:hover {
+      background: green;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_medias_simple.accepted b/sketch/birdie_snapshots/erlang_medias_simple.accepted
new file mode 100644
index 0000000..bce4ae6
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_medias_simple.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: erlang_medias_simple
+---
+.css-22725631 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) {
+  .css-22725631 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_nestings_css.accepted b/sketch/birdie_snapshots/erlang_nestings_css.accepted
new file mode 100644
index 0000000..2edbae9
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_nestings_css.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: erlang_nestings_css
+---
+.css-14492986 {
+  color: blue;
+  background: green;
+  padding: 12.0px;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_nestings_example.accepted b/sketch/birdie_snapshots/erlang_nestings_example.accepted
new file mode 100644
index 0000000..f1217f0
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_nestings_example.accepted
@@ -0,0 +1,37 @@
+---
+version: 1.2.5
+title: erlang_nestings_example
+---
+.css-92776350 {
+}
+
+.css-92776350 > .css-14492986 {
+    background: red;
+}
+
+.css-92776350 > .css-14492986:hover {
+      background: blue;
+}
+
+@media (max-width: 700.0px) or (min-width: 400.0px) {
+  .css-92776350 {
+    background: blue;
+  }
+  .css-92776350:hover {
+      background: red;
+  }
+  .css-92776350:hover {
+  }
+  .css-92776350:hover > .css-14492986 {
+        background: blue;
+  }
+  .css-92776350:hover > .css-14492986:hover {
+          background: red;
+  }
+}
+
+.css-14492986 {
+  color: blue;
+  background: green;
+  padding: 12.0px;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/erlang_variable_css.accepted b/sketch/birdie_snapshots/erlang_variable_css.accepted
new file mode 100644
index 0000000..6bebdab
--- /dev/null
+++ b/sketch/birdie_snapshots/erlang_variable_css.accepted
@@ -0,0 +1,7 @@
+---
+version: 1.2.5
+title: erlang_variable_css
+---
+.css-79177302 {
+  background: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_aliased_css.accepted b/sketch/birdie_snapshots/js_aliased_css.accepted
new file mode 100644
index 0000000..ff7ba74
--- /dev/null
+++ b/sketch/birdie_snapshots/js_aliased_css.accepted
@@ -0,0 +1,7 @@
+---
+version: 1.2.5
+title: js_aliased_css
+---
+.css-2610672850 {
+  background: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_dimensions_css.accepted b/sketch/birdie_snapshots/js_dimensions_css.accepted
new file mode 100644
index 0000000..a1cbd36
--- /dev/null
+++ b/sketch/birdie_snapshots/js_dimensions_css.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: js_dimensions_css
+---
+.css-1813474272 {
+  padding: 12.0px;
+  margin: 12.0px;
+  transform: rotate(1.0rad) skew(1.0deg, 2.0deg);
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_edges_css.accepted b/sketch/birdie_snapshots/js_edges_css.accepted
new file mode 100644
index 0000000..4eba330
--- /dev/null
+++ b/sketch/birdie_snapshots/js_edges_css.accepted
@@ -0,0 +1,10 @@
+---
+version: 1.2.5
+title: js_edges_css
+---
+.css-154188189 {
+  grid-template-areas: "header"
+"main";
+  --example-property: example-value;
+  color: blue;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_exposed_css.accepted b/sketch/birdie_snapshots/js_exposed_css.accepted
new file mode 100644
index 0000000..1c3a2bc
--- /dev/null
+++ b/sketch/birdie_snapshots/js_exposed_css.accepted
@@ -0,0 +1,8 @@
+---
+version: 1.2.5
+title: js_exposed_css
+---
+.css-63449814 {
+  background: red;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_exposed_property.accepted b/sketch/birdie_snapshots/js_exposed_property.accepted
new file mode 100644
index 0000000..d9bad79
--- /dev/null
+++ b/sketch/birdie_snapshots/js_exposed_property.accepted
@@ -0,0 +1,8 @@
+---
+version: 1.2.5
+title: js_exposed_property
+---
+.css-63449814 {
+  background: red;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_function_css.accepted b/sketch/birdie_snapshots/js_function_css.accepted
new file mode 100644
index 0000000..c45518c
--- /dev/null
+++ b/sketch/birdie_snapshots/js_function_css.accepted
@@ -0,0 +1,11 @@
+---
+version: 1.2.5
+title: js_function_css
+---
+.css-156994572 {
+  background: #ddd;
+  background: red;
+  display: block;
+  color: red;
+  background: green;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_function_property.accepted b/sketch/birdie_snapshots/js_function_property.accepted
new file mode 100644
index 0000000..19edb64
--- /dev/null
+++ b/sketch/birdie_snapshots/js_function_property.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: js_function_property
+---
+.css-2428701155 {
+  width: 12px;
+  color: blue;
+  color: red;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_important_css.accepted b/sketch/birdie_snapshots/js_important_css.accepted
new file mode 100644
index 0000000..46901c8
--- /dev/null
+++ b/sketch/birdie_snapshots/js_important_css.accepted
@@ -0,0 +1,11 @@
+---
+version: 1.2.5
+title: js_important_css
+---
+.css-3033083850 {
+  background: red;
+  color: red;
+  padding: 12.0px;
+  color: blue;
+  background: #ccc !important;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_medias_and.accepted b/sketch/birdie_snapshots/js_medias_and.accepted
new file mode 100644
index 0000000..7064dc4
--- /dev/null
+++ b/sketch/birdie_snapshots/js_medias_and.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: js_medias_and
+---
+.css-760505246 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) and (min-width: 600.0px) {
+  .css-760505246 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_medias_and_or.accepted b/sketch/birdie_snapshots/js_medias_and_or.accepted
new file mode 100644
index 0000000..8a8035f
--- /dev/null
+++ b/sketch/birdie_snapshots/js_medias_and_or.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: js_medias_and_or
+---
+.css-1353033444 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) and (min-width: 700.0px) or (min-width: 600.0px) {
+  .css-1353033444 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_medias_or.accepted b/sketch/birdie_snapshots/js_medias_or.accepted
new file mode 100644
index 0000000..7293785
--- /dev/null
+++ b/sketch/birdie_snapshots/js_medias_or.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: js_medias_or
+---
+.css-952026283 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) or (min-width: 600.0px) {
+  .css-952026283 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_medias_pseudo_class.accepted b/sketch/birdie_snapshots/js_medias_pseudo_class.accepted
new file mode 100644
index 0000000..9e54b16
--- /dev/null
+++ b/sketch/birdie_snapshots/js_medias_pseudo_class.accepted
@@ -0,0 +1,17 @@
+---
+version: 1.2.5
+title: js_medias_pseudo_class
+---
+.css-1547556747 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) {
+  .css-1547556747 {
+    background: red;
+    background: blue;
+  }
+  .css-1547556747:hover {
+      background: green;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_medias_simple.accepted b/sketch/birdie_snapshots/js_medias_simple.accepted
new file mode 100644
index 0000000..90b81e3
--- /dev/null
+++ b/sketch/birdie_snapshots/js_medias_simple.accepted
@@ -0,0 +1,14 @@
+---
+version: 1.2.5
+title: js_medias_simple
+---
+.css-1009080651 {
+  background: blue;
+}
+
+@media (max-width: 700.0px) {
+  .css-1009080651 {
+    background: red;
+    background: blue;
+  }
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_nestings_css.accepted b/sketch/birdie_snapshots/js_nestings_css.accepted
new file mode 100644
index 0000000..18b31a2
--- /dev/null
+++ b/sketch/birdie_snapshots/js_nestings_css.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: js_nestings_css
+---
+.css-983729220 {
+  color: blue;
+  background: green;
+  padding: 12.0px;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_nestings_example.accepted b/sketch/birdie_snapshots/js_nestings_example.accepted
new file mode 100644
index 0000000..f1143a9
--- /dev/null
+++ b/sketch/birdie_snapshots/js_nestings_example.accepted
@@ -0,0 +1,37 @@
+---
+version: 1.2.5
+title: js_nestings_example
+---
+.css-3291053774 {
+}
+
+.css-3291053774 > .css-983729220 {
+    background: red;
+}
+
+.css-3291053774 > .css-983729220:hover {
+      background: blue;
+}
+
+@media (max-width: 700.0px) or (min-width: 400.0px) {
+  .css-3291053774 {
+    background: blue;
+  }
+  .css-3291053774:hover {
+      background: red;
+  }
+  .css-3291053774:hover {
+  }
+  .css-3291053774:hover > .css-983729220 {
+        background: blue;
+  }
+  .css-3291053774:hover > .css-983729220:hover {
+          background: red;
+  }
+}
+
+.css-983729220 {
+  color: blue;
+  background: green;
+  padding: 12.0px;
+}
\ No newline at end of file
diff --git a/sketch/birdie_snapshots/js_variable_css.accepted b/sketch/birdie_snapshots/js_variable_css.accepted
new file mode 100644
index 0000000..9bf101b
--- /dev/null
+++ b/sketch/birdie_snapshots/js_variable_css.accepted
@@ -0,0 +1,7 @@
+---
+version: 1.2.5
+title: js_variable_css
+---
+.css-2610672850 {
+  background: red;
+}
\ No newline at end of file
diff --git a/sketch/test/classes/aliased_css.gleam b/sketch/test/classes/aliased_css.gleam
new file mode 100644
index 0000000..65b78ab
--- /dev/null
+++ b/sketch/test/classes/aliased_css.gleam
@@ -0,0 +1,6 @@
+import sketch/css as s
+
+pub fn aliased_module() {
+  // Aliased property, should be rewrote.
+  s.class([s.background("red")])
+}
diff --git a/sketch/test/classes/dimensions_css.gleam b/sketch/test/classes/dimensions_css.gleam
new file mode 100644
index 0000000..fccdd66
--- /dev/null
+++ b/sketch/test/classes/dimensions_css.gleam
@@ -0,0 +1,16 @@
+import sketch/css
+import sketch/css/angle.{deg}
+import sketch/css/length.{px}
+import sketch/css/transform
+
+/// Multiple dimensions, with exposings or not.
+pub fn dimensions_variables() {
+  css.class([
+    css.padding(px(12)),
+    css.margin(length.px(12)),
+    css.transform([
+      transform.rotate(angle.rad(1.0)),
+      transform.skew(deg(1.0), deg(2.0)),
+    ]),
+  ])
+}
diff --git a/sketch_css/test/classes/egdes_css.gleam b/sketch/test/classes/edges_css.gleam
similarity index 100%
rename from sketch_css/test/classes/egdes_css.gleam
rename to sketch/test/classes/edges_css.gleam
diff --git a/sketch/test/classes/exposed_css.gleam b/sketch/test/classes/exposed_css.gleam
new file mode 100644
index 0000000..cf6797e
--- /dev/null
+++ b/sketch/test/classes/exposed_css.gleam
@@ -0,0 +1,14 @@
+import sketch/css.{background, class as class_}
+
+pub fn exposed_property() {
+  css.class([
+    // Exposed property, should be rewritten correctly.
+    background("red"),
+    css.color("red"),
+  ])
+}
+
+pub fn exposed_class() {
+  // Exposed class, should be rewritten correctly.
+  class_([background("red"), css.color("red")])
+}
diff --git a/sketch/test/classes/function_css.gleam b/sketch/test/classes/function_css.gleam
new file mode 100644
index 0000000..9854411
--- /dev/null
+++ b/sketch/test/classes/function_css.gleam
@@ -0,0 +1,20 @@
+import sketch/css
+import test_/constants
+import test_/helpers
+
+/// Constants in another file.
+pub fn property() {
+  css.class([
+    css.width_(constants.md),
+    css.color(constants.blue),
+    helpers.custom_color(constants.red),
+  ])
+}
+
+/// Class in another file.
+pub fn class() {
+  css.class([
+    css.compose(helpers.card_body(constants.red)),
+    css.background("green"),
+  ])
+}
diff --git a/sketch/test/classes/important_css.gleam b/sketch/test/classes/important_css.gleam
new file mode 100644
index 0000000..8492c1c
--- /dev/null
+++ b/sketch/test/classes/important_css.gleam
@@ -0,0 +1,18 @@
+import sketch/css
+import sketch/css/length
+
+pub fn important() {
+  css.class([
+    css.compose(content()),
+    css.color("blue"),
+    css.background("#ccc") |> css.important,
+  ])
+}
+
+fn content() {
+  css.class([
+    css.background("red"),
+    css.color("red"),
+    css.padding(length.px(12)),
+  ])
+}
diff --git a/sketch/test/classes/medias_css.gleam b/sketch/test/classes/medias_css.gleam
new file mode 100644
index 0000000..3932220
--- /dev/null
+++ b/sketch/test/classes/medias_css.gleam
@@ -0,0 +1,56 @@
+import sketch/css
+import sketch/css/length.{px}
+import sketch/css/media
+
+pub fn simple() {
+  css.class([
+    css.background("blue"),
+    css.media(media.max_width(px(700)), [
+      css.background("red"),
+      css.background("blue"),
+    ]),
+  ])
+}
+
+pub fn and() {
+  css.class([
+    css.background("blue"),
+    css.media(media.max_width(px(700)) |> media.and(media.min_width(px(600))), [
+      css.background("red"),
+      css.background("blue"),
+    ]),
+  ])
+}
+
+pub fn or() {
+  css.class([
+    css.background("blue"),
+    css.media(media.max_width(px(700)) |> media.or(media.min_width(px(600))), [
+      css.background("red"),
+      css.background("blue"),
+    ]),
+  ])
+}
+
+pub fn and_or() {
+  css.class([
+    css.background("blue"),
+    css.media(
+      media.max_width(px(700))
+        |> media.and(media.min_width(px(700)))
+        |> media.or(media.min_width(px(600))),
+      [css.background("red"), css.background("blue")],
+    ),
+  ])
+}
+
+pub fn pseudo_class() {
+  css.class([
+    css.background("blue"),
+    css.media(media.max_width(px(700)), [
+      css.background("red"),
+      css.background("blue"),
+      css.hover([css.background("green")]),
+    ]),
+  ])
+}
diff --git a/sketch/test/classes/nestings_css.gleam b/sketch/test/classes/nestings_css.gleam
new file mode 100644
index 0000000..9d7a709
--- /dev/null
+++ b/sketch/test/classes/nestings_css.gleam
@@ -0,0 +1,30 @@
+import sketch/css
+import sketch/css/length.{px}
+import sketch/css/media
+
+pub fn example(custom) {
+  css.class([
+    css.media(media.or(media.max_width(px(700)), media.min_width(px(400))), [
+      css.background("blue"),
+      css.hover([css.background("red")]),
+      css.hover([
+        css.child(content(custom), [
+          css.background("blue"),
+          css.hover([css.background("red")]),
+        ]),
+      ]),
+    ]),
+    css.child(content(custom), [
+      css.background("red"),
+      css.hover([css.background("blue")]),
+    ]),
+  ])
+}
+
+pub fn content(custom) {
+  css.class([
+    css.color(custom),
+    css.background("green"),
+    css.padding(length.px(12)),
+  ])
+}
diff --git a/sketch/test/classes/variable_css.gleam b/sketch/test/classes/variable_css.gleam
new file mode 100644
index 0000000..07f7818
--- /dev/null
+++ b/sketch/test/classes/variable_css.gleam
@@ -0,0 +1,9 @@
+import sketch/css
+
+pub fn variable_property() {
+  let red = "red"
+  css.class([
+    // Variable property, should be replaced.
+    css.background(red),
+  ])
+}
diff --git a/sketch/test/helpers.gleam b/sketch/test/helpers.gleam
deleted file mode 100644
index 7752197..0000000
--- a/sketch/test/helpers.gleam
+++ /dev/null
@@ -1,9 +0,0 @@
-@target(erlang)
-pub fn multitarget_title(title: String) {
-  "erlang_" <> title
-}
-
-@target(javascript)
-pub fn multitarget_title(title: String) {
-  "js_" <> title
-}
diff --git a/sketch/test/sketch_test.gleam b/sketch/test/sketch_test.gleam
index 5239645..31f32db 100644
--- a/sketch/test/sketch_test.gleam
+++ b/sketch/test/sketch_test.gleam
@@ -1,49 +1,75 @@
-import birdie
-import gleam/string
 import gleeunit
-import gleeunit/should
-import helpers
-import sketch
-import sketch/css
-import sketch/css/length
-import sketch/css/media
+import test_/helpers
+
+import classes/aliased_css
+import classes/dimensions_css
+import classes/edges_css
+import classes/exposed_css
+import classes/function_css
+import classes/important_css
+import classes/medias_css
+import classes/nestings_css
+import classes/variable_css
 
 pub fn main() {
   gleeunit.main()
 }
 
-pub fn css_test() {
-  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Ephemeral)
-  let #(stylesheet, class_name) = sketch.class_name(dummy_class(), stylesheet)
-  let content = sketch.render(stylesheet)
-  content |> string.contains(class_name) |> should.be_true
-  birdie.snap(title: helpers.multitarget_title("css_test"), content:)
-}
-
-fn dummy_class() {
-  css.class([
-    css.background("red"),
-    css.hover([
-      css.background("blue"),
-      css.child(button_class(), [
-        css.background("red"),
-        css.font_family("Verdana"),
-      ]),
-    ]),
-    css.child(button_class(), [
-      css.background("blue") |> css.important,
-      css.font_size(length.rem(2.0)),
-    ]),
-    css.media(media.max_width(length.px(700)), [css.background("yellow")]),
-  ])
-}
-
-fn button_class() {
-  css.class([
-    css.appearance("none"),
-    css.background("none"),
-    css.border("1px solid black"),
-    css.font_family("inherit"),
-    css.font_size_("inherit"),
-  ])
+pub fn aliased_test() {
+  aliased_css.aliased_module()
+  |> helpers.compute_class("aliased_css")
+}
+
+pub fn dimensions_test() {
+  dimensions_css.dimensions_variables()
+  |> helpers.compute_class("dimensions_css")
+}
+
+pub fn edges_test() {
+  edges_css.edge_cases("blue")
+  |> helpers.compute_class("edges_css")
+}
+
+pub fn exposed_test() {
+  exposed_css.exposed_class()
+  |> helpers.compute_class("exposed_css")
+  exposed_css.exposed_property()
+  |> helpers.compute_class("exposed_property")
+}
+
+pub fn function_test() {
+  function_css.class()
+  |> helpers.compute_class("function_css")
+  function_css.property()
+  |> helpers.compute_class("function_property")
+}
+
+pub fn important_test() {
+  important_css.important()
+  |> helpers.compute_class("important_css")
+}
+
+pub fn medias_test() {
+  medias_css.and()
+  |> helpers.compute_class("medias_and")
+  medias_css.and_or()
+  |> helpers.compute_class("medias_and_or")
+  medias_css.or()
+  |> helpers.compute_class("medias_or")
+  medias_css.pseudo_class()
+  |> helpers.compute_class("medias_pseudo_class")
+  medias_css.simple()
+  |> helpers.compute_class("medias_simple")
+}
+
+pub fn nestings_test() {
+  nestings_css.content("blue")
+  |> helpers.compute_class("nestings_css")
+  nestings_css.example("blue")
+  |> helpers.compute_class("nestings_example")
+}
+
+pub fn variable_test() {
+  variable_css.variable_property()
+  |> helpers.compute_class("variable_css")
 }
diff --git a/sketch/test/test_/constants.gleam b/sketch/test/test_/constants.gleam
new file mode 100644
index 0000000..d72c7f5
--- /dev/null
+++ b/sketch/test/test_/constants.gleam
@@ -0,0 +1,5 @@
+pub const red = "red"
+
+pub const blue = "blue"
+
+pub const md = "12px"
diff --git a/sketch/test/test_/helpers.gleam b/sketch/test/test_/helpers.gleam
new file mode 100644
index 0000000..b679543
--- /dev/null
+++ b/sketch/test/test_/helpers.gleam
@@ -0,0 +1,36 @@
+import birdie
+import gleam/string
+import gleeunit/should
+import sketch
+import sketch/css.{type Class}
+
+pub fn card_body(custom: String) -> Class {
+  css.class([
+    css.background("#ddd"),
+    css.background("red"),
+    css.display("block"),
+    custom_color(custom),
+  ])
+}
+
+pub fn custom_color(custom: String) -> css.Style {
+  css.color(custom)
+}
+
+@target(erlang)
+pub fn multitarget_title(title: String) {
+  "erlang_" <> title
+}
+
+@target(javascript)
+pub fn multitarget_title(title: String) {
+  "js_" <> title
+}
+
+pub fn compute_class(class: css.Class, title: String) {
+  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Ephemeral)
+  let #(stylesheet, class_name) = sketch.class_name(class, stylesheet)
+  let content = sketch.render(stylesheet)
+  content |> string.contains(class_name) |> should.be_true
+  birdie.snap(title: multitarget_title(title), content:)
+}
diff --git a/sketch_css/birdie_snapshots/erlang_css_edges_css_gleam.accepted b/sketch_css/birdie_snapshots/erlang_css_edges_css_gleam.accepted
new file mode 100644
index 0000000..6a8ecdb
--- /dev/null
+++ b/sketch_css/birdie_snapshots/erlang_css_edges_css_gleam.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: erlang_css_edges_css.gleam
+---
+.css-55916051 {
+  grid-template-areas: "header" "main";
+  --example-property: example-value;
+  color: var(--custom);
+}
\ No newline at end of file
diff --git a/sketch_css/birdie_snapshots/erlang_gleam_edges_css_gleam.accepted b/sketch_css/birdie_snapshots/erlang_gleam_edges_css_gleam.accepted
new file mode 100644
index 0000000..ace04bf
--- /dev/null
+++ b/sketch_css/birdie_snapshots/erlang_gleam_edges_css_gleam.accepted
@@ -0,0 +1,5 @@
+---
+version: 1.2.5
+title: erlang_gleam_edges_css.gleam
+---
+pub const edge_cases = "css-55916051"
\ No newline at end of file
diff --git a/sketch_css/birdie_snapshots/js_css_edges_css_gleam.accepted b/sketch_css/birdie_snapshots/js_css_edges_css_gleam.accepted
new file mode 100644
index 0000000..a9d1e9e
--- /dev/null
+++ b/sketch_css/birdie_snapshots/js_css_edges_css_gleam.accepted
@@ -0,0 +1,9 @@
+---
+version: 1.2.5
+title: js_css_edges_css.gleam
+---
+.css-3884838561 {
+  grid-template-areas: "header" "main";
+  --example-property: example-value;
+  color: var(--custom);
+}
\ No newline at end of file
diff --git a/sketch_css/birdie_snapshots/js_gleam_edges_css_gleam.accepted b/sketch_css/birdie_snapshots/js_gleam_edges_css_gleam.accepted
new file mode 100644
index 0000000..ae6310a
--- /dev/null
+++ b/sketch_css/birdie_snapshots/js_gleam_edges_css_gleam.accepted
@@ -0,0 +1,5 @@
+---
+version: 1.2.5
+title: js_gleam_edges_css.gleam
+---
+pub const edge_cases = "css-3884838561"
\ No newline at end of file
diff --git a/sketch_css/src/sketch_css/constants.gleam b/sketch_css/src/sketch_css/constants.gleam
index c0cb80e..c460c2f 100644
--- a/sketch_css/src/sketch_css/constants.gleam
+++ b/sketch_css/src/sketch_css/constants.gleam
@@ -1,71 +1,38 @@
 import sketch/css
 
 pub const combinators = [
-  #("child", css.child),
-  #("descendant", css.descendant),
+  #("child", css.child), #("descendant", css.descendant),
   #("next_sibling", css.next_sibling),
   #("subsequent_sibling", css.subsequent_sibling),
 ]
 
 pub const pseudo_classes = [
-  #("placeholder", "::placeholder"),
-  #("selection", "::selection"),
-  #("before", "::before"),
-  #("after", "::after"),
-  #("backdrop", "::backdrop"),
-  #("cue", "::cue"),
-  #("first_line", "::first-line"),
-  #("grammar_error", "::grammar-error"),
-  #("spelling_error", "::spelling-error"),
-  #("marker", "::marker"),
-  #("first_letter", "::first-letter"),
-  #("file_selector_button", "::file-selector-button"),
-  #("hover", ":hover"),
-  #("any_link", ":any-link"),
-  #("active", ":active"),
-  #("focus", ":focus"),
-  #("autofill", ":autofill"),
-  #("buffering", ":buffering"),
-  #("default", ":default"),
-  #("defined", ":defined"),
-  #("empty", ":empty"),
-  #("fullscreen", ":fullscreen"),
-  #("in_range", ":in-range"),
-  #("indeterminate", ":indeterminate"),
-  #("muted", ":muted"),
-  #("paused", ":paused"),
-  #("playing", ":playing"),
-  #("seeking", ":seeking"),
-  #("stalled", ":stalled"),
-  #("state", ":state"),
-  #("user_invalid", ":user-invalid"),
-  #("user_valid", ":user-valid"),
+  #("placeholder", "::placeholder"), #("selection", "::selection"),
+  #("before", "::before"), #("after", "::after"), #("backdrop", "::backdrop"),
+  #("cue", "::cue"), #("first_line", "::first-line"),
+  #("grammar_error", "::grammar-error"), #("spelling_error", "::spelling-error"),
+  #("marker", "::marker"), #("first_letter", "::first-letter"),
+  #("file_selector_button", "::file-selector-button"), #("hover", ":hover"),
+  #("any_link", ":any-link"), #("active", ":active"), #("focus", ":focus"),
+  #("autofill", ":autofill"), #("buffering", ":buffering"),
+  #("default", ":default"), #("defined", ":defined"), #("empty", ":empty"),
+  #("fullscreen", ":fullscreen"), #("in_range", ":in-range"),
+  #("indeterminate", ":indeterminate"), #("muted", ":muted"),
+  #("paused", ":paused"), #("playing", ":playing"), #("seeking", ":seeking"),
+  #("stalled", ":stalled"), #("state", ":state"),
+  #("user_invalid", ":user-invalid"), #("user_valid", ":user-valid"),
   #("volume_locked", ":volume-locked"),
   #("placeholder_shown", ":placeholder-shown"),
-  #("out_of_range", ":out-of-range"),
-  #("dir", ":dir"),
-  #("focus_visible", ":focus-visible"),
-  #("focus_within", ":focus-within"),
-  #("enabled", ":enabled"),
-  #("disabled", ":disabled"),
-  #("read_only", ":read-only"),
-  #("read_write", ":read-write"),
-  #("checked", ":checked"),
-  #("valid", ":valid"),
-  #("invalid", ":invalid"),
-  #("required", ":required"),
-  #("optional", ":optional"),
-  #("link", ":link"),
-  #("visited", ":visited"),
-  #("target", ":target"),
-  #("nth_child", ":nth-child"),
-  #("nth_last_child", ":nth-last-child"),
-  #("nth_of_type", ":nth-of-type"),
-  #("nth_last_of_type", ":nth-last-of-type"),
-  #("first_child", ":first-child"),
-  #("last_child", ":last-child"),
-  #("only_child", ":only-child"),
-  #("first_of_type", ":first-of-type"),
-  #("last_of_type", ":last-of-type"),
+  #("out_of_range", ":out-of-range"), #("dir", ":dir"),
+  #("focus_visible", ":focus-visible"), #("focus_within", ":focus-within"),
+  #("enabled", ":enabled"), #("disabled", ":disabled"),
+  #("read_only", ":read-only"), #("read_write", ":read-write"),
+  #("checked", ":checked"), #("valid", ":valid"), #("invalid", ":invalid"),
+  #("required", ":required"), #("optional", ":optional"), #("link", ":link"),
+  #("visited", ":visited"), #("target", ":target"), #("nth_child", ":nth-child"),
+  #("nth_last_child", ":nth-last-child"), #("nth_of_type", ":nth-of-type"),
+  #("nth_last_of_type", ":nth-last-of-type"), #("first_child", ":first-child"),
+  #("last_child", ":last-child"), #("only_child", ":only-child"),
+  #("first_of_type", ":first-of-type"), #("last_of_type", ":last-of-type"),
   #("only_of_type", ":only-of-type"),
 ]
diff --git a/sketch_css/src/sketch_css/module/exposings.gleam b/sketch_css/src/sketch_css/module/exposings.gleam
index 8814312..0db6dbf 100644
--- a/sketch_css/src/sketch_css/module/exposings.gleam
+++ b/sketch_css/src/sketch_css/module/exposings.gleam
@@ -77,17 +77,24 @@ fn rewrite_custom_type(
 ) -> g.Definition(g.CustomType) {
   let g.Definition(attributes:, definition:) = custom_type
   g.Definition(attributes:, definition: {
-    g.CustomType(..definition, variants: {
-      use variant <- list.map(definition.variants)
-      g.Variant(..variant, fields: {
-        use field <- list.map(variant.fields)
-        let item = rewrite_type(field.item, env)
-        case field {
-          g.LabelledVariantField(..) -> g.LabelledVariantField(..field, item:)
-          g.UnlabelledVariantField(..) -> g.UnlabelledVariantField(item:)
-        }
-      })
-    })
+    g.CustomType(
+      ..definition,
+      variants: {
+        use variant <- list.map(definition.variants)
+        g.Variant(
+          ..variant,
+          fields: {
+            use field <- list.map(variant.fields)
+            let item = rewrite_type(field.item, env)
+            case field {
+              g.LabelledVariantField(..) ->
+                g.LabelledVariantField(..field, item:)
+              g.UnlabelledVariantField(..) -> g.UnlabelledVariantField(item:)
+            }
+          },
+        )
+      },
+    )
   })
 }
 
@@ -352,11 +359,15 @@ fn rewrite_expr(expr: g.Expression, env: Environment) -> g.Expression {
     g.RecordUpdate(..) -> {
       let record = rewrite_expr(expr.record, env)
       let expr =
-        g.RecordUpdate(..expr, record:, fields: {
-          use field <- list.map(expr.fields)
-          let item = option.map(field.item, rewrite_expr(_, env))
-          g.RecordUpdateField(..field, item:)
-        })
+        g.RecordUpdate(
+          ..expr,
+          record:,
+          fields: {
+            use field <- list.map(expr.fields)
+            let item = option.map(field.item, rewrite_expr(_, env))
+            g.RecordUpdateField(..field, item:)
+          },
+        )
       case expr.module {
         option.Some(..) -> expr
         option.None -> {
diff --git a/sketch_css/src/sketch_css/module/imports.gleam b/sketch_css/src/sketch_css/module/imports.gleam
index 9d5f718..36c976c 100644
--- a/sketch_css/src/sketch_css/module/imports.gleam
+++ b/sketch_css/src/sketch_css/module/imports.gleam
@@ -78,17 +78,24 @@ fn rewrite_custom_type(
 ) -> g.Definition(g.CustomType) {
   let g.Definition(attributes:, definition:) = custom_type
   g.Definition(attributes:, definition: {
-    g.CustomType(..definition, variants: {
-      use variant <- list.map(definition.variants)
-      g.Variant(..variant, fields: {
-        use field <- list.map(variant.fields)
-        let item = rewrite_type(field.item, env)
-        case field {
-          g.LabelledVariantField(..) -> g.LabelledVariantField(..field, item:)
-          g.UnlabelledVariantField(..) -> g.UnlabelledVariantField(item:)
-        }
-      })
-    })
+    g.CustomType(
+      ..definition,
+      variants: {
+        use variant <- list.map(definition.variants)
+        g.Variant(
+          ..variant,
+          fields: {
+            use field <- list.map(variant.fields)
+            let item = rewrite_type(field.item, env)
+            case field {
+              g.LabelledVariantField(..) ->
+                g.LabelledVariantField(..field, item:)
+              g.UnlabelledVariantField(..) -> g.UnlabelledVariantField(item:)
+            }
+          },
+        )
+      },
+    )
   })
 }
 
@@ -332,11 +339,16 @@ fn rewrite_expr(expr: g.Expression, env: Environment) -> g.Expression {
     g.RecordUpdate(..) -> {
       let module = option.map(expr.module, replace_import(_, env))
       let record = rewrite_expr(expr.record, env)
-      g.RecordUpdate(..expr, module:, record:, fields: {
-        use field <- list.map(expr.fields)
-        let item = option.map(field.item, rewrite_expr(_, env))
-        g.RecordUpdateField(..field, item:)
-      })
+      g.RecordUpdate(
+        ..expr,
+        module:,
+        record:,
+        fields: {
+          use field <- list.map(expr.fields)
+          let item = option.map(field.item, rewrite_expr(_, env))
+          g.RecordUpdateField(..field, item:)
+        },
+      )
     }
 
     g.FieldAccess(..) -> {
diff --git a/sketch_css/src/sketch_css/module/pipes.gleam b/sketch_css/src/sketch_css/module/pipes.gleam
index d529004..3a5d088 100644
--- a/sketch_css/src/sketch_css/module/pipes.gleam
+++ b/sketch_css/src/sketch_css/module/pipes.gleam
@@ -5,16 +5,22 @@ import gleam/option
 /// Rewrites every pipe (`|>`) to the proper function call. Because pipe is an
 /// operator that disappears at runtime, it's useless to keep it in the AST.
 pub fn remove(module: g.Module) -> g.Module {
-  g.Module(..module, functions: {
-    use g.Definition(attributes:, definition:) <- list.map(module.functions)
-    let attributes = list.map(attributes, remove_attribute)
-    g.Definition(attributes:, definition: {
-      g.Function(..definition, body: {
-        use statement <- list.map(definition.body)
-        remove_statement(statement)
+  g.Module(
+    ..module,
+    functions: {
+      use g.Definition(attributes:, definition:) <- list.map(module.functions)
+      let attributes = list.map(attributes, remove_attribute)
+      g.Definition(attributes:, definition: {
+        g.Function(
+          ..definition,
+          body: {
+            use statement <- list.map(definition.body)
+            remove_statement(statement)
+          },
+        )
       })
-    })
-  })
+    },
+  )
 }
 
 fn remove_attribute(attribute: g.Attribute) -> g.Attribute {
@@ -50,11 +56,15 @@ fn remove_expr(expr: g.Expression) -> g.Expression {
 
     g.RecordUpdate(..) -> {
       let record = remove_expr(expr.record)
-      g.RecordUpdate(..expr, record:, fields: {
-        use field <- list.map(expr.fields)
-        let item = option.map(field.item, remove_expr)
-        g.RecordUpdateField(..field, item:)
-      })
+      g.RecordUpdate(
+        ..expr,
+        record:,
+        fields: {
+          use field <- list.map(expr.fields)
+          let item = option.map(field.item, remove_expr)
+          g.RecordUpdateField(..field, item:)
+        },
+      )
     }
 
     g.FieldAccess(..) -> {
diff --git a/sketch_css/test/classes/edges_css.gleam b/sketch_css/test/classes/edges_css.gleam
new file mode 100644
index 0000000..beea077
--- /dev/null
+++ b/sketch_css/test/classes/edges_css.gleam
@@ -0,0 +1,9 @@
+import sketch/css
+
+pub fn edge_cases(custom) {
+  css.class([
+    css.grid_template_areas(["header", "main"]),
+    css.property("--example-property", "example-value"),
+    css.color(custom),
+  ])
+}