Merge pull request #29 from josevictorferreira/bugfix/fix-css-properties-generation

Bugfix - Fixes in CSS generation - "sketch_css"

Author: ghivert

sketch_css/src/sketch/css.gleam

@@ -420,7 +420,7 @@ fn compute_css_property(name, param) {
 
 fn css_property(name, param) {
   let prop =
-    string.split(name, "-")
+    string.split(name, "_")
     |> list.filter(fn(a) { a != "" })
     |> string.join("-")
   let body = property_body(param)
@@ -452,6 +452,8 @@ fn template_areas_to_string(param) {
 fn string_to_string(param) {
   case param {
     glance.String(m) -> m
+    glance.Int(i) -> i
+    glance.Float(f) -> f
     glance.Variable(v) ->
       "var(--" <> string.replace(v, each: "_", with: "-") <> ")"
     _ -> ""
@@ -463,17 +465,24 @@ fn property_body(param) {
     [Field(None, p)] -> {
       case rewrite_pipe(p) {
         Call(FieldAccess(Variable(_), size), [Field(None, value)]) ->
-          size_to_string(value) <> size
+          size_value_to_string(value) <> size_to_string(size)
         Call(Variable(size), [Field(None, value)]) ->
-          size_to_string(value) <> size
+          size_value_to_string(value) <> size_to_string(size)
         p -> string_to_string(p)
       }
     }
     _ -> string.inspect(param)
   }
 }
 
-fn size_to_string(value) {
+fn size_to_string(size: String) -> String {
+  case size {
+    "percent" -> "%"
+    _ -> size
+  }
+}
+
+fn size_value_to_string(value) {
   case rewrite_pipe(value) {
     glance.Int(i) -> i
     glance.Float(f) -> f

sketch_css/test/main_css.gleam

@@ -1,7 +1,7 @@
 import sketch
 import sketch.{background, class as t} as s
 import sketch/media
-import sketch/size.{px}
+import sketch/size.{percent, px}
 
 fn custom_color(custom) {
   sketch.color(custom)
@@ -10,6 +10,9 @@ fn custom_color(custom) {
 pub fn card(custom) {
   sketch.class([
     sketch.background("#ddd"),
+    sketch.z_index(100),
+    sketch.opacity(1.0),
+    sketch.width(percent(100)),
     background("red"),
     s.display("block"),
     s.padding(size.pt(12)),

sketch_css/test/sketch/constants.gleam

@@ -10,6 +10,9 @@ pub const card = \"card\""
 
 pub const css = ".card {
   background: #ddd;
+  z-index: 100;
+  opacity: 1.0;
+  width: 100%;
   background: red;
   display: block;
   padding: 12pt;