Include css class name in compiled output (#467)

Co-authored-by: matthewmcgarvey <[email protected]>
mint-lang · Jul 2, 2021 · 3b7e55a · 3b7e55a
1 parent bde5229
commit 3b7e55a
Show file tree

Hide file tree

Showing 31 changed files with 209 additions and 111 deletions.
diff --git a/spec/compilers/component_namespaced_with_style b/spec/compilers/component_namespaced_with_style
@@ -0,0 +1,45 @@
+component Ui.Dropdown {
+  style base {
+    background: red;
+  }
+
+  fun render : Html {
+    <div::base>
+      "test"
+    </div>
+  }
+}
+
+component Main {
+  fun render : Html {
+    <Ui.Dropdown/>
+  }
+}
+--------------------------------------------------------------------------------
+class A extends _C {
+  render() {
+    return _h("div", {
+      className: `Ui·Dropdown_base`
+    }, [
+      `test`
+    ]);
+  }
+};
+
+A.displayName = "Ui.Dropdown";
+
+class B extends _C {
+  render() {
+    return $a();
+  }
+};
+
+B.displayName = "Main";
+
+const $a = _m(() => _h(A, {}));
+
+_insertStyles(`
+.Ui·Dropdown_base {
+  background: red;
+}
+`);
diff --git a/spec/compilers/css_definition b/spec/compilers/css_definition
@@ -13,7 +13,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a + `px 0px`
     };
@@ -27,16 +27,16 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a {
+.Main_test {
   margin: var(--a-a);
 }
 `);
diff --git a/spec/compilers/css_font_face b/spec/compilers/css_font_face
@@ -20,7 +20,7 @@ component Main {
 class A extends _C {
   render() {
     return _h("div", {
-      className: `a`
+      className: `Main_test`
     });
   }
 };

diff --git a/spec/compilers/css_font_face_with_qoutes b/spec/compilers/css_font_face_with_qoutes
@@ -16,15 +16,15 @@ component Main {
 class A extends _C {
   render() {
     return _h("div", {
-      className: `a`
+      className: `Main_test`
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a {
+.Main_test {
   font-family: "myFirstFont";
 }
 

diff --git a/spec/compilers/css_keyframes b/spec/compilers/css_keyframes
@@ -37,7 +37,7 @@ class A extends _C {
     });
   }
 
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a
     };
@@ -51,8 +51,8 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };

diff --git a/spec/compilers/css_media b/spec/compilers/css_media
@@ -19,7 +19,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a,
       [`--b-a`]: this.a
@@ -34,21 +34,21 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a div {
+.Main_test div {
   color: var(--a-a);
 }
 
 @media (screen) {
-  .a {
+  .Main_test {
     color: var(--b-a);
   }
 }

diff --git a/spec/compilers/css_media_with_if b/spec/compilers/css_media_with_if
@@ -15,7 +15,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a() {
+  $Main_test() {
     const _ = {};
 
     (true ? Object.assign(_, {
@@ -27,21 +27,21 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a {
+.Main_test {
   color: yellow;
 }
 
 @media (max-width: 300px) {
-  .a {
+  .Main_test {
     color: var(--a-a);
   }
 }

diff --git a/spec/compilers/css_selector b/spec/compilers/css_selector
@@ -19,7 +19,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a
     };
@@ -33,20 +33,20 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a div {
+.Main_test div {
   color: var(--a-a);
 }
 
-.a:focus {
+.Main_test:focus {
   color: red;
 }
 `);
diff --git a/spec/compilers/css_selector_multiple b/spec/compilers/css_selector_multiple
@@ -20,7 +20,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a
     };
@@ -34,24 +34,24 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a div {
+.Main_test div {
   color: var(--a-a);
 }
 
-.a:focus {
+.Main_test:focus {
   color: red;
 }
 
-.a:hover {
+.Main_test:hover {
   color: red;
 }
 `);
diff --git a/spec/compilers/css_string b/spec/compilers/css_string
@@ -23,7 +23,7 @@ class A extends _C {
     });
   }
 
-  $a() {
+  $Main_unicode() {
     const _ = {
       [`--a-a`]: `"Hi"` + ` blah ` + this.a + ` ` + `"Here is some content; Thanks ${this.a}"`
     };
@@ -37,8 +37,8 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_unicode`,
+      style: _style([this.$Main_unicode()])
     }, [
       _h("span", {})
     ]);
@@ -48,7 +48,7 @@ class A extends _C {
 A.displayName = "Main";
 
 _insertStyles(`
-.a span::after {
+.Main_unicode span::after {
   content: var(--a-a);
 }
 `);
diff --git a/spec/compilers/css_supports b/spec/compilers/css_supports
@@ -21,7 +21,7 @@ class A extends _C {
     });
   }
 
-  $a() {
+  $Main_test() {
     const _ = {
       [`--a-a`]: this.a
     };
@@ -35,8 +35,8 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a()])
+      className: `Main_test`,
+      style: _style([this.$Main_test()])
     });
   }
 };
@@ -45,7 +45,7 @@ A.displayName = "Main";
 
 _insertStyles(`
 @supports (screen) {
-  .a {
+  .Main_test {
     color: var(--a-a);
   }
 }

diff --git a/spec/compilers/css_with_ands b/spec/compilers/css_with_ands
@@ -21,23 +21,23 @@ component Main {
 class A extends _C {
   render() {
     return _h("div", {
-      className: `a`
+      className: `Main_test`
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a:focus {
+.Main_test:focus {
   color: red;
 }
 
-.a[someattribute] {
+.Main_test[someattribute] {
   color: red;
 }
 
-.a.someclass {
+.Main_test.someclass {
   color: red;
 }
 `);
diff --git a/spec/compilers/css_with_arguments b/spec/compilers/css_with_arguments
@@ -9,7 +9,7 @@ component Main {
 }
 --------------------------------------------------------------------------------
 class A extends _C {
-  $a(a) {
+  $Main_test(a) {
     const _ = {
       [`--a-a`]: a
     };
@@ -19,16 +19,16 @@ class A extends _C {
 
   render() {
     return _h("div", {
-      className: `a`,
-      style: _style([this.$a(`red`)])
+      className: `Main_test`,
+      style: _style([this.$Main_test(`red`)])
     });
   }
 };
 
 A.displayName = "Main";
 
 _insertStyles(`
-.a {
+.Main_test {
   color: var(--a-a);
 }
 `);