From bc0e6b9f93ec76a8ec148b84332a131ad759e3cd Mon Sep 17 00:00:00 2001
From: Andy Wilson <andy@builtbypixel.com>
Date: Mon, 25 Mar 2024 09:27:54 +0000
Subject: [PATCH 1/2] fix: update so original clss name comes through from css

---
 .gitignore      | 4 +++-
 src/parser.ts   | 8 +++++---
 src/renderer.ts | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2a5f3fb..7c9f638 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 node_modules
 lib
 docs/.vitepress/cache
-docs/.vitepress/dist
\ No newline at end of file
+docs/.vitepress/dist
+.DS_Store
+.idea
diff --git a/src/parser.ts b/src/parser.ts
index 7af349b..75eb3e3 100644
--- a/src/parser.ts
+++ b/src/parser.ts
@@ -6,6 +6,7 @@ export type Components = Record<string, Component>
 export type Component = {
   tag: string
   data: Record<string, string[] | boolean>
+  className?: string;
 }
 
 const enumDataAttributeRegex =
@@ -45,6 +46,7 @@ export function parseInput(input: string): Components {
   const components: Components = {}
 
   let name
+  let className
   const nodes = visit(compile(input))
   for (const node of nodes) {
     // Parse name
@@ -53,9 +55,9 @@ export function parseInput(input: string): Components {
       if (prop === undefined) {
         throw new Error('Invalid MistCSS file, no class found in @scope')
       }
-      name = prop.replace('(.', '').replace(')', '')
-      name = pascalCase(name)
-      components[name] = { tag: '', data: {} }
+      className = prop.replace('(.', '').replace(')', '')
+      name = pascalCase(className)
+      components[name] = { tag: '', data: {}, className }
       continue
     }
 
diff --git a/src/renderer.ts b/src/renderer.ts
index 76dbc32..c8a5669 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -38,7 +38,7 @@ export function ${name}({ ${[
     <${[
       component.tag,
       '{...props}',
-      `className="${name}"`,
+      `className="${component?.className ?? name}"`,
       ...Object.keys(component.data).map((key) => `data-${key}={${key}}`),
     ].join(' ')}>
       {children}

From ded977f9c318929ad41dab44868a88515a9a9899 Mon Sep 17 00:00:00 2001
From: Andy Wilson <andy@builtbypixel.com>
Date: Mon, 25 Mar 2024 09:36:41 +0000
Subject: [PATCH 2/2] fix: tests now pass

---
 fixtures/Foo.mist.tsx | 6 +++---
 src/parser.test.ts    | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/fixtures/Foo.mist.tsx b/fixtures/Foo.mist.tsx
index eb51bd0..908d9b8 100644
--- a/fixtures/Foo.mist.tsx
+++ b/fixtures/Foo.mist.tsx
@@ -9,7 +9,7 @@ type FooProps = {
 
 export function Foo({ children, fooSize, x, ...props }: FooProps) {
   return (
-    <div {...props} className="Foo" data-fooSize={fooSize} data-x={x}>
+    <div {...props} className="foo" data-fooSize={fooSize} data-x={x}>
       {children}
     </div>
   )
@@ -23,7 +23,7 @@ type BarProps = {
 
 export function Bar({ children, barSize, x, ...props }: BarProps) {
   return (
-    <span {...props} className="Bar" data-barSize={barSize} data-x={x}>
+    <span {...props} className="bar" data-barSize={barSize} data-x={x}>
       {children}
     </span>
   )
@@ -35,7 +35,7 @@ type BazProps = {
 
 export function Baz({ children, ...props }: BazProps) {
   return (
-    <p {...props} className="Baz">
+    <p {...props} className="baz">
       {children}
     </p>
   )
diff --git a/src/parser.test.ts b/src/parser.test.ts
index cf1e572..f24f733 100644
--- a/src/parser.test.ts
+++ b/src/parser.test.ts
@@ -26,6 +26,7 @@ void test('parseInput', () => {
   const actual: Components = parseInput(input)
   const expected: Components = {
     Foo: {
+      className: 'foo',
       tag: 'div',
       data: {
         fooSize: ['lg', 'sm'],
@@ -33,6 +34,7 @@ void test('parseInput', () => {
       },
     },
     Bar: {
+        className: 'bar',
       tag: 'span',
       data: {
         barSize: ['lg'],
@@ -40,6 +42,7 @@ void test('parseInput', () => {
       },
     },
     Baz: {
+        className: 'baz',
       tag: 'p',
       data: {},
     },