chore: update packages-runtime/variants

Author: sonofmagic

packages-runtime/variants/src/index.ts

@@ -18,9 +18,13 @@ import {
 
 type TailwindVariantsCn = <T extends CnOptions>(...classes: T) => (config?: TWMConfig) => CnReturn
 
-type TailwindVariantsComponent = ReturnType<typeof tailwindVariantsTv>
+type TailwindVariantsComponent = ((props?: unknown) => unknown) & Record<PropertyKey, unknown>
 
-type TailwindVariantsResult = ReturnType<TailwindVariantsComponent>
+type TailwindVariantsResult<TComponent extends TailwindVariantsComponent> = ReturnType<TComponent>
+
+type TailwindVariantsOptions = Parameters<typeof tailwindVariantsTv>[0]
+
+type TailwindVariantsConfig = Parameters<typeof tailwindVariantsTv>[1]
 
 function mergeConfigs(...configs: (TVConfig | undefined)[]): TVConfig {
   const baseTwMergeConfig = defaultConfig.twMergeConfig
@@ -72,19 +76,19 @@ function copyComponentMetadata(target: TailwindVariantsComponent, source: Tailwi
   Object.defineProperties(target, descriptors)
 }
 
-function wrapComponent(
-  component: TailwindVariantsComponent,
+function wrapComponent<TComponent extends TailwindVariantsComponent>(
+  component: TComponent,
   config: TVConfig,
   mergeClassList: (value: CnReturn, config?: TWMConfig) => CnReturn,
-): TailwindVariantsComponent {
+): TComponent {
   const wrapped = ((props?: unknown) => {
-    const result = component(props) as TailwindVariantsResult
+    const result = component(props) as TailwindVariantsResult<TComponent>
 
     if (result == null || typeof result === 'string') {
       return mergeClassList(result as CnReturn, config)
     }
 
-    const slotEntries = Reflect.ownKeys(result) as Array<keyof typeof result>
+    const slotEntries = Reflect.ownKeys(result) as Array<keyof TailwindVariantsResult<TComponent>>
     const slots: Record<PropertyKey, any> = {}
 
     for (const key of slotEntries) {
@@ -99,8 +103,8 @@ function wrapComponent(
       }
     }
 
-    return slots as typeof result
-  }) as TailwindVariantsComponent
+    return slots as TailwindVariantsResult<TComponent>
+  }) as TComponent
 
   copyComponentMetadata(wrapped, component)
 
@@ -160,23 +164,29 @@ function createVariantsRuntime(options?: CreateOptions) {
     return transformers.escape(normalized)
   }
 
-  const tv: TV = ((options, config) => {
+  const tv = ((options: TailwindVariantsOptions, config?: TailwindVariantsConfig) => {
     const mergedConfig = mergeConfigs(config)
     const upstreamConfig = disableTailwindMerge(config)
-    const component = tailwindVariantsTv(options, upstreamConfig)
+    const component = tailwindVariantsTv(
+      options as TailwindVariantsOptions,
+      upstreamConfig as TailwindVariantsConfig,
+    ) as unknown as TailwindVariantsComponent
     return wrapComponent(component, mergedConfig, mergeClassList)
-  }) as TV
+  }) as unknown as TV
 
   const createTVRuntime: typeof tailwindVariantsCreateTV = (configProp?: TVConfig) => {
     const tailwindCreate = tailwindVariantsCreateTV(disableTailwindMerge(configProp))
 
-    return (options, config) => {
+    return ((options: TailwindVariantsOptions, config?: TailwindVariantsConfig) => {
       const mergedConfig = mergeConfigs(configProp, config)
-      const component = config
-        ? tailwindCreate(options, disableTailwindMerge(config))
-        : tailwindCreate(options)
+      const component = (config
+        ? tailwindCreate(
+            options as TailwindVariantsOptions,
+            disableTailwindMerge(config) as TailwindVariantsConfig,
+          )
+        : tailwindCreate(options as TailwindVariantsOptions)) as unknown as TailwindVariantsComponent
       return wrapComponent(component, mergedConfig, mergeClassList)
-    }
+    }) as unknown as ReturnType<typeof tailwindVariantsCreateTV>
   }
 
   return {

packages-runtime/variants/test/variants.test.ts

@@ -36,13 +36,63 @@ describe('variants runtime', () => {
     expect(button({ tone: 'accent' })).toBe('text-_b_hececec_B')
   })
 
+  it('escapes rpx units and color literals inside tv output', () => {
+    const stack = tv({
+      base: 'text-[24rpx] bg-[#0f0]',
+      variants: {
+        tone: {
+          danger: 'text-[#FF0000] text-[32rpx]',
+        },
+      },
+    })
+
+    const baseOutput = stack()?.split(' ')
+    expect(new Set(baseOutput)).toEqual(new Set(['text-_b24rpx_B', 'bg-_b_h0f0_B']))
+
+    const variantOutput = stack({ tone: 'danger' })?.split(' ')
+    expect(new Set(variantOutput)).toEqual(new Set([
+      'text-_b32rpx_B',
+      'bg-_b_h0f0_B',
+      'text-_b_hFF0000_B',
+    ]))
+  })
+
   it('supports custom transformers through create', () => {
     const { tv: rawTv } = createVariants({ escape: false })
     const badge = rawTv({ base: 'text-[#ececec]' })
 
     expect(badge()).toBe('text-[#ececec]')
   })
 
+  it('respects disabled escape/unescape options in runtime factory', () => {
+    const runtime = createVariants({ escape: false, unescape: false })
+    const badge = runtime.tv({
+      base: 'text-[#ECECEC]',
+      variants: {
+        tone: {
+          accent: 'text-[#101010]',
+        },
+      },
+    })
+
+    // Should bypass escape/unescape while still merging conflicting classes.
+    expect(badge({ tone: 'accent' })).toBe('text-[#101010]')
+
+    const aggregate = runtime.cn('text-[#ECECEC]', 'text-[#101010]')
+    expect(aggregate()).toBe('text-[#101010]')
+    expect(aggregate({ twMerge: false })).toBe('text-[#ECECEC] text-[#101010]')
+
+    const mergedTv = runtime.tv({
+      base: 'text-[#101010]',
+      variants: {
+        tone: {
+          accent: 'text-[#ECECEC]',
+        },
+      },
+    })
+    expect(mergedTv({ tone: 'accent' })).toBe('text-[#ECECEC]')
+  })
+
   it('wraps cn aggregation with merge + escaping', () => {
     const aggregate = cn('text-[#ececec]', 'text-[#ECECEC]')
 
@@ -74,4 +124,78 @@ describe('variants runtime', () => {
     expect(aggregate()).toBeUndefined()
     expect(cnBase()).toBeUndefined()
   })
+
+  it('aggregates rpx units and hex colors via cn helpers', () => {
+    const aggregate = cn('text-[16rpx]', 'bg-[#ff0000]', 'text-[#00FF00]')
+
+    expect(aggregate()).toBe('text-_b16rpx_B bg-_b_hff0000_B text-_b_h00FF00_B')
+    expect(cnBase('border-[2rpx]', 'text-[#123456]')).toBe('border-_b2rpx_B text-_b_h123456_B')
+  })
+
+  it('preserves tailwind-variants metadata when wrapping components', () => {
+    const badge = tv({
+      base: 'text-[#ececec]',
+      variants: {
+        size: {
+          sm: 'text-sm',
+        },
+      },
+      defaultVariants: {
+        size: 'sm',
+      },
+    })
+
+    expect(badge.variantKeys).toEqual(['size'])
+    expect(badge.defaultVariants).toEqual({ size: 'sm' })
+  })
+
+  it('wraps slot functions so per-slot output is escaped and merged', () => {
+    const alert = tv({
+      slots: {
+        base: 'text-[#101010]',
+        icon: 'text-[#202020]',
+      },
+      variants: {
+        tone: {
+          accent: {
+            base: 'text-[#ECECEC]',
+            icon: 'text-[#ECECEC]',
+          },
+        },
+      },
+    })
+
+    const slots = alert({ tone: 'accent' })
+    expect(typeof slots.base).toBe('function')
+    expect(slots.base()).toBe('text-_b_hECECEC_B')
+    expect(slots.icon()).toBe('text-_b_hECECEC_B')
+    expect(slots.icon({ class: 'text-[#303030]' })).toBe('text-_b_h303030_B')
+  })
+
+  it('merges config overrides from createTV invocations', () => {
+    const makeTv = createTV({ twMerge: false })
+    const badge = makeTv({
+      base: 'text-[#101010]',
+      variants: {
+        tone: {
+          accent: 'text-[#ECECEC]',
+        },
+      },
+    })
+
+    expect(badge({ tone: 'accent' })).toBe('text-_b_h101010_B text-_b_hECECEC_B')
+
+    const mergedBadge = makeTv(
+      {
+        base: 'text-[#101010]',
+        variants: {
+          tone: {
+            accent: 'text-[#ECECEC]',
+          },
+        },
+      },
+      { twMerge: true },
+    )
+    expect(mergedBadge({ tone: 'accent' })).toBe('text-_b_hECECEC_B')
+  })
 })