[ENG-8474] Normalize names for styling (#1699)

BuilderIO · Feb 24, 2025 · 8e9e3c3 · 8e9e3c3
1 parent 06e29ee
commit 8e9e3c3
Show file tree

Hide file tree

Showing 34 changed files with 4,745 additions and 195 deletions.
diff --git a/.changeset/green-moles-refuse.md b/.changeset/green-moles-refuse.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All] Normalize name of mitosis node before assigning it to className
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2218,6 +2218,49 @@ exports[`Alpine.js > jsx > Javascript Test > nestedStyles 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > normalizeLayerNames 1`] = `
+"<style>
+  .css-0 {
+    margin: 10px;
+  }
+  .css-123 {
+    padding: 10px;
+  }
+  .name-123 {
+    border: 1px solid;
+  }
+  .name {
+    color: red;
+  }
+  .name-789 {
+    background: blue;
+  }
+  .div {
+    background: blue;
+  }
+</style>
+<section x-data=\\"myNormalizedLayerNamesComponent()\\">
+  <div>Emoji</div>
+  <div>Dashes</div>
+  <div>CamelCase</div>
+  <div>Special chars</div>
+  <div>Special chars with dashes</div>
+  <div class=\\"css-0\\">Single Number</div>
+  <div class=\\"css-123\\">Multiple Numbers</div>
+  <div class=\\"name-123\\">Chars with numbers at end</div>
+  <div class=\\"name\\">Chars with numbers at start</div>
+  <div class=\\"name-789\\">Numnbers separated by dash</div>
+  <div>Emoji</div>
+  <div data-name=\\"1\\" class=\\"div\\">Number</div>
+</section>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myNormalizedLayerNamesComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > onEvent 1`] = `
 "<div class=\\"builder-embed\\" x-data=\\"embed()\\" x-ref=\\"elem\\"><div>Test</div></div>
 <script>
@@ -5409,6 +5452,49 @@ exports[`Alpine.js > jsx > Typescript Test > nestedStyles 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > normalizeLayerNames 1`] = `
+"<style>
+  .css-0 {
+    margin: 10px;
+  }
+  .css-123 {
+    padding: 10px;
+  }
+  .name-123 {
+    border: 1px solid;
+  }
+  .name {
+    color: red;
+  }
+  .name-789 {
+    background: blue;
+  }
+  .div {
+    background: blue;
+  }
+</style>
+<section x-data=\\"myNormalizedLayerNamesComponent()\\">
+  <div>Emoji</div>
+  <div>Dashes</div>
+  <div>CamelCase</div>
+  <div>Special chars</div>
+  <div>Special chars with dashes</div>
+  <div class=\\"css-0\\">Single Number</div>
+  <div class=\\"css-123\\">Multiple Numbers</div>
+  <div class=\\"name-123\\">Chars with numbers at end</div>
+  <div class=\\"name\\">Chars with numbers at start</div>
+  <div class=\\"name-789\\">Numnbers separated by dash</div>
+  <div>Emoji</div>
+  <div data-name=\\"1\\" class=\\"div\\">Number</div>
+</section>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myNormalizedLayerNamesComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > onEvent 1`] = `
 "<div class=\\"builder-embed\\" x-data=\\"embed()\\" x-ref=\\"elem\\"><div>Test</div></div>
 <script>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5310,6 +5310,67 @@ export class NestedStylesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > normalizeLayerNames 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-normalized-layer-names-component\\",
+  template: \`
+    <section>
+      <div>Emoji</div>
+      <div>Dashes</div>
+      <div>CamelCase</div>
+      <div>Special chars</div>
+      <div>Special chars with dashes</div>
+      <div class=\\"css-0\\">Single Number</div>
+      <div class=\\"css-123\\">Multiple Numbers</div>
+      <div class=\\"name-123\\">Chars with numbers at end</div>
+      <div class=\\"name\\">Chars with numbers at start</div>
+      <div class=\\"name-789\\">Numnbers separated by dash</div>
+      <div>Emoji</div>
+      <div data-name=\\"1\\" class=\\"div\\">Number</div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .css-0 {
+        margin: 10px;
+      }
+      .css-123 {
+        padding: 10px;
+      }
+      .name-123 {
+        border: 1px solid;
+      }
+      .name {
+        color: red;
+      }
+      .name-789 {
+        background: blue;
+      }
+      .div {
+        background: blue;
+      }
+    \`,
+  ],
+})
+export default class MyNormalizedLayerNamesComponent {}
+
+@NgModule({
+  declarations: [MyNormalizedLayerNamesComponent],
+  imports: [CommonModule],
+  exports: [MyNormalizedLayerNamesComponent],
+})
+export class MyNormalizedLayerNamesComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > onEvent 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13532,6 +13593,71 @@ export class NestedStylesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > normalizeLayerNames 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface MyNormalizedLayerNamesComponentProps {
+  id: string;
+}
+
+@Component({
+  selector: \\"my-normalized-layer-names-component\\",
+  template: \`
+    <section>
+      <div>Emoji</div>
+      <div>Dashes</div>
+      <div>CamelCase</div>
+      <div>Special chars</div>
+      <div>Special chars with dashes</div>
+      <div class=\\"css-0\\">Single Number</div>
+      <div class=\\"css-123\\">Multiple Numbers</div>
+      <div class=\\"name-123\\">Chars with numbers at end</div>
+      <div class=\\"name\\">Chars with numbers at start</div>
+      <div class=\\"name-789\\">Numnbers separated by dash</div>
+      <div>Emoji</div>
+      <div data-name=\\"1\\" class=\\"div\\">Number</div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .css-0 {
+        margin: 10px;
+      }
+      .css-123 {
+        padding: 10px;
+      }
+      .name-123 {
+        border: 1px solid;
+      }
+      .name {
+        color: red;
+      }
+      .name-789 {
+        background: blue;
+      }
+      .div {
+        background: blue;
+      }
+    \`,
+  ],
+})
+export default class MyNormalizedLayerNamesComponent {}
+
+@NgModule({
+  declarations: [MyNormalizedLayerNamesComponent],
+  imports: [CommonModule],
+  exports: [MyNormalizedLayerNamesComponent],
+})
+export class MyNormalizedLayerNamesComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > onEvent 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5394,6 +5394,68 @@ export class NestedStylesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > normalizeLayerNames 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-normalized-layer-names-component\\",
+  template: \`
+    <section>
+      <div>Emoji</div>
+      <div>Dashes</div>
+      <div>CamelCase</div>
+      <div>Special chars</div>
+      <div>Special chars with dashes</div>
+      <div class=\\"css-0\\">Single Number</div>
+      <div class=\\"css-123\\">Multiple Numbers</div>
+      <div class=\\"name-123\\">Chars with numbers at end</div>
+      <div class=\\"name\\">Chars with numbers at start</div>
+      <div class=\\"name-789\\">Numnbers separated by dash</div>
+      <div>Emoji</div>
+      <div data-name=\\"1\\" class=\\"div\\">Number</div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .css-0 {
+        margin: 10px;
+      }
+      .css-123 {
+        padding: 10px;
+      }
+      .name-123 {
+        border: 1px solid;
+      }
+      .name {
+        color: red;
+      }
+      .name-789 {
+        background: blue;
+      }
+      .div {
+        background: blue;
+      }
+    \`,
+  ],
+})
+export default class MyNormalizedLayerNamesComponent {}
+
+@NgModule({
+  declarations: [MyNormalizedLayerNamesComponent],
+  imports: [CommonModule],
+  exports: [MyNormalizedLayerNamesComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyNormalizedLayerNamesComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > onEvent 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13752,6 +13814,72 @@ export class NestedStylesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > normalizeLayerNames 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface MyNormalizedLayerNamesComponentProps {
+  id: string;
+}
+
+@Component({
+  selector: \\"my-normalized-layer-names-component\\",
+  template: \`
+    <section>
+      <div>Emoji</div>
+      <div>Dashes</div>
+      <div>CamelCase</div>
+      <div>Special chars</div>
+      <div>Special chars with dashes</div>
+      <div class=\\"css-0\\">Single Number</div>
+      <div class=\\"css-123\\">Multiple Numbers</div>
+      <div class=\\"name-123\\">Chars with numbers at end</div>
+      <div class=\\"name\\">Chars with numbers at start</div>
+      <div class=\\"name-789\\">Numnbers separated by dash</div>
+      <div>Emoji</div>
+      <div data-name=\\"1\\" class=\\"div\\">Number</div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .css-0 {
+        margin: 10px;
+      }
+      .css-123 {
+        padding: 10px;
+      }
+      .name-123 {
+        border: 1px solid;
+      }
+      .name {
+        color: red;
+      }
+      .name-789 {
+        background: blue;
+      }
+      .div {
+        background: blue;
+      }
+    \`,
+  ],
+})
+export default class MyNormalizedLayerNamesComponent {}
+
+@NgModule({
+  declarations: [MyNormalizedLayerNamesComponent],
+  imports: [CommonModule],
+  exports: [MyNormalizedLayerNamesComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyNormalizedLayerNamesComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > onEvent 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";