Refactor Styling

Makefile

@@ -6,7 +6,7 @@ build:
 	crystal build src/mint.cr -o mint -p && mv mint ~/.bin/mint && mint
 
 test:
-	crystal spec -p && bin/ameba
+	crystal spec -p --error-trace && bin/ameba
 
 test-core:
 	crystal build src/mint.cr -o mint -p && cd core && ../mint test -b firefox && cd .. && rm mint

core/tests/Dom.mint

@@ -105,7 +105,7 @@ component Test.Dom.Focus {
   state shown : Bool = false
 
   style input {
-    display: {display};
+    display: #{display};
   }
 
   get display : String {

spec/compilers/access

@@ -15,16 +15,16 @@ const A = _R({
     "name",
     Decoder.string
   ]
-})
+});
 
 class B extends _C {
   render() {
     let a = new A({
       name: `test`
-    })
+    });
 
-    return a.name
+    return a.name;
   }
-}
+};
 
-B.displayName = "Main"
+B.displayName = "Main";

spec/compilers/access_call

@@ -26,34 +26,34 @@ component Main {
 --------------------------------------------------------------------------------
 class C extends _E {
   constructor(_0) {
-    super()
-    this._0 = _0
-    this.length = 1
+    super();
+    this._0 = _0;
+    this.length = 1;
   }
-}
+};
 
 class A extends _C {
   a(b) {
-    return b
+    return b;
   }
 
   render() {
-    return _h("div", {})
+    return _h("div", {});
   }
-}
+};
 
-A.displayName = "Test"
+A.displayName = "Test";
 
 class B extends _C {
   c() {
     return (() => {
       const _ = (() => {
-        const _ = this._test
-        return _s(_,(_) => _.a)
-      })()
+        const _ = this._test;
+        return _s(_,(_) => _.a);
+      })();
 
-      return _s(_,(_) => _(`asd`))
-    })()
+      return _s(_,(_) => _(`asd`));
+    })();
   }
 
   render() {
@@ -63,8 +63,8 @@ class B extends _C {
       _h(A, {
         ref: (instance) => { this._test = new C(instance) }
       })
-    ])
+    ]);
   }
-}
+};
 
-B.displayName = "Main"
+B.displayName = "Main";

spec/compilers/argument

@@ -14,15 +14,15 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   a(c, b) {
-    return b
+    return b;
   }
 
   render() {
     return (() => {
-      this.a(``, 0)
-      return ``
-    })()
+      this.a(``, 0);
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/array_access

@@ -24,20 +24,20 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   a() {
-    return _at([`Hello`, `Blah`, `Joe`], 1)
+    return _at([`Hello`, `Blah`, `Joe`], 1);
   }
 
   b() {
-    return _at([], 1)
+    return _at([], 1);
   }
 
   render() {
     return (() => {
-      this.a()
-      this.b()
-      return ``
-    })()
+      this.a();
+      this.b();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/array_literal

@@ -18,15 +18,15 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   a() {
-    return [`Hello`, `Blah`, `Joe`]
+    return [`Hello`, `Blah`, `Joe`];
   }
 
   render() {
     return (() => {
-      this.a()
-      return ``
-    })()
+      this.a();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/bool_literal_false

@@ -14,15 +14,15 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   a() {
-    return false
+    return false;
   }
 
   render() {
     return (() => {
-      this.a()
-      return ``
-    })()
+      this.a();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/bool_literal_true

@@ -14,15 +14,15 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   a() {
-    return true
+    return true;
   }
 
   render() {
     return (() => {
-      this.a()
-      return ``
-    })()
+      this.a();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/case

@@ -19,24 +19,24 @@ component Main {
 class A extends _C {
   a() {
     return (() => {
-      let b = `Hello`
+      let b = `Hello`;
 
       if (_compare(b, `test`)) {
         return true
       } else if (_compare(b, `Hello`)) {
         return false
       } else {
         return false
-      }
-    })()
+      };
+    })();
   }
 
   render() {
     return (() => {
-      this.a()
-      return ``
-    })()
+      this.a();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/case_with_enum_destructuring

@@ -28,46 +28,46 @@ component Main {
 --------------------------------------------------------------------------------
 class B extends _E {
   constructor(_0) {
-    super()
-    this._0 = _0
-    this.length = 1
+    super();
+    this._0 = _0;
+    this.length = 1;
   }
-}
+};
 
 class C extends _E {
   constructor(_0) {
-    super()
-    this._0 = _0
-    this.length = 1
+    super();
+    this._0 = _0;
+    this.length = 1;
   }
-}
+};
 
 class A extends _C {
   a(b) {
     return (() => {
-      let c = b
+      let c = b;
 
       if (c instanceof C) {
-        const d = c._0
+        const d = c._0;
 
         return (() => {
-          let e = d
+          let e = d;
 
           if (e instanceof B) {
-            const f = e._0
-            return f
-          }
-        })()
-      }
-    })()
+            const f = e._0;
+            return f;
+          };
+        })();
+      };
+    })();
   }
 
   render() {
     return (() => {
-      this.a(new C(new B(``)))
-      return ``
-    })()
+      this.a(new C(new B(``)));
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/catch

@@ -27,44 +27,44 @@ component Main {
 --------------------------------------------------------------------------------
 const B = new(class extends _M {
   c(e) {
-    return
+    return;
   }
-})
+});
 
 class A extends _C {
   a() {
     return (async () => {
-      let _ = null
+      let _ = null;
 
       try {
         let b = await (async () => {
           try {
             return await B.c(`hello`)
           } catch (_error) {
-            let d = _error
-            _ = null
-            throw new DoError()
+            let d = _error;
+            _ = null;
+            throw new DoError();
           }
-        })()
+        })();
 
-        _ = await null
+        _ = await null;
       } catch (_error) {
         if (!(_error instanceof DoError)) {
-          console.warn(`Unhandled error in sequence expression:`)
-          console.warn(_error)
+          console.warn(`Unhandled error in sequence expression:`);
+          console.warn(_error);
         }
-      }
+      };
 
-      return _
-    })()
+      return _;
+    })();
   }
 
   render() {
     return (() => {
-      this.a()
-      return ``
-    })()
+      this.a();
+      return ``;
+    })();
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";

spec/compilers/component

@@ -6,8 +6,8 @@ component Main {
 --------------------------------------------------------------------------------
 class A extends _C {
   render() {
-    return _h("div", {})
+    return _h("div", {});
   }
-}
+};
 
-A.displayName = "Main"
+A.displayName = "Main";