diff --git a/packages/uniwind/src/hoc/withUniwind.tsx b/packages/uniwind/src/hoc/withUniwind.tsx index 533fc7fb..29d78435 100644 --- a/packages/uniwind/src/hoc/withUniwind.tsx +++ b/packages/uniwind/src/hoc/withUniwind.tsx @@ -20,13 +20,16 @@ export const withUniwind: WithUniwind = < ? withManualUniwind(Component, options) : withAutoUniwind(Component) -const withAutoUniwind = (Component: Component) => (props: AnyObject) => { +const withAutoUniwind = (Component: Component) => (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,6 +57,7 @@ const withAutoUniwind = (Component: Component) => (props: AnyObject) acc.generatedProps[styleProp] ??= [] acc.generatedProps[styleProp][0] = { $$css: true, tailwind: propValue } + delete props[propName] return acc } @@ -61,6 +65,7 @@ const withAutoUniwind = (Component: Component) => (props: AnyObject) if (isStyleProperty(propName)) { acc.generatedProps[propName] ??= [] acc.generatedProps[propName][1] = propValue + delete props[propName] return acc } @@ -85,11 +90,14 @@ const withAutoUniwind = (Component: Component) => (props: AnyObject) ) } -const withManualUniwind = (Component: Component, options: Record) => (props: AnyObject) => { +const withManualUniwind = (Component: Component, options: Record) => (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 diff --git a/packages/uniwind/tests/web/hoc/withUniwind.test.tsx b/packages/uniwind/tests/web/hoc/withUniwind.test.tsx index 1e3511b9..c7fdbd9d 100644 --- a/packages/uniwind/tests/web/hoc/withUniwind.test.tsx +++ b/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( , @@ -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,7 +50,6 @@ describe('withUniwind', () => { render() expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500', { - 'colorClassName': 'accent-red-500', 'testID': 'test-component', }, UNIWIND_CONTEXT_MOCK) @@ -51,6 +57,7 @@ describe('withUniwind', () => { 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', () => {