feat: add support for variables in media queries

packages/uniwind/src/metro/processor/mq.ts

@@ -1,4 +1,4 @@
-import { MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
+import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
 import { ColorScheme, Orientation } from '../../types'
 import { MediaQueryResolver, Platform } from '../types'
 import type { ProcessorBuilder } from './processor'
@@ -18,20 +18,26 @@ export class MQ {
                 return
             }
 
-            if (condition?.type !== 'feature') {
-                return
-            }
+            if (condition) this.processCondition(condition, mq)
+        })
+
+        return mq
+    }
 
+    private processCondition(condition: MediaCondition, mq: MediaQueryResolver) {
+        if (condition.type === 'operation') {
+            condition.conditions.forEach(nestedCondition => {
+                this.processCondition(nestedCondition, mq)
+            })
+        } else if (condition.type === 'feature') {
             if (condition.value.type === 'range') {
                 this.processWidthMediaQuery(condition.value, mq)
             }
 
             if (condition.value.type === 'plain') {
                 this.processPlainMediaQuery(condition.value, mq)
             }
-        })
-
-        return mq
+        }
     }
 
     private processWidthMediaQuery(query: QueryFeatureFor_MediaFeatureId & { type: 'range' }, mq: MediaQueryResolver) {

packages/uniwind/src/metro/processor/processor.ts

@@ -1,5 +1,5 @@
 import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
-import { Polyfills, ProcessMetaValues } from '../types'
+import { MediaQueryResolver, Polyfills, ProcessMetaValues } from '../types'
 import { Color } from './color'
 import { CSS } from './css'
 import { Functions } from './functions'
@@ -21,6 +21,9 @@ export class ProcessorBuilder {
     Functions = new Functions(this)
     meta = {} as ProcessMetaValues
 
+    private varsWithMediaQueries = {} as Record<string, Array<any>>
+    private pendingVarReferences = new Map<string, Array<string>>()
+
     private declarationConfig = this.getDeclarationConfig()
 
     constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
@@ -32,11 +35,27 @@ export class ProcessorBuilder {
             filename: 'tailwind.css',
             code: Buffer.from(css),
             visitor: {
-                StyleSheet: styleSheet =>
+                StyleSheet: styleSheet => {
                     styleSheet.rules.forEach(rule => {
                         this.declarationConfig = this.getDeclarationConfig()
                         this.parseRuleRec(rule)
-                    }),
+                    })
+
+                    for (const [className, varNames] of this.pendingVarReferences) {
+                        for (const varName of varNames) {
+                            const varStyles = this.varsWithMediaQueries[varName]
+                            if (!varStyles || varStyles.length === 0) {
+                                continue
+                            }
+
+                            for (const varStyle of varStyles) {
+                                this.stylesheets[className]!.push(varStyle)
+                            }
+                        }
+
+                        this.pendingVarReferences.delete(className)
+                    }
+                },
             },
         })
     }
@@ -54,9 +73,14 @@ export class ProcessorBuilder {
         })
     }
 
+    private hasMediaQuery(mq: MediaQueryResolver): boolean {
+        return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null
+    }
+
     private addDeclaration(declaration: Declaration, important = false) {
         const isVar = this.declarationConfig.root || this.declarationConfig.className === null
         const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries)
+        const { property, value } = this.parseDeclaration(declaration)
         const style = (() => {
             if (!isVar) {
                 return this.stylesheets[this.declarationConfig.className!]?.at(-1)
@@ -69,6 +93,12 @@ export class ProcessorBuilder {
                 return this.scopedVars[platformKey]
             }
 
+            if (this.hasMediaQuery(mq)) {
+                this.varsWithMediaQueries[property] ??= []
+                this.varsWithMediaQueries[property].push({})
+                return this.varsWithMediaQueries[property].at(-1)
+            }
+
             if (this.declarationConfig.theme === null) {
                 return this.vars
             }
@@ -79,41 +109,65 @@ export class ProcessorBuilder {
             return this.scopedVars[themeKey]
         })()
 
-        if (!isVar) {
+        if (!isVar || this.hasMediaQuery(mq)) {
             Object.assign(style, mq)
             style.importantProperties ??= []
             style.rtl = this.declarationConfig.rtl
             style.theme = mq.colorScheme ?? this.declarationConfig.theme
+            style.maxWidth = mq.maxWidth
+            style.minWidth = mq.minWidth
+            style.orientation = mq.orientation
             style.active = this.declarationConfig.active
             style.focus = this.declarationConfig.focus
             style.disabled = this.declarationConfig.disabled
             this.meta.className = this.declarationConfig.className
         }
 
-        if (declaration.property === 'unparsed') {
-            style[declaration.value.propertyId.property] = this.CSS.processValue(declaration.value.value)
+        style[property] = value
+        if (!isVar && important) {
+            style.importantProperties.push(property)
+        }
+
+        // Track variable references for later processing (even if media queries don't exist yet)
+        const match = typeof value === 'string' ? value.match(/this\[`(.*?)`\]/) : null
 
-            if (!isVar && important) {
-                style.importantProperties.push(declaration.value.propertyId.property)
+        if (match && !isVar) {
+            const className = this.declarationConfig.className
+            if (className === null) {
+                return
             }
 
-            return
-        }
+            if (!this.pendingVarReferences.has(className)) {
+                this.pendingVarReferences.set(className, [])
+            }
 
-        if (declaration.property === 'custom') {
-            style[declaration.value.name] = this.CSS.processValue(declaration.value.value)
+            const classVars = this.pendingVarReferences.get(className)!
+            const varName = match[1]!
 
-            if (!isVar && important) {
-                style.importantProperties.push(declaration.value.name)
+            if (!classVars.includes(varName)) {
+                classVars.push(varName)
             }
+        }
+    }
 
-            return
+    private parseDeclaration(declaration: Declaration) {
+        if (declaration.property === 'unparsed') {
+            return {
+                property: declaration.value.propertyId.property,
+                value: this.CSS.processValue(declaration.value.value),
+            }
         }
 
-        style[declaration.property] = this.CSS.processValue(declaration.value)
+        if (declaration.property === 'custom') {
+            return {
+                property: declaration.value.name,
+                value: this.CSS.processValue(declaration.value.value),
+            }
+        }
 
-        if (!isVar && important) {
-            style.importantProperties.push(declaration.property)
+        return {
+            property: declaration.property,
+            value: this.CSS.processValue(declaration.value),
         }
     }
 
@@ -221,10 +275,8 @@ export class ProcessorBuilder {
             const { mediaQueries } = rule.value.query
 
             this.declarationConfig.mediaQueries.push(...mediaQueries)
-            rule.value.rules.forEach(rule => {
-                this.parseRuleRec(rule)
-                this.declarationConfig = this.getDeclarationConfig()
-            })
+            rule.value.rules.forEach(rule => this.parseRuleRec(rule))
+            this.declarationConfig = this.getDeclarationConfig()
 
             return
         }

packages/uniwind/src/metro/types.ts

@@ -27,8 +27,8 @@ export type UniwindConfig = {
 }
 
 export type MediaQueryResolver = {
-    maxWidth: any
-    minWidth: any
+    maxWidth: number | null
+    minWidth: number | null
     platform: Platform | null
     rtl: boolean | null
     important: boolean

packages/uniwind/tests/media-queries/color-scheme.test.css

@@ -0,0 +1,19 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+@layer theme {
+  :root {
+    --color-primary: #000000;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: #ffffff;
+  }
+}
+
+.text-color-primary {
+  color: var(--color-primary);
+}
+

packages/uniwind/tests/media-queries/color-scheme.test.tsx

@@ -0,0 +1,84 @@
+import { act } from '@testing-library/react-native'
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import * as React from 'react'
+import View from '../../src/components/native/View'
+import { UniwindListener } from '../../src/core/listener'
+import { UniwindStore } from '../../src/core/native/store'
+import { compileVirtual } from '../../src/metro/compileVirtual'
+import { Platform } from '../../src/metro/types'
+import { ColorScheme, Orientation, StyleDependency } from '../../src/types'
+import { renderUniwind } from '../utils'
+
+describe('CSS Variables - Color Scheme Media Queries', () => {
+    beforeAll(async () => {
+        const cssPath = resolve('./tests/media-queries/color-scheme.test.css')
+        const css = readFileSync(cssPath, 'utf-8')
+        const virtualCode = await compileVirtual({
+            css,
+            cssPath,
+            debug: true,
+            platform: Platform.iOS,
+            themes: ['light', 'dark'],
+            polyfills: undefined,
+        })
+
+        eval(
+            `const { Uniwind } = require('../../src/core/config/config.native');
+            Uniwind.__reinit(rt => ${virtualCode}, ['light', 'dark']);
+        `,
+        )
+    })
+
+    beforeEach(() => {
+        UniwindStore.runtime.screen = { width: 375, height: 667 }
+        UniwindStore.runtime.orientation = Orientation.Portrait
+        UniwindStore.runtime.colorScheme = ColorScheme.Light
+        UniwindStore.runtime.currentThemeName = ColorScheme.Light
+        UniwindStore.reinit()
+    })
+
+    test('uses default value in light color scheme', () => {
+        const { getStylesFromId } = renderUniwind(
+            <View className="text-color-primary" testID="color-primary" />,
+        )
+
+        expect(getStylesFromId('color-primary').color).toBe('#000000')
+    })
+
+    test('uses media query value in dark color scheme', () => {
+        UniwindStore.runtime.currentThemeName = ColorScheme.Dark
+        UniwindStore.runtime.colorScheme = ColorScheme.Dark
+        UniwindListener.notify([StyleDependency.Theme, StyleDependency.ColorScheme])
+
+        const { getStylesFromId } = renderUniwind(
+            <View className="text-color-primary" testID="color-primary" />,
+        )
+
+        expect(getStylesFromId('color-primary').color).toBe('#ffffff')
+    })
+
+    test('updates when color scheme changes', () => {
+        UniwindStore.runtime.currentThemeName = ColorScheme.Light
+        UniwindStore.runtime.colorScheme = ColorScheme.Light
+        UniwindListener.notify([StyleDependency.Theme, StyleDependency.ColorScheme])
+
+        let { getStylesFromId } = renderUniwind(
+            <View className="text-color-primary" testID="color-primary" />,
+        )
+
+        expect(getStylesFromId('color-primary').color).toBe('#000000')
+
+        UniwindStore.runtime.currentThemeName = ColorScheme.Dark
+        UniwindStore.runtime.colorScheme = ColorScheme.Dark
+        act(() => {
+            UniwindListener.notify([StyleDependency.Theme, StyleDependency.ColorScheme])
+        })
+
+        const { getStylesFromId: getStylesFromId2 } = renderUniwind(
+            <View className="text-color-primary" testID="color-primary" />,
+        )
+
+        expect(getStylesFromId2('color-primary').color).toBe('#ffffff')
+    })
+})

packages/uniwind/tests/media-queries/combined.test.css

@@ -0,0 +1,30 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+@layer theme {
+  :root {
+    --text-xl: 1.5rem;
+    --border-width: 1px;
+  }
+}
+
+@media (min-width: 768px) and (orientation: landscape) {
+  :root {
+    --text-xl: 6rem;
+  }
+}
+
+@media (min-width: 640px) and (prefers-color-scheme: dark) {
+  :root {
+    --border-width: 2px;
+  }
+}
+
+.text-xl {
+  font-size: var(--text-xl);
+}
+
+.border-custom {
+  border-width: var(--border-width);
+}
+