diff --git a/packages/uniwind/src/bundler/css-processor/processor.ts b/packages/uniwind/src/bundler/css-processor/processor.ts index 5e71e4d2..9c70fdc2 100644 --- a/packages/uniwind/src/bundler/css-processor/processor.ts +++ b/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)) diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts index 28ba87cc..6bd712a0 100644 --- a/packages/uniwind/src/core/types.ts +++ b/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 | null diff --git a/packages/uniwind/tests/native/styles-parsing/meta.test.ts b/packages/uniwind/tests/native/styles-parsing/meta.test.ts index 958f8983..efb113e3 100644 --- a/packages/uniwind/tests/native/styles-parsing/meta.test.ts +++ b/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) => { + 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 }) + }) })