fix: withUniwind remove className props on web after converting them

packages/uniwind/src/hoc/withUniwind.tsx

@@ -20,13 +20,16 @@ export const withUniwind: WithUniwind = <
     ? withManualUniwind(Component, options)
     : withAutoUniwind(Component)
 
-const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject) => {
+const withAutoUniwind = (Component: Component<AnyObject>) => (originalProps: AnyObject) => {
     const uniwindContext = useUniwindContext()
+    const props = { ...originalProps }
 
     const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
         if (isColorClassProperty(propName)) {
             const colorProp = classToColor(propName)
 
+            delete props[propName]
+
             if (props[colorProp] !== undefined) {
                 return acc
             }
@@ -54,13 +57,15 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
             acc.generatedProps[styleProp] ??= []
             acc.generatedProps[styleProp][0] = { $$css: true, tailwind: propValue }
+            delete props[propName]
 
             return acc
         }
 
         if (isStyleProperty(propName)) {
             acc.generatedProps[propName] ??= []
             acc.generatedProps[propName][1] = propValue
+            delete props[propName]
 
             return acc
         }
@@ -85,11 +90,14 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
     )
 }
 
-const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (props: AnyObject) => {
+const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (originalProps: AnyObject) => {
     const uniwindContext = useUniwindContext()
+    const props = { ...originalProps }
 
     const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
-        const className = props[option.fromClassName]
+        // Read from original props because we're going to delete the prop from cloned props later
+        const className = originalProps[option.fromClassName]
+        delete props[option.fromClassName]
 
         if (className === undefined) {
             return acc

packages/uniwind/tests/web/hoc/withUniwind.test.tsx

@@ -20,7 +20,9 @@ describe('withUniwind', () => {
     })
 
     test('[auto] Should map className to style', () => {
-        const AutoWithUniwind = withUniwind(Component)
+        ComponentWithSpy.mockClear()
+
+        const AutoWithUniwind = withUniwind(ComponentWithSpy)
 
         const { getByTestId } = render(
             <AutoWithUniwind className="bg-red-500" testID="test-component" />,
@@ -30,6 +32,11 @@ describe('withUniwind', () => {
 
         expect(component).toBeInTheDocument()
         expect(component).toHaveClass('bg-red-500')
+
+        const receivedProps = ComponentWithSpy.mock.calls[0][0]
+
+        expect(receivedProps.style).toEqual([{ $$css: true, tailwind: 'bg-red-500' }])
+        expect(receivedProps).not.toHaveProperty('className')
     })
 
     test('[auto] Should map colorClassName to color', () => {
@@ -43,14 +50,14 @@ describe('withUniwind', () => {
         render(<AutoWithUniwind colorClassName="accent-red-500" testID="test-component" />)
 
         expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500', {
-            'colorClassName': 'accent-red-500',
             'testID': 'test-component',
         }, UNIWIND_CONTEXT_MOCK)
 
         const receivedProps = ComponentWithSpy.mock.calls[0][0]
 
         expect(receivedProps).toHaveProperty('color')
         expect(receivedProps.color).toBe(TW_RED_500)
+        expect(receivedProps).not.toHaveProperty('colorClassName')
     })
 
     test('[auto] Should add both inline style and className', () => {
@@ -78,10 +85,13 @@ describe('withUniwind', () => {
 
         expect(receivedProps).toHaveProperty('color')
         expect(receivedProps.color).toBe(TW_BLUE_500)
+        expect(receivedProps).not.toHaveProperty('colorClassName')
     })
 
     test('[manual] Should map testClassName to style', () => {
-        const ManualWithUniwind = withUniwind(Component, {
+        ComponentWithSpy.mockClear()
+
+        const ManualWithUniwind = withUniwind(ComponentWithSpy, {
             style: {
                 fromClassName: 'testClassName',
             },
@@ -95,6 +105,11 @@ describe('withUniwind', () => {
 
         expect(component).toBeInTheDocument()
         expect(component).toHaveClass('bg-red-500')
+
+        const receivedProps = ComponentWithSpy.mock.calls[0][0]
+
+        expect(receivedProps.style).toEqual([{ $$css: true, tailwind: 'bg-red-500' }, undefined])
+        expect(receivedProps).not.toHaveProperty('testClassName')
     })
 
     test('[manual] Should map testClassName to color', () => {
@@ -116,6 +131,7 @@ describe('withUniwind', () => {
 
         expect(receivedProps).toHaveProperty('color')
         expect(receivedProps.color).toBe(TW_RED_500)
+        expect(receivedProps).not.toHaveProperty('testClassName')
     })
 
     test('[manual] Should override colorClassName with inline color', () => {
@@ -134,6 +150,7 @@ describe('withUniwind', () => {
 
         expect(receivedProps).toHaveProperty('color')
         expect(receivedProps.color).toBe(TW_BLUE_500)
+        expect(receivedProps).not.toHaveProperty('colorClassName')
     })
 
     test('[manual] Should add both inline style and className', () => {