fix: combined variants overriding each other (#567)

* fix: combined variants overriding each other

* test: add more tests for combined variants

Author: Brentlok

packages/uniwind/src/bundler/css-processor/processor.ts

@@ -196,12 +196,12 @@ export class ProcessorBuilder {
                 })
 
                 if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
-                    this.declarationConfig.rtl = rtl
-                    this.declarationConfig.theme = theme
-                    this.declarationConfig.active = active
-                    this.declarationConfig.focus = focus
-                    this.declarationConfig.disabled = disabled
-                    this.declarationConfig.dataAttributes = dataAttributes
+                    this.declarationConfig.rtl ??= rtl
+                    this.declarationConfig.theme ??= theme
+                    this.declarationConfig.active ??= active
+                    this.declarationConfig.focus ??= focus
+                    this.declarationConfig.disabled ??= disabled
+                    this.declarationConfig.dataAttributes ??= dataAttributes
 
                     rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
                     rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))

packages/uniwind/src/core/types.ts

@@ -11,7 +11,7 @@ export type Style = {
     minWidth: number
     maxWidth: number
     orientation: Orientation | null
-    theme: ColorScheme | null
+    theme: ThemeName | null
     rtl: boolean | null
     native: boolean
     dependencies: Array<StyleDependency> | null

packages/uniwind/tests/native/styles-parsing/meta.test.ts

@@ -27,4 +27,23 @@ describe('Styles Metadata', () => {
         expect(stylesheet['bg-background'][0].dependencies).toContain(StyleDependency.Theme)
         expect(stylesheet['bg-foreground'][0].dependencies).toContain(StyleDependency.Theme)
     })
+
+    test('Combined variants', async () => {
+        const { stylesheet } = await compileMetadata()
+
+        const expectMeta = (className: string, expected: Partial<StyleSheets[string][number]>) => {
+            const meta = stylesheet[className][0]
+
+            expect(meta.theme).toBe(expected.theme ?? null)
+            expect(meta.active).toBe(expected.active ?? null)
+            expect(meta.focus).toBe(expected.focus ?? null)
+            expect(meta.rtl).toBe(expected.rtl ?? null)
+            expect(meta.disabled).toBe(expected.disabled ?? null)
+            expect(meta.dataAttributes).toEqual(expected.dataAttributes ?? null)
+        }
+
+        expectMeta('dark:active:bg-purple-700', { theme: 'dark', active: true })
+        expectMeta('dark:active:focus:bg-purple-700', { theme: 'dark', active: true, focus: true })
+        expectMeta('active:dark:bg-purple-700', { theme: 'dark', active: true })
+    })
 })