fix: pass data attributes to withUniwind

package.json

@@ -39,7 +39,7 @@
         "eslint": "9.39.1",
         "eslint-config-codemask": "2.2.1",
         "husky": "9.1.7",
-        "turbo": "2.8.17"
+        "turbo": "2.8.20"
     },
     "packageManager": "bun@1.3.10",
     "trustedDependencies": [

packages/uniwind/src/components/web/generateDataSet.ts

@@ -1,17 +1,19 @@
+const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
 export const generateDataSet = (props: Record<PropertyKey, any>) => {
     const dataSet: DataSet = props.dataSet !== undefined ? { ...props.dataSet } : {}
 
     Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('data-')) {
             // Remove data- prefix
-            dataSet[key.slice(5)] = value
+            dataSet[toCamelCase(key.slice(5))] = value
         }
     })
 
     return dataSet
 }
 
-type DataSet = Record<string, string | boolean>
+type DataSet = Record<string, string | boolean | undefined>
 
 declare module 'react-native' {
     interface SwitchProps {

packages/uniwind/src/core/web/getWebStyles.ts

@@ -1,3 +1,4 @@
+import { generateDataSet } from '../../components/web/generateDataSet'
 import { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
@@ -52,7 +53,11 @@ const getActiveStylesForClass = (className: string) => {
     return extractedStyles
 }
 
-export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
+export const getWebStyles = (
+    className: string | undefined,
+    componentProps: Record<string, unknown> | undefined,
+    uniwindContext: UniwindContextType,
+): RNStyle => {
     if (className === undefined) {
         return {}
     }
@@ -69,8 +74,22 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
+    const dataSet = generateDataSet(componentProps ?? {})
+
+    Object.entries(dataSet).forEach(([key, value]) => {
+        if (value === false || value === undefined) {
+            return
+        }
+
+        dummy.dataset[key] = String(value)
+    })
+
     const computedStyles = getActiveStylesForClass(className)
 
+    Object.keys(dataSet).forEach(key => {
+        delete dummy.dataset[key]
+    })
+
     return Object.fromEntries(
         Object.entries(computedStyles)
             .map(([key, value]) => {

packages/uniwind/src/hoc/withUniwind.native.tsx

@@ -26,7 +26,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
@@ -36,7 +36,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
         if (isClassProperty(propName)) {
             const styleProp = classToStyle(propName)
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[styleProp] ??= []
@@ -90,15 +90,15 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
 
             acc.generatedProps[propName] = styles[option.styleProperty]
             acc.dependencies.push(...dependencies)
 
             return acc
         }
 
-        const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+        const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
         acc.dependencies.push(...dependencies)
 
         if (!isStyleProperty(propName)) {

packages/uniwind/src/hoc/withUniwind.tsx

@@ -1,4 +1,5 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
@@ -26,7 +27,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             }
 
             const className = propValue
-            const color = getWebStyles(className, uniwindContext).accentColor
+            const color = getWebStyles(className, props, uniwindContext).accentColor
 
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
@@ -67,6 +68,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }
@@ -87,7 +89,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const value = getWebStyles(className, uniwindContext)[option.styleProperty]
+            const value = getWebStyles(className, props, uniwindContext)[option.styleProperty]
             const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
                 ? formatColor(value as string)
                 : value
@@ -115,6 +117,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }

packages/uniwind/src/hooks/useResolveClassNames.ts

@@ -8,9 +8,9 @@ const emptyState = {} as RNStyle
 export const useResolveClassNames = (className: string) => {
     const uniwindContext = useUniwindContext()
     const [styles, recreate] = useReducer(
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
         undefined,
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
     )
 
     useLayoutEffect(() => {

packages/uniwind/tests/e2e/getWebStyles.test.ts

@@ -19,7 +19,7 @@ async function getWebStyles(
 ) {
     return page.evaluate(
         ([cls, ctx]) => {
-            return window.__uniwind.getWebStyles(cls, ctx)
+            return window.__uniwind.getWebStyles(cls, undefined, ctx)
         },
         [className, context],
     )

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

@@ -138,4 +138,20 @@ describe('withUniwind', () => {
             borderColor: TW_BLUE_500,
         })
     })
+
+    it('Should pass data attributes to the wrapped component', () => {
+        const ManualWithUniwind = withUniwind(Component, {
+            style: {
+                fromClassName: 'className',
+            },
+        })
+
+        const { getStylesFromId } = renderUniwind(
+            <ManualWithUniwind className="data-test:bg-red-500" data-test testID="test-component" />,
+        )
+
+        expect(getStylesFromId('test-component')).toEqual({
+            backgroundColor: TW_RED_500,
+        })
+    })
 })

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

@@ -42,7 +42,10 @@ describe('withUniwind', () => {
 
         render(<AutoWithUniwind colorClassName="accent-red-500" testID="test-component" />)
 
-        expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500', UNIWIND_CONTEXT_MOCK)
+        expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500', {
+            'colorClassName': 'accent-red-500',
+            'testID': 'test-component',
+        }, UNIWIND_CONTEXT_MOCK)
 
         const receivedProps = ComponentWithSpy.mock.calls[0][0]