fix: keeps original classname as making classname pascal case would break the css. (#29)

* fix: update so original clss name comes through from css

* fix: tests now pass

---------

Co-authored-by: Andy Wilson <andy@builtbypixel.com>

Author: The-Code-Monkey

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 lib
 docs/.vitepress/cache
-docs/.vitepress/dist
+docs/.vitepress/dist
+.DS_Store
+.idea

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>
   )

src/parser.test.ts

@@ -26,20 +26,23 @@ void test('parseInput', () => {
   const actual: Components = parseInput(input)
   const expected: Components = {
     Foo: {
+      className: 'foo',
       tag: 'div',
       data: {
         fooSize: ['lg', 'sm'],
         x: true,
       },
     },
     Bar: {
+        className: 'bar',
       tag: 'span',
       data: {
         barSize: ['lg'],
         x: true,
       },
     },
     Baz: {
+        className: 'baz',
       tag: 'p',
       data: {},
     },

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
     }
 

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}