feat: 修复类型声明与 VariantProps 导出

Author: sonofmagic

.changeset/bright-taxis-grow.md

@@ -0,0 +1,8 @@
+---
+'@weapp-tailwindcss/cva': patch
+'tailwind-variant-v3': patch
+'@weapp-tailwindcss/variants': patch
+'@weapp-tailwindcss/variants-v3': patch
+---
+
+修复类型声明与 VariantProps 导出，并为相关运行时包补充 tsd 类型测试。

benchmark/app/data/2026-01-21.json

@@ -1,7 +1,10 @@
 {
   "native-webpack": {
     "babel": [
-      104.39754100000027
+      104.39754100000027,
+      122.44374999999991,
+      136.74224999999979,
+      69.01954100000012
     ]
   },
   "rax": {
@@ -12,12 +15,18 @@
       75.88050000000021,
       94.25170900000012,
       156.78329200000007,
-      220.54849999999988
+      220.54849999999988,
+      347.4344170000004,
+      159.3154169999998,
+      336.95745799999986
     ]
   },
   "taro-vue3": {
     "babel": [
-      400.6917500000018
+      400.6917500000018,
+      351.56804099999863,
+      210.5197500000013,
+      201.8064579999991
     ]
   },
   "mpx": {
@@ -28,14 +37,44 @@
       36.11462500000016,
       7.032875000000786,
       7.725166000000172,
-      280.7640420000007
+      280.7640420000007,
+      26.245832999999948,
+      8.561083000000508,
+      30.576915999999983,
+      37.93720799999937,
+      8.040875000000597,
+      6.8414170000014565,
+      336.37275000000045,
+      17.87304099999983,
+      10.680916999999681,
+      30.358791999999994,
+      39.98158400000011,
+      17.06354199999987,
+      10.62237499999901,
+      306.0850420000006,
+      23.974874999999884,
+      7.706832999999278,
+      9.03191599999991,
+      16.475750000000517,
+      7.93224999999984,
+      12.709749999999985,
+      265.71058300000004
     ]
   },
   "taro-react": {
     "babel": [
       252.8977500000001,
       276.88374999999905,
-      201.3182909999996
+      201.3182909999996,
+      245.46245799999997,
+      158.1889999999985,
+      207.97212500000023,
+      241.1765830000004,
+      144.8055830000003,
+      185.1402079999989,
+      191.37462499999947,
+      372.5300409999991,
+      209.50708300000042
     ]
   }
 }

package.json

@@ -61,6 +61,8 @@
     "test:core": "vitest run --coverage.enabled --coverage.all=false --project=weapp-tailwindcss",
     "test:dev": "vitest",
     "test:ui": "vitest --ui",
+    "tsd": "turbo run tsd",
+    "tsd:runtime": "turbo run tsd --filter=./packages-runtime/cva --filter=./packages-runtime/tailwind-variant-v3 --filter=./packages-runtime/variants --filter=./packages-runtime/variants-v3",
     "e2e": "vitest run -c ./e2e/vitest.e2e.config.ts",
     "e2e:dev": "vitest -c ./e2e/vitest.e2e.config.ts",
     "e2e:u": "vitest run -u -c ./e2e/vitest.e2e.config.ts",

packages-runtime/cva/package.json

@@ -47,6 +47,7 @@
     "build": "tsdown",
     "test": "vitest run",
     "test:dev": "vitest",
+    "tsd": "tsd",
     "release": "pnpm publish",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"

packages-runtime/cva/test-d/index.test-d.ts

@@ -0,0 +1,65 @@
+import type { VariantProps } from '..'
+import {
+  expectAssignable,
+  expectError,
+  expectNotAssignable,
+  expectType,
+} from 'tsd'
+import { cva } from '..'
+
+const button = cva('inline-flex', {
+  variants: {
+    intent: {
+      primary: 'bg-blue-500',
+      secondary: 'bg-gray-500',
+    },
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg',
+    },
+    rounded: {
+      true: 'rounded-full',
+      false: 'rounded-none',
+    },
+  },
+  defaultVariants: {
+    intent: 'primary',
+    size: 'sm',
+  },
+  compoundVariants: [
+    {
+      intent: 'primary',
+      size: 'lg',
+      class: 'shadow',
+    },
+    {
+      intent: 'secondary',
+      rounded: true,
+      className: 'ring-1',
+    },
+  ],
+})
+
+expectType<string>(button())
+expectType<string>(button({ class: 'px-4' }))
+expectType<string>(button({ intent: null }))
+expectError(button({ class: 'px-4', className: 'py-2' }))
+expectError(button({ intent: 'tertiary' }))
+expectError(button({ rounded: 'true' }))
+expectError(button({ size: 'xl' }))
+
+type ButtonVariantProps = VariantProps<typeof button>
+const buttonVariantProps: ButtonVariantProps = {
+  intent: 'secondary',
+  rounded: false,
+}
+
+expectType<{
+  intent?: 'primary' | 'secondary' | null | undefined
+  size?: 'sm' | 'lg' | null | undefined
+  rounded?: boolean | null | undefined
+}>(buttonVariantProps)
+expectAssignable<ButtonVariantProps>({ size: null })
+expectAssignable<ButtonVariantProps>({ rounded: true })
+expectNotAssignable<ButtonVariantProps>({ class: 'px-4' })
+expectNotAssignable<ButtonVariantProps>({ className: 'py-2' })

packages-runtime/tailwind-variant-v3/package.json

@@ -42,6 +42,7 @@
     "build": "tsdown",
     "test": "vitest run",
     "test:dev": "vitest",
+    "tsd": "tsd",
     "bench": "vitest bench test/tv.bench.ts",
     "release": "pnpm publish",
     "lint": "eslint .",

packages-runtime/tailwind-variant-v3/src/types.d.ts

@@ -52,7 +52,7 @@ export declare const cnBase: <T extends CnOptions>(...classes: T) => CnReturn
 export declare const cn: <T extends CnOptions>(...classes: T) => (config?: TWMConfig) => CnReturn
 
 // compare if the value is true or array of values
-export type isTrueOrArray<T> = [Extract<T, true | unknown[]>] extends [never] ? false : true
+export type isTrueOrArray<T> = [T] extends [true | readonly unknown[]] ? true : false
 
 export type WithInitialScreen<T extends Array<string>>
   = ['initial', ...T]
@@ -158,7 +158,7 @@ export type TVScreenPropsValue<
 type TVPropsWithoutExtended<
   V extends TVVariants<S>,
   S extends TVSlots,
-  C extends TVConfig<V, EV>,
+  C extends TVConfig<V, undefined>,
 > = V extends undefined
   ? ClassProp<ClassValue>
   : {
@@ -168,7 +168,7 @@ type TVPropsWithoutExtended<
   } & ClassProp<ClassValue>
 
 type TVPropsExtendedWithoutVariants<
-  C extends TVConfig<any, EV>,
+  C extends TVConfig<undefined, EV>,
   EV extends TVVariants<ES>,
   ES extends TVSlots,
 > = {
@@ -182,6 +182,7 @@ type TVPropsExtendedWithVariants<
   S extends TVSlots,
   C extends TVConfig<V, EV>,
   EV extends TVVariants<ES>,
+  ES extends TVSlots,
 > = {
   [K in keyof V | keyof EV]?: isTrueOrArray<C['responsiveVariants']> extends true
     ? | (K extends keyof V ? StringToBoolean<keyof V[K]> : never)
@@ -201,7 +202,7 @@ type TVPropsWithExtended<
   ES extends TVSlots,
 > = V extends undefined
   ? TVPropsExtendedWithoutVariants<C, EV, ES>
-  : TVPropsExtendedWithVariants<V, S, C, EV>
+  : TVPropsExtendedWithVariants<V, S, C, EV, ES>
 
 export type TVProps<
   V extends TVVariants<S>,

packages-runtime/tailwind-variant-v3/test-d/index.test-d.ts

@@ -0,0 +1,123 @@
+import type { VariantProps } from '..'
+import {
+  expectAssignable,
+  expectError,
+  expectNotAssignable,
+  expectType,
+} from 'tsd'
+import {
+  cn,
+  cnBase,
+  createTV,
+  tv,
+
+} from '..'
+
+expectType<string | undefined>(cnBase('px-2', false))
+expectType<string | undefined>(cn('px-2', undefined)())
+
+const button = tv({
+  base: 'inline-flex',
+  variants: {
+    intent: {
+      primary: 'bg-blue-500',
+      secondary: 'bg-gray-500',
+    },
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg',
+    },
+    rounded: {
+      true: 'rounded-full',
+      false: 'rounded-none',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+})
+
+expectType<string>(button())
+expectType<string>(button({ class: 'px-2' }))
+expectError(button({ class: 'px-2', className: 'py-2' }))
+expectError(button({ intent: 'tertiary' }))
+expectError(button({ rounded: 'true' }))
+expectError(button({ size: 'xl' }))
+
+type ButtonVariantProps = VariantProps<typeof button>
+const buttonVariantProps: ButtonVariantProps = {
+  intent: 'primary',
+  rounded: true,
+}
+
+expectType<{
+  intent?: 'primary' | 'secondary' | undefined
+  size?: 'sm' | 'lg' | undefined
+  rounded?: boolean | undefined
+}>(buttonVariantProps)
+expectNotAssignable<ButtonVariantProps>({ class: 'px-2' })
+expectNotAssignable<ButtonVariantProps>({ className: 'py-2' })
+
+const baseButton = tv({
+  variants: {
+    tone: {
+      solid: 'bg-black',
+      soft: 'bg-gray-200',
+    },
+  },
+})
+
+const extendedButton = tv({
+  extend: baseButton,
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg',
+    },
+  },
+})
+
+type ExtendedButtonProps = VariantProps<typeof extendedButton>
+expectAssignable<ExtendedButtonProps>({ tone: 'solid', size: 'sm' })
+expectError(extendedButton({ tone: 'ghost' }))
+
+const card = tv({
+  base: 'card',
+  slots: {
+    root: 'card-root',
+    icon: 'card-icon',
+  },
+  variants: {
+    size: {
+      sm: { root: 'text-sm', icon: 'h-4' },
+      lg: { root: 'text-lg', icon: 'h-6' },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+})
+
+const cardSlots = card({ size: 'sm' })
+expectType<string>(cardSlots.base())
+expectType<string>(cardSlots.root())
+expectType<string>(cardSlots.icon())
+expectType<string>(cardSlots.root({ size: 'lg' }))
+expectError(cardSlots.root({ size: 'xl' }))
+
+const createResponsive = createTV({ responsiveVariants: ['sm', 'md'] as const })
+const responsiveButton = createResponsive({
+  variants: {
+    size: {
+      sm: 'text-sm',
+      lg: 'text-lg',
+    },
+  },
+})
+
+expectType<string>(responsiveButton())
+
+type ResponsiveProps = VariantProps<typeof responsiveButton>
+expectAssignable<ResponsiveProps>({ size: 'sm' })
+expectAssignable<ResponsiveProps>({ size: { initial: 'sm', md: 'lg' } })
+expectError(responsiveButton({ size: { lg: 'sm' } }))

packages-runtime/variants-v3/package.json

@@ -42,6 +42,7 @@
     "build": "tsdown",
     "test": "vitest run",
     "test:dev": "vitest",
+    "tsd": "tsd",
     "release": "pnpm publish",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"

packages-runtime/variants-v3/src/index.ts

@@ -228,3 +228,4 @@ export type {
   TVConfig,
   TWMConfig,
 }
+export type { VariantProps } from 'tailwind-variant-v3'