Type error on compoundVariants

[shareefhadid]

Environment

• Operating System: Darwin
• Node Version: v20.11.1
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

v3.0.0-alpha.7

Reproduction

export default defineAppConfig({
  ui: {
    colors: {
      neutral: "zinc",
      primary: "rose",
    },
    button: {
      compoundVariants: [
        {
          color: "neutral",
          variant: "outline",
          class:
            "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]",
        },
      ],
    },
  },
});

Type '{ color: "neutral"; variant: "outline"; class: string; }[]' is not assignable to type 'DeepPartial<({ color: "primary"; variant: "solid"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: "secondary"; variant: "solid"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.
  Type '{ color: "neutral"; variant: "outline"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap<string>; }'.
    Index signature for type 'string' is missing in type '{ color: "neutral"; variant: "outline"; class: string; }[]'.ts(2322)

Description

Hi :) I am getting type errors when using compoundVariant.

For example, here is my app.config.ts:

export default defineAppConfig({
  ui: {
    colors: {
      neutral: "zinc",
      primary: "rose",
    },
    button: {
      compoundVariants: [
        {
          color: "neutral",
          variant: "outline",
          class:
            "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]",
        },
      ],
    },
  },
});

I am getting the following type error for compoundVariants:

Type '{ color: "neutral"; variant: "outline"; class: string; }[]' is not assignable to type 'DeepPartial<({ color: "primary"; variant: "solid"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: "secondary"; variant: "solid"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.
  Type '{ color: "neutral"; variant: "outline"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap<string>; }'.
    Index signature for type 'string' is missing in type '{ color: "neutral"; variant: "outline"; class: string; }[]'.ts(2322)

Additional context

No response

Logs

No response

[benjamincanac]

Thanks for the report! 😊