From 0ac74411d946fa445dedeac332553b027d5757fb Mon Sep 17 00:00:00 2001
From: Jaydeep Agravat <jaydeepagravat94583@gmail.com>
Date: Thu, 5 Nov 2026 11:29:09 +0530
Subject: [PATCH 1/5] =?UTF-8?q?perf:=20cache=20native=20styles=20that=20us?=
 =?UTF-8?q?e=20data-[=E2=80=A6]=20variants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A class string with a data-[…] variant was never cached on native, so it
was resolved again on every render. Style records now carry the names of
the data-* attributes they read; the store collects them once per class
string and adds those props' values to the cache key, normalized the way
the generated match functions compare them.

Closes #733
---
 CONTEXT.md                                    |  6 +-
 .../css-processor/addMetaToStylesTemplate.ts  |  2 +-
 packages/uniwind/src/core/native/store.ts     | 78 ++++++++++++++-----
 packages/uniwind/src/core/types.ts            |  2 +-
 .../native/core/data-attributes-cache.test.ts | 72 +++++++++++++++++
 .../native/styles-parsing/matches.test.ts     |  4 +-
 6 files changed, 138 insertions(+), 26 deletions(-)
 create mode 100644 packages/uniwind/tests/native/core/data-attributes-cache.test.ts

diff --git a/CONTEXT.md b/CONTEXT.md
index e431f789..7ca14b8a 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -70,11 +70,11 @@ Native runtime:
 - Build output injects a generated stylesheet callback into `Uniwind.__reinit(...)`.
 - `UniwindStore` holds generated style records, theme variables, scoped variables, runtime state, and per-theme caches.
 - `UniwindStore.getStyles(className, props, state, context)` resolves classes into React Native style objects.
-- Cache keys include class names, component state, whether theme is scoped, layout direction, and a key derived from the merged `ScopedVariables` map.
+- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. Those attribute names are collected once per class string and reset on reinit; values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal, other strings match only themselves, other values never match).
 - During resolve, `ScopedVariables` overrides are overlaid onto a prototype-chained clone of the theme vars so unset variables fall through to the theme.
 - Resolved styles subscribe to only dependencies they use, then invalidate cache entries on change.
 - Runtime dependencies are represented by `StyleDependency`: theme, dimensions, orientation, insets, font scale, RTL, adaptive themes, and variables.
-- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry a boolean cache-bypass flag; condition metadata stays at build time.
+- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry the names of the `data-*` attributes they read so cache keys can include those props; expected values and other condition metadata stay at build time.
 - Native post-processing adapts CSS concepts to RN shapes, including line-height multipliers, shadows, transforms, gradients, visibility, borders, outlines, font variants, and filters.
 
 Web runtime:
@@ -147,7 +147,7 @@ Build-time stylesheet templates collect each rule as `{ style, meta }`: CSS decl
 
 Important concepts:
 
-- A runtime `Style` record stores entries, a generated `matches` function, a `hasDataAttributes` flag, dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
+- A runtime `Style` record stores entries, a generated `matches` function, the `data-*` attribute names it reads (or `null`), dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
 - Native property precedence is computed at build time from importance, cascade-layer priority, supported selector specificity, and compiled CSS order. Named layer statements, reopened layers, nested layers, anonymous layers, and unlayered rules participate; important declarations reverse layer priority. Every important rank is above every normal rank. Runtime resolution filters matching rules and compares the appropriate rank per property, independent of className token order or minimum-width priority.
 - Specificity covers the selectors native already supports: classes, state pseudo-classes and data attributes contribute; `:where(...)` and media queries do not. Nested selectors inherit their parent's specificity. This is author-rule precedence for supported selectors, not a general DOM selector engine or support for inheritance, animations, transitions, `@scope`, or `revert-layer`.
 - CSS variables live in `vars`; theme and platform-scoped variables live in `scopedVars` with internal prefixes.
diff --git a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
index 3e5a7cd5..f7dc5d59 100644
--- a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
+++ b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
@@ -128,7 +128,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder) => {
                 return {
                     entries,
                     matches,
-                    hasDataAttributes: dataAttributes !== null,
+                    dataAttributeNames: dataAttributes !== null ? Object.keys(dataAttributes).map(makeSafeForSerialization) : null,
                     dependencies: dependencies.size > 0 ? Array.from(dependencies) : null,
                     index,
                     className: makeSafeForSerialization(className),
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index 65c2314d..efcf3219 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -21,11 +21,34 @@ type StylesResult = {
 
 const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum: 0 }
 
+const splitClassNames = (classNames: string) =>
+    classNames.includes('\n')
+        ? classNames.split(/\s+/).filter(Boolean)
+        : classNames.split(' ')
+
+// Reduces a data attribute value to what the generated match functions can tell apart:
+// true and "true" match the same rules, so do false and "false", other strings only match
+// themselves, and any other value never matches.
+const toDataAttributeCacheValue = (value: unknown) => {
+    if (value === true || value === 'true') {
+        return true
+    }
+
+    if (value === false || value === 'false') {
+        return false
+    }
+
+    return typeof value === 'string' ? value : null
+}
+
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
     vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
     private cache = {} as Record<ThemeName, Map<string, StylesResult>>
+    // The stylesheet doesn't change between reinits, so the data attributes a class string
+    // depends on are worked out once per class string
+    private dataAttributeNamesCache = new Map<string, Array<string>>()
 
     getStyles(
         className: string | undefined,
@@ -40,7 +63,7 @@ class UniwindStoreBuilder {
         const isScopedTheme = uniwindContext.scopedTheme !== null
         const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}${isScopedTheme}${
             uniwindContext.rtl ?? ''
-        }${uniwindContext.variables?.__uniwindVariablesCacheKey ?? ''}`
+        }${uniwindContext.variables?.__uniwindVariablesCacheKey ?? ''}${this.getDataAttributesCacheKey(className, componentProps)}`
         const cache = this.cache[uniwindContext.scopedTheme ?? this.runtime.currentThemeName]
 
         if (!cache) {
@@ -53,19 +76,43 @@ class UniwindStoreBuilder {
 
         const result = this.resolveStyles(className, componentProps, state, uniwindContext)
 
-        // Don't cache styles that depend on data attributes
-        if (!result.hasDataAttributes) {
-            cache.set(cacheKey, result)
-            UniwindListener.subscribe(
-                () => cache.delete(cacheKey),
-                result.dependencies,
-                { once: true },
-            )
-        }
+        cache.set(cacheKey, result)
+        UniwindListener.subscribe(
+            () => cache.delete(cacheKey),
+            result.dependencies,
+            { once: true },
+        )
 
         return result
     }
 
+    private getDataAttributesCacheKey(className: string, componentProps: Record<string, any> | undefined) {
+        let dataAttributeNames = this.dataAttributeNamesCache.get(className)
+
+        if (dataAttributeNames === undefined) {
+            const names = new Set<string>()
+
+            for (const token of splitClassNames(className)) {
+                if (!(token in this.stylesheet)) {
+                    continue
+                }
+
+                for (const style of this.stylesheet[token] as Array<Style>) {
+                    style.dataAttributeNames?.forEach(name => names.add(name))
+                }
+            }
+
+            dataAttributeNames = Array.from(names)
+            this.dataAttributeNamesCache.set(className, dataAttributeNames)
+        }
+
+        if (dataAttributeNames.length === 0) {
+            return ''
+        }
+
+        return JSON.stringify(dataAttributeNames.map(name => toDataAttributeCacheValue(componentProps?.[name])))
+    }
+
     reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
         const config = generateStyleSheetCallback(this.runtime)
         const { scopedVars, stylesheet, vars } = config
@@ -94,6 +141,7 @@ class UniwindStoreBuilder {
             return [theme, clonedVars]
         }))
         this.cache = Object.fromEntries(themes.map(theme => [theme, new Map()]))
+        this.dataAttributeNamesCache = new Map()
 
         if (__DEV__) {
             UniwindListener.notifyAll()
@@ -118,14 +166,11 @@ class UniwindStoreBuilder {
                 getScopedVars(uniwindContext.variables),
             )
         const originalVars = vars
-        let hasDataAttributes = false
         const dependencies = new Set<StyleDependency>()
         let dependencySum = 0
         const bestRanks = new Map<string, number>()
         const isScopedTheme = uniwindContext.scopedTheme !== null
-        const classNameTokens = classNames.includes('\n')
-            ? classNames.split(/\s+/).filter(Boolean)
-            : classNames.split(' ')
+        const classNameTokens = splitClassNames(classNames)
 
         for (const className of classNameTokens) {
             if (!(className in this.stylesheet)) {
@@ -144,10 +189,6 @@ class UniwindStoreBuilder {
                     })
                 }
 
-                if (style.hasDataAttributes) {
-                    hasDataAttributes = true
-                }
-
                 if (!style.matches(this.runtime, uniwindContext, componentProps, state, vars)) {
                     continue
                 }
@@ -226,7 +267,6 @@ class UniwindStoreBuilder {
             styles: result,
             dependencies: Array.from(dependencies),
             dependencySum,
-            hasDataAttributes,
         }
     }
 
diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts
index bcccba43..65d68129 100644
--- a/packages/uniwind/src/core/types.ts
+++ b/packages/uniwind/src/core/types.ts
@@ -15,7 +15,7 @@ export type Style = {
         state: ComponentState | undefined,
         vars: Vars,
     ) => boolean
-    hasDataAttributes: boolean
+    dataAttributeNames: Array<string> | null
     dependencies: Array<StyleDependency> | null
     index: number
     className: string
diff --git a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
new file mode 100644
index 00000000..eb2611a0
--- /dev/null
+++ b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
@@ -0,0 +1,72 @@
+import { UniwindStore } from '../../../src/core/native/store'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
+
+const context = { scopedTheme: null, rtl: null, variables: null }
+const plain = 'bg-blue-500 opacity-50'
+const withData = 'bg-blue-500 data-[active=true]:bg-red-500'
+const withNumberLikeValue = 'bg-blue-500 data-[x=1]:bg-red-500'
+
+const countResolves = (run: () => void) => {
+    const spy = jest.spyOn(UniwindStore as any, 'resolveStyles')
+
+    run()
+
+    const calls = spy.mock.calls.length
+
+    spy.mockRestore()
+
+    return calls
+}
+
+const getBackground = (className: string, props?: Record<string, any>) =>
+    UniwindStore.getStyles(className, props, undefined, context).styles.backgroundColor
+
+describe('Caching styles that use data attributes', () => {
+    test('resolves a class string with a data variant only once for the same props', () => {
+        const calls = countResolves(() => {
+            for (let i = 0; i < 1000; i++) {
+                getBackground(withData, { 'data-active': true })
+            }
+        })
+
+        expect(calls).toBe(1)
+    })
+
+    test('returns the right style when a data attribute changes, and caches each value', () => {
+        const calls = countResolves(() => {
+            expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
+            expect(getBackground(withData, { 'data-active': false })).toBe(TW_BLUE_500)
+            expect(getBackground(withData, undefined)).toBe(TW_BLUE_500)
+            expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
+            expect(getBackground(withData, { 'data-active': false })).toBe(TW_BLUE_500)
+        })
+
+        expect(calls).toBe(3)
+    })
+
+    test('treats true and "true" as the same value, like the match function does', () => {
+        const calls = countResolves(() => {
+            expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
+            expect(getBackground(withData, { 'data-active': 'true' })).toBe(TW_RED_500)
+        })
+
+        expect(calls).toBe(1)
+    })
+
+    test('keeps number and string values apart', () => {
+        expect(getBackground(withNumberLikeValue, { 'data-x': '1' })).toBe(TW_RED_500)
+        expect(getBackground(withNumberLikeValue, { 'data-x': 1 })).toBe(TW_BLUE_500)
+        expect(getBackground(withNumberLikeValue, { 'data-x': '1' })).toBe(TW_RED_500)
+    })
+
+    test('ignores data props that the class string does not use', () => {
+        const calls = countResolves(() => {
+            getBackground(withData, { 'data-active': true, 'data-testid': 'a' })
+            getBackground(withData, { 'data-active': true, 'data-testid': 'b' })
+            getBackground(plain, { 'data-testid': 'a' })
+            getBackground(plain, { 'data-testid': 'b' })
+        })
+
+        expect(calls).toBe(2)
+    })
+})
diff --git a/packages/uniwind/tests/native/styles-parsing/matches.test.ts b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
index e5c83b76..df6cac05 100644
--- a/packages/uniwind/tests/native/styles-parsing/matches.test.ts
+++ b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
@@ -227,7 +227,7 @@ describe('Generated style match functions', () => {
         expect(style.dependencies).toEqual(
             expect.arrayContaining([StyleDependency.Theme, StyleDependency.Rtl, StyleDependency.Orientation, StyleDependency.Dimensions]),
         )
-        expect(style.hasDataAttributes).toBe(true)
+        expect(style.dataAttributeNames).toEqual(['data-ready', 'data-mode'])
     })
 
     test('matches color scheme using the scoped theme and subscribes to theme changes', () => {
@@ -258,7 +258,7 @@ describe('Generated style match functions', () => {
 
         expect(style.matches(UniwindStore.runtime, context, undefined, undefined, {})).toBe(true)
         expect(style.dependencies).toBeNull()
-        expect(style.hasDataAttributes).toBe(false)
+        expect(style.dataAttributeNames).toBeNull()
     })
 })
 

From 53011ba1a83dabd9fec6d560cf52938baf18231c Mon Sep 17 00:00:00 2001
From: Jaydeep Agravat <jaydeepagravat94583@gmail.com>
Date: Thu, 5 Nov 2026 12:14:43 +0530
Subject: [PATCH 2/5] perf: share one cache entry for data values no rule
 expects

Style records now carry each data attribute's expected value, not just its
name. Any prop value that none of a class string's rules expect can't match
them, so all such values map to one key part, and the cache no longer grows
with arbitrary values like per-item ids or typed text.
---
 CONTEXT.md                                    |  6 +--
 .../css-processor/addMetaToStylesTemplate.ts  | 17 +++++++-
 packages/uniwind/src/core/native/store.ts     | 43 ++++++++++++-------
 packages/uniwind/src/core/types.ts            |  2 +-
 .../native/core/data-attributes-cache.test.ts | 22 +++++++++-
 .../native/styles-parsing/matches.test.ts     |  4 +-
 6 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/CONTEXT.md b/CONTEXT.md
index 7ca14b8a..5b971592 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -70,11 +70,11 @@ Native runtime:
 - Build output injects a generated stylesheet callback into `Uniwind.__reinit(...)`.
 - `UniwindStore` holds generated style records, theme variables, scoped variables, runtime state, and per-theme caches.
 - `UniwindStore.getStyles(className, props, state, context)` resolves classes into React Native style objects.
-- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. Those attribute names are collected once per class string and reset on reinit; values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal, other strings match only themselves, other values never match).
+- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. The attributes and the values its rules expect are collected once per class string and reset on reinit. Prop values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal), and every value that no rule expects shares one key, so arbitrary prop values don't grow the cache.
 - During resolve, `ScopedVariables` overrides are overlaid onto a prototype-chained clone of the theme vars so unset variables fall through to the theme.
 - Resolved styles subscribe to only dependencies they use, then invalidate cache entries on change.
 - Runtime dependencies are represented by `StyleDependency`: theme, dimensions, orientation, insets, font scale, RTL, adaptive themes, and variables.
-- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry the names of the `data-*` attributes they read so cache keys can include those props; expected values and other condition metadata stay at build time.
+- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry the `data-*` attributes they read with their expected values so cache keys can include those props; other condition metadata stays at build time.
 - Native post-processing adapts CSS concepts to RN shapes, including line-height multipliers, shadows, transforms, gradients, visibility, borders, outlines, font variants, and filters.
 
 Web runtime:
@@ -147,7 +147,7 @@ Build-time stylesheet templates collect each rule as `{ style, meta }`: CSS decl
 
 Important concepts:
 
-- A runtime `Style` record stores entries, a generated `matches` function, the `data-*` attribute names it reads (or `null`), dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
+- A runtime `Style` record stores entries, a generated `matches` function, the `data-*` attributes it reads with their expected values (or `null`), dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
 - Native property precedence is computed at build time from importance, cascade-layer priority, supported selector specificity, and compiled CSS order. Named layer statements, reopened layers, nested layers, anonymous layers, and unlayered rules participate; important declarations reverse layer priority. Every important rank is above every normal rank. Runtime resolution filters matching rules and compares the appropriate rank per property, independent of className token order or minimum-width priority.
 - Specificity covers the selectors native already supports: classes, state pseudo-classes and data attributes contribute; `:where(...)` and media queries do not. Nested selectors inherit their parent's specificity. This is author-rule precedence for supported selectors, not a general DOM selector engine or support for inheritance, animations, transitions, `@scope`, or `revert-layer`.
 - CSS variables live in `vars`; theme and platform-scoped variables live in `scopedVars` with internal prefixes.
diff --git a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
index f7dc5d59..0536d0b0 100644
--- a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
+++ b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
@@ -28,6 +28,21 @@ const makeSafeForSerialization = (value: any) => {
     return value
 }
 
+// The value each data attribute must have, normalized the way the generated match function
+// compares it: "true" and "false" also match the booleans, so they're emitted as booleans
+const getDataAttributeValues = (dataAttributes: Record<string, string>) =>
+    Object.fromEntries(
+        Object.entries(dataAttributes).map(([name, expected]) => {
+            const value = JSON.parse(expected)
+
+            if (value === 'true' || value === 'false') {
+                return [name, value === 'true']
+            }
+
+            return [name, makeSafeForSerialization(value)]
+        }),
+    )
+
 const hasThemedVarDependency = (varName: string, Processor: ProcessorBuilder, visited = new Set<string>()): boolean => {
     if (visited.has(varName)) {
         return false
@@ -128,7 +143,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder) => {
                 return {
                     entries,
                     matches,
-                    dataAttributeNames: dataAttributes !== null ? Object.keys(dataAttributes).map(makeSafeForSerialization) : null,
+                    dataAttributeValues: dataAttributes !== null ? getDataAttributeValues(dataAttributes) : null,
                     dependencies: dependencies.size > 0 ? Array.from(dependencies) : null,
                     index,
                     className: makeSafeForSerialization(className),
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index efcf3219..32d8450b 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -26,9 +26,7 @@ const splitClassNames = (classNames: string) =>
         ? classNames.split(/\s+/).filter(Boolean)
         : classNames.split(' ')
 
-// Reduces a data attribute value to what the generated match functions can tell apart:
-// true and "true" match the same rules, so do false and "false", other strings only match
-// themselves, and any other value never matches.
+// The generated match functions treat true and "true" alike, and false and "false" alike
 const toDataAttributeCacheValue = (value: unknown) => {
     if (value === true || value === 'true') {
         return true
@@ -38,7 +36,7 @@ const toDataAttributeCacheValue = (value: unknown) => {
         return false
     }
 
-    return typeof value === 'string' ? value : null
+    return value
 }
 
 class UniwindStoreBuilder {
@@ -47,8 +45,8 @@ class UniwindStoreBuilder {
     private stylesheet = {} as StyleSheets
     private cache = {} as Record<ThemeName, Map<string, StylesResult>>
     // The stylesheet doesn't change between reinits, so the data attributes a class string
-    // depends on are worked out once per class string
-    private dataAttributeNamesCache = new Map<string, Array<string>>()
+    // depends on, and the values its rules look for, are worked out once per class string
+    private dataAttributesCache = new Map<string, Array<[string, Set<unknown>]>>()
 
     getStyles(
         className: string | undefined,
@@ -87,10 +85,10 @@ class UniwindStoreBuilder {
     }
 
     private getDataAttributesCacheKey(className: string, componentProps: Record<string, any> | undefined) {
-        let dataAttributeNames = this.dataAttributeNamesCache.get(className)
+        let dataAttributes = this.dataAttributesCache.get(className)
 
-        if (dataAttributeNames === undefined) {
-            const names = new Set<string>()
+        if (dataAttributes === undefined) {
+            const valuesByName = new Map<string, Set<unknown>>()
 
             for (const token of splitClassNames(className)) {
                 if (!(token in this.stylesheet)) {
@@ -98,19 +96,34 @@ class UniwindStoreBuilder {
                 }
 
                 for (const style of this.stylesheet[token] as Array<Style>) {
-                    style.dataAttributeNames?.forEach(name => names.add(name))
+                    for (const [name, value] of Object.entries(style.dataAttributeValues ?? {})) {
+                        let values = valuesByName.get(name)
+
+                        if (!values) {
+                            values = new Set()
+                            valuesByName.set(name, values)
+                        }
+
+                        values.add(value)
+                    }
                 }
             }
 
-            dataAttributeNames = Array.from(names)
-            this.dataAttributeNamesCache.set(className, dataAttributeNames)
+            dataAttributes = Array.from(valuesByName)
+            this.dataAttributesCache.set(className, dataAttributes)
         }
 
-        if (dataAttributeNames.length === 0) {
+        if (dataAttributes.length === 0) {
             return ''
         }
 
-        return JSON.stringify(dataAttributeNames.map(name => toDataAttributeCacheValue(componentProps?.[name])))
+        // A value that none of the rules look for can't match any of them, so all such values
+        // share one key. This keeps the cache from growing with arbitrary prop values.
+        return JSON.stringify(dataAttributes.map(([name, values]) => {
+            const value = toDataAttributeCacheValue(componentProps?.[name])
+
+            return values.has(value) ? value : null
+        }))
     }
 
     reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
@@ -141,7 +154,7 @@ class UniwindStoreBuilder {
             return [theme, clonedVars]
         }))
         this.cache = Object.fromEntries(themes.map(theme => [theme, new Map()]))
-        this.dataAttributeNamesCache = new Map()
+        this.dataAttributesCache = new Map()
 
         if (__DEV__) {
             UniwindListener.notifyAll()
diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts
index 65d68129..5e17dac4 100644
--- a/packages/uniwind/src/core/types.ts
+++ b/packages/uniwind/src/core/types.ts
@@ -15,7 +15,7 @@ export type Style = {
         state: ComponentState | undefined,
         vars: Vars,
     ) => boolean
-    dataAttributeNames: Array<string> | null
+    dataAttributeValues: Record<string, unknown> | null
     dependencies: Array<StyleDependency> | null
     index: number
     className: string
diff --git a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
index eb2611a0..e4795632 100644
--- a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
+++ b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
@@ -5,6 +5,9 @@ const context = { scopedTheme: null, rtl: null, variables: null }
 const plain = 'bg-blue-500 opacity-50'
 const withData = 'bg-blue-500 data-[active=true]:bg-red-500'
 const withNumberLikeValue = 'bg-blue-500 data-[x=1]:bg-red-500'
+const withStringValue = 'bg-blue-500 data-[state=open]:bg-red-500'
+
+const getCacheSize = () => (UniwindStore as any).cache[UniwindStore.runtime.currentThemeName].size as number
 
 const countResolves = (run: () => void) => {
     const spy = jest.spyOn(UniwindStore as any, 'resolveStyles')
@@ -41,7 +44,8 @@ describe('Caching styles that use data attributes', () => {
             expect(getBackground(withData, { 'data-active': false })).toBe(TW_BLUE_500)
         })
 
-        expect(calls).toBe(3)
+        // false and a missing prop can't match data-[active=true], so they share an entry
+        expect(calls).toBe(2)
     })
 
     test('treats true and "true" as the same value, like the match function does', () => {
@@ -59,6 +63,22 @@ describe('Caching styles that use data attributes', () => {
         expect(getBackground(withNumberLikeValue, { 'data-x': '1' })).toBe(TW_RED_500)
     })
 
+    test('shares one cache entry for values that no rule matches', () => {
+        const sizeBefore = getCacheSize()
+        const calls = countResolves(() => {
+            for (let i = 0; i < 100; i++) {
+                expect(getBackground(withStringValue, { 'data-state': `item-${i}` })).toBe(TW_BLUE_500)
+            }
+
+            expect(getBackground(withStringValue, { 'data-state': 'open' })).toBe(TW_RED_500)
+            expect(getBackground(withStringValue, { 'data-state': { open: true } })).toBe(TW_BLUE_500)
+            expect(getBackground(withStringValue, undefined)).toBe(TW_BLUE_500)
+        })
+
+        expect(calls).toBe(2)
+        expect(getCacheSize() - sizeBefore).toBe(2)
+    })
+
     test('ignores data props that the class string does not use', () => {
         const calls = countResolves(() => {
             getBackground(withData, { 'data-active': true, 'data-testid': 'a' })
diff --git a/packages/uniwind/tests/native/styles-parsing/matches.test.ts b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
index df6cac05..e0c89fa2 100644
--- a/packages/uniwind/tests/native/styles-parsing/matches.test.ts
+++ b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
@@ -227,7 +227,7 @@ describe('Generated style match functions', () => {
         expect(style.dependencies).toEqual(
             expect.arrayContaining([StyleDependency.Theme, StyleDependency.Rtl, StyleDependency.Orientation, StyleDependency.Dimensions]),
         )
-        expect(style.dataAttributeNames).toEqual(['data-ready', 'data-mode'])
+        expect(style.dataAttributeValues).toEqual({ 'data-ready': true, 'data-mode': 'on' })
     })
 
     test('matches color scheme using the scoped theme and subscribes to theme changes', () => {
@@ -258,7 +258,7 @@ describe('Generated style match functions', () => {
 
         expect(style.matches(UniwindStore.runtime, context, undefined, undefined, {})).toBe(true)
         expect(style.dependencies).toBeNull()
-        expect(style.dataAttributeNames).toBeNull()
+        expect(style.dataAttributeValues).toBeNull()
     })
 })
 

From 83d1c8ecddecffaa9004c171370c5dc437832639 Mon Sep 17 00:00:00 2001
From: Jaydeep Agravat <jaydeepagravat94583@gmail.com>
Date: Thu, 5 Nov 2026 18:05:51 +0530
Subject: [PATCH 3/5] perf: keep the first resolve of class strings as cheap as
 before

Data attributes are now collected in the loop resolveStyles already runs,
instead of a second pass over every class string. They're stored in the
style cache under the key without data values, so class strings without
data variants are looked up and stored exactly as on main, and nothing
extra is kept for them.
---
 CONTEXT.md                                    |   2 +-
 packages/uniwind/src/core/native/store.ts     | 130 +++++++++---------
 .../native/core/data-attributes-cache.test.ts |  33 ++++-
 3 files changed, 99 insertions(+), 66 deletions(-)

diff --git a/CONTEXT.md b/CONTEXT.md
index 5b971592..f5f5b8ad 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -70,7 +70,7 @@ Native runtime:
 - Build output injects a generated stylesheet callback into `Uniwind.__reinit(...)`.
 - `UniwindStore` holds generated style records, theme variables, scoped variables, runtime state, and per-theme caches.
 - `UniwindStore.getStyles(className, props, state, context)` resolves classes into React Native style objects.
-- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. The attributes and the values its rules expect are collected once per class string and reset on reinit. Prop values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal), and every value that no rule expects shares one key, so arbitrary prop values don't grow the cache.
+- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. The first resolve of a class string collects those attributes and the values its rules expect, and stores them in the cache under the key without data values; class strings without data variants are cached under that key as before. Prop values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal), and every value that no rule expects shares one key, so arbitrary prop values don't grow the cache.
 - During resolve, `ScopedVariables` overrides are overlaid onto a prototype-chained clone of the theme vars so unset variables fall through to the theme.
 - Resolved styles subscribe to only dependencies they use, then invalidate cache entries on change.
 - Runtime dependencies are represented by `StyleDependency`: theme, dimensions, orientation, insets, font scale, RTL, adaptive themes, and variables.
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index 32d8450b..6af834d6 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -21,10 +21,13 @@ type StylesResult = {
 
 const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum: 0 }
 
-const splitClassNames = (classNames: string) =>
-    classNames.includes('\n')
-        ? classNames.split(/\s+/).filter(Boolean)
-        : classNames.split(' ')
+type DataAttributes = Array<[string, Set<unknown>]>
+
+// Stored under a class string's plain cache key when its rules read data attributes. It says
+// which props, and which of their values, to add to the key
+class DataAttributesEntry {
+    constructor(readonly dataAttributes: DataAttributes) {}
+}
 
 // The generated match functions treat true and "true" alike, and false and "false" alike
 const toDataAttributeCacheValue = (value: unknown) => {
@@ -39,14 +42,20 @@ const toDataAttributeCacheValue = (value: unknown) => {
     return value
 }
 
+// A value that none of the rules look for can't match any of them, so all such values
+// share one key. This keeps the cache from growing with arbitrary prop values.
+const getDataAttributesCacheKey = (dataAttributes: DataAttributes, componentProps: Record<string, any> | undefined) =>
+    JSON.stringify(dataAttributes.map(([name, values]) => {
+        const value = toDataAttributeCacheValue(componentProps?.[name])
+
+        return values.has(value) ? value : null
+    }))
+
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
     vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
-    private cache = {} as Record<ThemeName, Map<string, StylesResult>>
-    // The stylesheet doesn't change between reinits, so the data attributes a class string
-    // depends on, and the values its rules look for, are worked out once per class string
-    private dataAttributesCache = new Map<string, Array<[string, Set<unknown>]>>()
+    private cache = {} as Record<ThemeName, Map<string, StylesResult | DataAttributesEntry>>
 
     getStyles(
         className: string | undefined,
@@ -59,71 +68,48 @@ class UniwindStoreBuilder {
         }
 
         const isScopedTheme = uniwindContext.scopedTheme !== null
-        const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}${isScopedTheme}${
+        const baseCacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}${isScopedTheme}${
             uniwindContext.rtl ?? ''
-        }${uniwindContext.variables?.__uniwindVariablesCacheKey ?? ''}${this.getDataAttributesCacheKey(className, componentProps)}`
+        }${uniwindContext.variables?.__uniwindVariablesCacheKey ?? ''}`
         const cache = this.cache[uniwindContext.scopedTheme ?? this.runtime.currentThemeName]
 
         if (!cache) {
             return emptyState
         }
 
-        if (cache.has(cacheKey)) {
-            return cache.get(cacheKey)!
-        }
-
-        const result = this.resolveStyles(className, componentProps, state, uniwindContext)
-
-        cache.set(cacheKey, result)
-        UniwindListener.subscribe(
-            () => cache.delete(cacheKey),
-            result.dependencies,
-            { once: true },
-        )
-
-        return result
-    }
-
-    private getDataAttributesCacheKey(className: string, componentProps: Record<string, any> | undefined) {
-        let dataAttributes = this.dataAttributesCache.get(className)
-
-        if (dataAttributes === undefined) {
-            const valuesByName = new Map<string, Set<unknown>>()
-
-            for (const token of splitClassNames(className)) {
-                if (!(token in this.stylesheet)) {
-                    continue
-                }
+        const entry = cache.get(baseCacheKey)
+        let cacheKey = baseCacheKey
 
-                for (const style of this.stylesheet[token] as Array<Style>) {
-                    for (const [name, value] of Object.entries(style.dataAttributeValues ?? {})) {
-                        let values = valuesByName.get(name)
+        if (entry instanceof DataAttributesEntry) {
+            cacheKey += getDataAttributesCacheKey(entry.dataAttributes, componentProps)
 
-                        if (!values) {
-                            values = new Set()
-                            valuesByName.set(name, values)
-                        }
+            const cached = cache.get(cacheKey)
 
-                        values.add(value)
-                    }
-                }
+            if (cached !== undefined) {
+                return cached as StylesResult
             }
-
-            dataAttributes = Array.from(valuesByName)
-            this.dataAttributesCache.set(className, dataAttributes)
+        } else if (entry !== undefined) {
+            return entry
         }
 
-        if (dataAttributes.length === 0) {
-            return ''
+        const { stylesResult, dataAttributes } = this.resolveStyles(className, componentProps, state, uniwindContext)
+
+        // The first resolve of a class string with data variants is what finds its data attributes
+        if (entry === undefined && dataAttributes !== null) {
+            cache.set(baseCacheKey, new DataAttributesEntry(dataAttributes))
+            cacheKey += getDataAttributesCacheKey(dataAttributes, componentProps)
         }
 
-        // A value that none of the rules look for can't match any of them, so all such values
-        // share one key. This keeps the cache from growing with arbitrary prop values.
-        return JSON.stringify(dataAttributes.map(([name, values]) => {
-            const value = toDataAttributeCacheValue(componentProps?.[name])
+        const storeKey = cacheKey
 
-            return values.has(value) ? value : null
-        }))
+        cache.set(storeKey, stylesResult)
+        UniwindListener.subscribe(
+            () => cache.delete(storeKey),
+            stylesResult.dependencies,
+            { once: true },
+        )
+
+        return stylesResult
     }
 
     reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
@@ -154,7 +140,6 @@ class UniwindStoreBuilder {
             return [theme, clonedVars]
         }))
         this.cache = Object.fromEntries(themes.map(theme => [theme, new Map()]))
-        this.dataAttributesCache = new Map()
 
         if (__DEV__) {
             UniwindListener.notifyAll()
@@ -183,7 +168,10 @@ class UniwindStoreBuilder {
         let dependencySum = 0
         const bestRanks = new Map<string, number>()
         const isScopedTheme = uniwindContext.scopedTheme !== null
-        const classNameTokens = splitClassNames(classNames)
+        let dataAttributes: Map<string, Set<unknown>> | null = null
+        const classNameTokens = classNames.includes('\n')
+            ? classNames.split(/\s+/).filter(Boolean)
+            : classNames.split(' ')
 
         for (const className of classNameTokens) {
             if (!(className in this.stylesheet)) {
@@ -202,6 +190,21 @@ class UniwindStoreBuilder {
                     })
                 }
 
+                if (style.dataAttributeValues !== null) {
+                    dataAttributes ??= new Map()
+
+                    for (const [name, value] of Object.entries(style.dataAttributeValues)) {
+                        let values = dataAttributes.get(name)
+
+                        if (!values) {
+                            values = new Set()
+                            dataAttributes.set(name, values)
+                        }
+
+                        values.add(value)
+                    }
+                }
+
                 if (!style.matches(this.runtime, uniwindContext, componentProps, state, vars)) {
                     continue
                 }
@@ -277,9 +280,12 @@ class UniwindStoreBuilder {
         }
 
         return {
-            styles: result,
-            dependencies: Array.from(dependencies),
-            dependencySum,
+            stylesResult: {
+                styles: result,
+                dependencies: Array.from(dependencies),
+                dependencySum,
+            } satisfies StylesResult,
+            dataAttributes: dataAttributes !== null ? Array.from(dataAttributes) : null,
         }
     }
 
diff --git a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
index e4795632..045ac263 100644
--- a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
+++ b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
@@ -7,7 +7,9 @@ const withData = 'bg-blue-500 data-[active=true]:bg-red-500'
 const withNumberLikeValue = 'bg-blue-500 data-[x=1]:bg-red-500'
 const withStringValue = 'bg-blue-500 data-[state=open]:bg-red-500'
 
-const getCacheSize = () => (UniwindStore as any).cache[UniwindStore.runtime.currentThemeName].size as number
+const getCachedEntries = () => Array.from((UniwindStore as any).cache[UniwindStore.runtime.currentThemeName].entries()) as Array<[string, object]>
+// Cached style results, without the entries that record which data attributes a class string reads
+const getStylesCacheSize = () => getCachedEntries().filter(([, entry]) => 'styles' in entry).length
 
 const countResolves = (run: () => void) => {
     const spy = jest.spyOn(UniwindStore as any, 'resolveStyles')
@@ -64,7 +66,7 @@ describe('Caching styles that use data attributes', () => {
     })
 
     test('shares one cache entry for values that no rule matches', () => {
-        const sizeBefore = getCacheSize()
+        const sizeBefore = getStylesCacheSize()
         const calls = countResolves(() => {
             for (let i = 0; i < 100; i++) {
                 expect(getBackground(withStringValue, { 'data-state': `item-${i}` })).toBe(TW_BLUE_500)
@@ -76,7 +78,7 @@ describe('Caching styles that use data attributes', () => {
         })
 
         expect(calls).toBe(2)
-        expect(getCacheSize() - sizeBefore).toBe(2)
+        expect(getStylesCacheSize() - sizeBefore).toBe(2)
     })
 
     test('ignores data props that the class string does not use', () => {
@@ -89,4 +91,29 @@ describe('Caching styles that use data attributes', () => {
 
         expect(calls).toBe(2)
     })
+
+    test('does no data attribute work for class strings without data variants', () => {
+        const className = 'opacity-50 bg-blue-500'
+        const calls = countResolves(() => {
+            for (let i = 0; i < 100; i++) {
+                getBackground(className, { 'data-testid': `item-${i}` })
+            }
+        })
+
+        expect(calls).toBe(1)
+        expect(getCachedEntries().filter(([key]) => key.startsWith(className))).toEqual([
+            [expect.any(String), expect.objectContaining({ styles: expect.any(Object) })],
+        ])
+    })
+
+    test('stores the first result of a new class string under its data values', () => {
+        const className = 'opacity-50 data-[active=true]:bg-red-500'
+        const calls = countResolves(() => {
+            expect(getBackground(className, { 'data-active': true })).toBe(TW_RED_500)
+            expect(getBackground(className, { 'data-active': false })).toBe(undefined)
+            expect(getBackground(className, { 'data-active': true })).toBe(TW_RED_500)
+        })
+
+        expect(calls).toBe(2)
+    })
 })

From 54a9cc0469e9c644b83db6156b7b41cc18f8e87d Mon Sep 17 00:00:00 2001
From: Jaydeep Agravat <jaydeepagravat94583@gmail.com>
Date: Fri, 6 Nov 2026 11:35:45 +0530
Subject: [PATCH 4/5] refactor: key data variant styles by raw prop values

Following review: style records carry only the data attribute names
again, a separate map from class string to names is filled in
resolveStyles and cleared in reinit, and the key part is the raw prop
values. This drops the expected-value handling, which had to match the
generated match functions exactly.
---
 CONTEXT.md                                    |   6 +-
 .../css-processor/addMetaToStylesTemplate.ts  |  17 +--
 packages/uniwind/src/core/native/store.ts     | 101 ++++++------------
 packages/uniwind/src/core/types.ts            |   2 +-
 .../native/core/data-attributes-cache.test.ts |  45 ++------
 .../native/styles-parsing/matches.test.ts     |   4 +-
 6 files changed, 50 insertions(+), 125 deletions(-)

diff --git a/CONTEXT.md b/CONTEXT.md
index f5f5b8ad..14393e6f 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -70,11 +70,11 @@ Native runtime:
 - Build output injects a generated stylesheet callback into `Uniwind.__reinit(...)`.
 - `UniwindStore` holds generated style records, theme variables, scoped variables, runtime state, and per-theme caches.
 - `UniwindStore.getStyles(className, props, state, context)` resolves classes into React Native style objects.
-- Cache keys include class names, component state, whether theme is scoped, layout direction, a key derived from the merged `ScopedVariables` map, and the values of the `data-*` props the class string's rules use. The first resolve of a class string collects those attributes and the values its rules expect, and stores them in the cache under the key without data values; class strings without data variants are cached under that key as before. Prop values are normalized the way match predicates compare them (`true`/`"true"` and `false`/`"false"` are equal), and every value that no rule expects shares one key, so arbitrary prop values don't grow the cache.
+- Cache keys include class names, component state, whether theme is scoped, layout direction, and a key derived from the merged `ScopedVariables` map. Class strings with data variants also add the values of the `data-*` props their rules read; those attribute names are collected during the first resolve of the class string and cleared on reinit, so class strings without data variants keep the key they had.
 - During resolve, `ScopedVariables` overrides are overlaid onto a prototype-chained clone of the theme vars so unset variables fall through to the theme.
 - Resolved styles subscribe to only dependencies they use, then invalidate cache entries on change.
 - Runtime dependencies are represented by `StyleDependency`: theme, dimensions, orientation, insets, font scale, RTL, adaptive themes, and variables.
-- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry the `data-*` attributes they read with their expected values so cache keys can include those props; other condition metadata stays at build time.
+- Native style resolution calls each rule's build-generated `matches(rt, context, props, state, vars)` predicate. Predicates contain only that rule's screen width/height, orientation, theme, RTL, active/focus/disabled, and `data-*` conditions, respecting scoped themes and layout direction. Data-dependent rules carry the names of the `data-*` attributes they read so cache keys can include those props; expected values and other condition metadata stay at build time.
 - Native post-processing adapts CSS concepts to RN shapes, including line-height multipliers, shadows, transforms, gradients, visibility, borders, outlines, font variants, and filters.
 
 Web runtime:
@@ -147,7 +147,7 @@ Build-time stylesheet templates collect each rule as `{ style, meta }`: CSS decl
 
 Important concepts:
 
-- A runtime `Style` record stores entries, a generated `matches` function, the `data-*` attributes it reads with their expected values (or `null`), dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
+- A runtime `Style` record stores entries, a generated `matches` function, the `data-*` attribute names it reads (or `null`), dependencies, per-class index, class name, important properties, and normal and important cascade ranks (`complexity` and `importantComplexity`). Media/selector condition metadata stays in build-time templates. Platform conditions are filtered at build time and are not emitted as a runtime flag.
 - Native property precedence is computed at build time from importance, cascade-layer priority, supported selector specificity, and compiled CSS order. Named layer statements, reopened layers, nested layers, anonymous layers, and unlayered rules participate; important declarations reverse layer priority. Every important rank is above every normal rank. Runtime resolution filters matching rules and compares the appropriate rank per property, independent of className token order or minimum-width priority.
 - Specificity covers the selectors native already supports: classes, state pseudo-classes and data attributes contribute; `:where(...)` and media queries do not. Nested selectors inherit their parent's specificity. This is author-rule precedence for supported selectors, not a general DOM selector engine or support for inheritance, animations, transitions, `@scope`, or `revert-layer`.
 - CSS variables live in `vars`; theme and platform-scoped variables live in `scopedVars` with internal prefixes.
diff --git a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
index 0536d0b0..f7dc5d59 100644
--- a/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
+++ b/packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
@@ -28,21 +28,6 @@ const makeSafeForSerialization = (value: any) => {
     return value
 }
 
-// The value each data attribute must have, normalized the way the generated match function
-// compares it: "true" and "false" also match the booleans, so they're emitted as booleans
-const getDataAttributeValues = (dataAttributes: Record<string, string>) =>
-    Object.fromEntries(
-        Object.entries(dataAttributes).map(([name, expected]) => {
-            const value = JSON.parse(expected)
-
-            if (value === 'true' || value === 'false') {
-                return [name, value === 'true']
-            }
-
-            return [name, makeSafeForSerialization(value)]
-        }),
-    )
-
 const hasThemedVarDependency = (varName: string, Processor: ProcessorBuilder, visited = new Set<string>()): boolean => {
     if (visited.has(varName)) {
         return false
@@ -143,7 +128,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder) => {
                 return {
                     entries,
                     matches,
-                    dataAttributeValues: dataAttributes !== null ? getDataAttributeValues(dataAttributes) : null,
+                    dataAttributeNames: dataAttributes !== null ? Object.keys(dataAttributes).map(makeSafeForSerialization) : null,
                     dependencies: dependencies.size > 0 ? Array.from(dependencies) : null,
                     index,
                     className: makeSafeForSerialization(className),
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index 6af834d6..44373265 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -21,41 +21,18 @@ type StylesResult = {
 
 const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum: 0 }
 
-type DataAttributes = Array<[string, Set<unknown>]>
-
-// Stored under a class string's plain cache key when its rules read data attributes. It says
-// which props, and which of their values, to add to the key
-class DataAttributesEntry {
-    constructor(readonly dataAttributes: DataAttributes) {}
-}
-
-// The generated match functions treat true and "true" alike, and false and "false" alike
-const toDataAttributeCacheValue = (value: unknown) => {
-    if (value === true || value === 'true') {
-        return true
-    }
-
-    if (value === false || value === 'false') {
-        return false
-    }
-
-    return value
-}
-
-// A value that none of the rules look for can't match any of them, so all such values
-// share one key. This keeps the cache from growing with arbitrary prop values.
-const getDataAttributesCacheKey = (dataAttributes: DataAttributes, componentProps: Record<string, any> | undefined) =>
-    JSON.stringify(dataAttributes.map(([name, values]) => {
-        const value = toDataAttributeCacheValue(componentProps?.[name])
-
-        return values.has(value) ? value : null
-    }))
+// The generated match functions compare data props with ===, so the raw values are enough
+const getDataAttributesCacheKey = (dataAttributeNames: Array<string>, componentProps: Record<string, any> | undefined) =>
+    JSON.stringify(dataAttributeNames.map(name => componentProps?.[name] ?? null))
 
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
     vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
-    private cache = {} as Record<ThemeName, Map<string, StylesResult | DataAttributesEntry>>
+    private cache = {} as Record<ThemeName, Map<string, StylesResult>>
+    // Data attributes read by class strings with data variants. Filled while resolving and cleared
+    // in reinit, so class strings without data variants never get an entry
+    private dataAttributeNames = new Map<string, Array<string>>()
 
     getStyles(
         className: string | undefined,
@@ -77,39 +54,40 @@ class UniwindStoreBuilder {
             return emptyState
         }
 
-        const entry = cache.get(baseCacheKey)
-        let cacheKey = baseCacheKey
+        // Class strings without data variants are cached under this key, as before
+        if (cache.has(baseCacheKey)) {
+            return cache.get(baseCacheKey)!
+        }
 
-        if (entry instanceof DataAttributesEntry) {
-            cacheKey += getDataAttributesCacheKey(entry.dataAttributes, componentProps)
+        const knownNames = this.dataAttributeNames.get(className)
+        let cacheKey = baseCacheKey
 
-            const cached = cache.get(cacheKey)
+        if (knownNames !== undefined) {
+            cacheKey += getDataAttributesCacheKey(knownNames, componentProps)
 
-            if (cached !== undefined) {
-                return cached as StylesResult
+            if (cache.has(cacheKey)) {
+                return cache.get(cacheKey)!
             }
-        } else if (entry !== undefined) {
-            return entry
         }
 
-        const { stylesResult, dataAttributes } = this.resolveStyles(className, componentProps, state, uniwindContext)
+        const result = this.resolveStyles(className, componentProps, state, uniwindContext)
 
-        // The first resolve of a class string with data variants is what finds its data attributes
-        if (entry === undefined && dataAttributes !== null) {
-            cache.set(baseCacheKey, new DataAttributesEntry(dataAttributes))
-            cacheKey += getDataAttributesCacheKey(dataAttributes, componentProps)
+        // The first resolve of a class string with data variants is what finds the names
+        if (knownNames === undefined && result.dataAttributeNames !== null) {
+            this.dataAttributeNames.set(className, result.dataAttributeNames)
+            cacheKey += getDataAttributesCacheKey(result.dataAttributeNames, componentProps)
         }
 
         const storeKey = cacheKey
 
-        cache.set(storeKey, stylesResult)
+        cache.set(storeKey, result)
         UniwindListener.subscribe(
             () => cache.delete(storeKey),
-            stylesResult.dependencies,
+            result.dependencies,
             { once: true },
         )
 
-        return stylesResult
+        return result
     }
 
     reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
@@ -140,6 +118,7 @@ class UniwindStoreBuilder {
             return [theme, clonedVars]
         }))
         this.cache = Object.fromEntries(themes.map(theme => [theme, new Map()]))
+        this.dataAttributeNames = new Map()
 
         if (__DEV__) {
             UniwindListener.notifyAll()
@@ -168,7 +147,7 @@ class UniwindStoreBuilder {
         let dependencySum = 0
         const bestRanks = new Map<string, number>()
         const isScopedTheme = uniwindContext.scopedTheme !== null
-        let dataAttributes: Map<string, Set<unknown>> | null = null
+        let dataAttributeNames: Set<string> | null = null
         const classNameTokens = classNames.includes('\n')
             ? classNames.split(/\s+/).filter(Boolean)
             : classNames.split(' ')
@@ -190,19 +169,9 @@ class UniwindStoreBuilder {
                     })
                 }
 
-                if (style.dataAttributeValues !== null) {
-                    dataAttributes ??= new Map()
-
-                    for (const [name, value] of Object.entries(style.dataAttributeValues)) {
-                        let values = dataAttributes.get(name)
-
-                        if (!values) {
-                            values = new Set()
-                            dataAttributes.set(name, values)
-                        }
-
-                        values.add(value)
-                    }
+                if (style.dataAttributeNames !== null) {
+                    dataAttributeNames ??= new Set()
+                    style.dataAttributeNames.forEach(name => dataAttributeNames!.add(name))
                 }
 
                 if (!style.matches(this.runtime, uniwindContext, componentProps, state, vars)) {
@@ -280,12 +249,10 @@ class UniwindStoreBuilder {
         }
 
         return {
-            stylesResult: {
-                styles: result,
-                dependencies: Array.from(dependencies),
-                dependencySum,
-            } satisfies StylesResult,
-            dataAttributes: dataAttributes !== null ? Array.from(dataAttributes) : null,
+            styles: result,
+            dependencies: Array.from(dependencies),
+            dependencySum,
+            dataAttributeNames: dataAttributeNames !== null ? Array.from(dataAttributeNames) : null,
         }
     }
 
diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts
index 5e17dac4..65d68129 100644
--- a/packages/uniwind/src/core/types.ts
+++ b/packages/uniwind/src/core/types.ts
@@ -15,7 +15,7 @@ export type Style = {
         state: ComponentState | undefined,
         vars: Vars,
     ) => boolean
-    dataAttributeValues: Record<string, unknown> | null
+    dataAttributeNames: Array<string> | null
     dependencies: Array<StyleDependency> | null
     index: number
     className: string
diff --git a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
index 045ac263..74619de5 100644
--- a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
+++ b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
@@ -5,11 +5,6 @@ const context = { scopedTheme: null, rtl: null, variables: null }
 const plain = 'bg-blue-500 opacity-50'
 const withData = 'bg-blue-500 data-[active=true]:bg-red-500'
 const withNumberLikeValue = 'bg-blue-500 data-[x=1]:bg-red-500'
-const withStringValue = 'bg-blue-500 data-[state=open]:bg-red-500'
-
-const getCachedEntries = () => Array.from((UniwindStore as any).cache[UniwindStore.runtime.currentThemeName].entries()) as Array<[string, object]>
-// Cached style results, without the entries that record which data attributes a class string reads
-const getStylesCacheSize = () => getCachedEntries().filter(([, entry]) => 'styles' in entry).length
 
 const countResolves = (run: () => void) => {
     const spy = jest.spyOn(UniwindStore as any, 'resolveStyles')
@@ -42,21 +37,13 @@ describe('Caching styles that use data attributes', () => {
             expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
             expect(getBackground(withData, { 'data-active': false })).toBe(TW_BLUE_500)
             expect(getBackground(withData, undefined)).toBe(TW_BLUE_500)
+            expect(getBackground(withData, { 'data-active': 'true' })).toBe(TW_RED_500)
             expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
             expect(getBackground(withData, { 'data-active': false })).toBe(TW_BLUE_500)
         })
 
-        // false and a missing prop can't match data-[active=true], so they share an entry
-        expect(calls).toBe(2)
-    })
-
-    test('treats true and "true" as the same value, like the match function does', () => {
-        const calls = countResolves(() => {
-            expect(getBackground(withData, { 'data-active': true })).toBe(TW_RED_500)
-            expect(getBackground(withData, { 'data-active': 'true' })).toBe(TW_RED_500)
-        })
-
-        expect(calls).toBe(1)
+        // One resolve each for true, false, missing and "true"; the repeats hit the cache
+        expect(calls).toBe(4)
     })
 
     test('keeps number and string values apart', () => {
@@ -65,22 +52,6 @@ describe('Caching styles that use data attributes', () => {
         expect(getBackground(withNumberLikeValue, { 'data-x': '1' })).toBe(TW_RED_500)
     })
 
-    test('shares one cache entry for values that no rule matches', () => {
-        const sizeBefore = getStylesCacheSize()
-        const calls = countResolves(() => {
-            for (let i = 0; i < 100; i++) {
-                expect(getBackground(withStringValue, { 'data-state': `item-${i}` })).toBe(TW_BLUE_500)
-            }
-
-            expect(getBackground(withStringValue, { 'data-state': 'open' })).toBe(TW_RED_500)
-            expect(getBackground(withStringValue, { 'data-state': { open: true } })).toBe(TW_BLUE_500)
-            expect(getBackground(withStringValue, undefined)).toBe(TW_BLUE_500)
-        })
-
-        expect(calls).toBe(2)
-        expect(getStylesCacheSize() - sizeBefore).toBe(2)
-    })
-
     test('ignores data props that the class string does not use', () => {
         const calls = countResolves(() => {
             getBackground(withData, { 'data-active': true, 'data-testid': 'a' })
@@ -92,18 +63,20 @@ describe('Caching styles that use data attributes', () => {
         expect(calls).toBe(2)
     })
 
-    test('does no data attribute work for class strings without data variants', () => {
+    test('keeps nothing extra for class strings without data variants', () => {
         const className = 'opacity-50 bg-blue-500'
+        const dataAttributeNames = (UniwindStore as any).dataAttributeNames as Map<string, Array<string>>
         const calls = countResolves(() => {
             for (let i = 0; i < 100; i++) {
                 getBackground(className, { 'data-testid': `item-${i}` })
             }
         })
 
+        getBackground(withData, { 'data-active': true })
+
         expect(calls).toBe(1)
-        expect(getCachedEntries().filter(([key]) => key.startsWith(className))).toEqual([
-            [expect.any(String), expect.objectContaining({ styles: expect.any(Object) })],
-        ])
+        expect(dataAttributeNames.has(className)).toBe(false)
+        expect(dataAttributeNames.get(withData)).toEqual(['data-active'])
     })
 
     test('stores the first result of a new class string under its data values', () => {
diff --git a/packages/uniwind/tests/native/styles-parsing/matches.test.ts b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
index e0c89fa2..df6cac05 100644
--- a/packages/uniwind/tests/native/styles-parsing/matches.test.ts
+++ b/packages/uniwind/tests/native/styles-parsing/matches.test.ts
@@ -227,7 +227,7 @@ describe('Generated style match functions', () => {
         expect(style.dependencies).toEqual(
             expect.arrayContaining([StyleDependency.Theme, StyleDependency.Rtl, StyleDependency.Orientation, StyleDependency.Dimensions]),
         )
-        expect(style.dataAttributeValues).toEqual({ 'data-ready': true, 'data-mode': 'on' })
+        expect(style.dataAttributeNames).toEqual(['data-ready', 'data-mode'])
     })
 
     test('matches color scheme using the scoped theme and subscribes to theme changes', () => {
@@ -258,7 +258,7 @@ describe('Generated style match functions', () => {
 
         expect(style.matches(UniwindStore.runtime, context, undefined, undefined, {})).toBe(true)
         expect(style.dependencies).toBeNull()
-        expect(style.dataAttributeValues).toBeNull()
+        expect(style.dataAttributeNames).toBeNull()
     })
 })
 

From f1efd5fa9185cf7eec669e69bd28b25b00f173c9 Mon Sep 17 00:00:00 2001
From: Jaydeep Agravat <jaydeepagravat94583@gmail.com>
Date: Fri, 6 Nov 2026 11:49:01 +0530
Subject: [PATCH 5/5] refactor: fill the data attribute names map in
 resolveStyles

The map is filled where the names are found, so the resolve result keeps
main's shape and getStyles no longer needs a separate path for the first
resolve. Cache tests trimmed to the behaviour that matters.
---
 CONTEXT.md                                    |  2 +-
 packages/uniwind/src/core/native/store.ts     | 44 +++++++------------
 .../native/core/data-attributes-cache.test.ts | 27 ------------
 3 files changed, 17 insertions(+), 56 deletions(-)

diff --git a/CONTEXT.md b/CONTEXT.md
index 14393e6f..f5a5d439 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -70,7 +70,7 @@ Native runtime:
 - Build output injects a generated stylesheet callback into `Uniwind.__reinit(...)`.
 - `UniwindStore` holds generated style records, theme variables, scoped variables, runtime state, and per-theme caches.
 - `UniwindStore.getStyles(className, props, state, context)` resolves classes into React Native style objects.
-- Cache keys include class names, component state, whether theme is scoped, layout direction, and a key derived from the merged `ScopedVariables` map. Class strings with data variants also add the values of the `data-*` props their rules read; those attribute names are collected during the first resolve of the class string and cleared on reinit, so class strings without data variants keep the key they had.
+- Cache keys include class names, component state, whether theme is scoped, layout direction, and a key derived from the merged `ScopedVariables` map. Class strings with data variants also key on the values of the `data-*` props their rules read.
 - During resolve, `ScopedVariables` overrides are overlaid onto a prototype-chained clone of the theme vars so unset variables fall through to the theme.
 - Resolved styles subscribe to only dependencies they use, then invalidate cache entries on change.
 - Runtime dependencies are represented by `StyleDependency`: theme, dimensions, orientation, insets, font scale, RTL, adaptive themes, and variables.
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index 44373265..08b1483a 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -21,17 +21,12 @@ type StylesResult = {
 
 const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum: 0 }
 
-// The generated match functions compare data props with ===, so the raw values are enough
-const getDataAttributesCacheKey = (dataAttributeNames: Array<string>, componentProps: Record<string, any> | undefined) =>
-    JSON.stringify(dataAttributeNames.map(name => componentProps?.[name] ?? null))
-
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
     vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
     private cache = {} as Record<ThemeName, Map<string, StylesResult>>
-    // Data attributes read by class strings with data variants. Filled while resolving and cleared
-    // in reinit, so class strings without data variants never get an entry
+    // Data attributes read by each class string with data variants, filled by resolveStyles
     private dataAttributeNames = new Map<string, Array<string>>()
 
     getStyles(
@@ -54,31 +49,15 @@ class UniwindStoreBuilder {
             return emptyState
         }
 
-        // Class strings without data variants are cached under this key, as before
-        if (cache.has(baseCacheKey)) {
-            return cache.get(baseCacheKey)!
-        }
-
-        const knownNames = this.dataAttributeNames.get(className)
-        let cacheKey = baseCacheKey
-
-        if (knownNames !== undefined) {
-            cacheKey += getDataAttributesCacheKey(knownNames, componentProps)
+        const cacheKey = baseCacheKey + this.getDataAttributesCacheKey(className, componentProps)
 
-            if (cache.has(cacheKey)) {
-                return cache.get(cacheKey)!
-            }
+        if (cache.has(cacheKey)) {
+            return cache.get(cacheKey)!
         }
 
         const result = this.resolveStyles(className, componentProps, state, uniwindContext)
-
-        // The first resolve of a class string with data variants is what finds the names
-        if (knownNames === undefined && result.dataAttributeNames !== null) {
-            this.dataAttributeNames.set(className, result.dataAttributeNames)
-            cacheKey += getDataAttributesCacheKey(result.dataAttributeNames, componentProps)
-        }
-
-        const storeKey = cacheKey
+        // The first resolve of a class string fills in its data attribute names, which changes its key
+        const storeKey = baseCacheKey + this.getDataAttributesCacheKey(className, componentProps)
 
         cache.set(storeKey, result)
         UniwindListener.subscribe(
@@ -90,6 +69,12 @@ class UniwindStoreBuilder {
         return result
     }
 
+    private getDataAttributesCacheKey(className: string, componentProps: Record<string, any> | undefined) {
+        const names = this.dataAttributeNames.get(className)
+
+        return names === undefined ? '' : JSON.stringify(names.map(name => componentProps?.[name] ?? null))
+    }
+
     reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
         const config = generateStyleSheetCallback(this.runtime)
         const { scopedVars, stylesheet, vars } = config
@@ -248,11 +233,14 @@ class UniwindStoreBuilder {
             parseTextShadowMutation(result)
         }
 
+        if (dataAttributeNames !== null) {
+            this.dataAttributeNames.set(classNames, Array.from(dataAttributeNames))
+        }
+
         return {
             styles: result,
             dependencies: Array.from(dependencies),
             dependencySum,
-            dataAttributeNames: dataAttributeNames !== null ? Array.from(dataAttributeNames) : null,
         }
     }
 
diff --git a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
index 74619de5..44bdef40 100644
--- a/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
+++ b/packages/uniwind/tests/native/core/data-attributes-cache.test.ts
@@ -62,31 +62,4 @@ describe('Caching styles that use data attributes', () => {
 
         expect(calls).toBe(2)
     })
-
-    test('keeps nothing extra for class strings without data variants', () => {
-        const className = 'opacity-50 bg-blue-500'
-        const dataAttributeNames = (UniwindStore as any).dataAttributeNames as Map<string, Array<string>>
-        const calls = countResolves(() => {
-            for (let i = 0; i < 100; i++) {
-                getBackground(className, { 'data-testid': `item-${i}` })
-            }
-        })
-
-        getBackground(withData, { 'data-active': true })
-
-        expect(calls).toBe(1)
-        expect(dataAttributeNames.has(className)).toBe(false)
-        expect(dataAttributeNames.get(withData)).toEqual(['data-active'])
-    })
-
-    test('stores the first result of a new class string under its data values', () => {
-        const className = 'opacity-50 data-[active=true]:bg-red-500'
-        const calls = countResolves(() => {
-            expect(getBackground(className, { 'data-active': true })).toBe(TW_RED_500)
-            expect(getBackground(className, { 'data-active': false })).toBe(undefined)
-            expect(getBackground(className, { 'data-active': true })).toBe(TW_RED_500)
-        })
-
-        expect(calls).toBe(2)
-    })
 })