feat: improve typing (#34)

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

* fix: tests now pass

* fix: add better typing for JSX and ReactNode

---------

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

.husky/pre-commit

@@ -1 +1,3 @@
+
+npm run build
 npm test

fixtures/Foo.mist.tsx

@@ -1,8 +1,10 @@
 // Generated by MistCSS, do not modify
 import './Foo.mist.css'
 
+import type { JSX, ReactNode } from 'react';
+
 type FooProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   fooSize?: 'lg' | 'sm'
   x?: boolean
 } & JSX.IntrinsicElements['div']
@@ -16,7 +18,7 @@ export function Foo({ children, fooSize, x, ...props }: FooProps) {
 }
 
 type BarProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   barSize?: 'lg'
   x?: boolean
 } & JSX.IntrinsicElements['span']
@@ -30,7 +32,7 @@ export function Bar({ children, barSize, x, ...props }: BarProps) {
 }
 
 type BazProps = {
-  children?: React.ReactNode
+  children?: ReactNode
 } & JSX.IntrinsicElements['p']
 
 export function Baz({ children, ...props }: BazProps) {

src/renderer.ts

@@ -2,7 +2,7 @@ import { Component, Components } from './parser.js'
 
 function renderProps(component: Component): string {
   return Object.entries({
-    children: 'React.ReactNode',
+    children: 'ReactNode',
     ...component.data,
   })
     .map(([key, value]) => {
@@ -52,6 +52,8 @@ export function render(name: string, components: Components): string {
   return `// Generated by MistCSS, do not modify
 import './${name}.mist.css'
 
+import type { JSX, ReactNode } from 'react';
+
 ${Object.keys(components)
   .map((key) => renderComponent(components, key))
   .join('\n')