fix: twMerge adapter resolution for browser-safe builds

Author: sonofmagic

.changeset/fix-tailwind-variant-v3-merge.md

@@ -0,0 +1,5 @@
+---
+"tailwind-variant-v3": patch
+---
+
+Fix twMerge adapter resolution for browser-safe builds and keep default merge behavior when overriding config.

…ngeset/add-postcss-tests-and-refactor.md …ignore/add-postcss-tests-and-refactor.md.changeset/add-postcss-tests-and-refactor.md renamed to .changeset/ignore/add-postcss-tests-and-refactor.md .changeset/add-postcss-tests-and-refactor.md renamed to .changeset/ignore/add-postcss-tests-and-refactor.md

@@ -2,19 +2,57 @@ import type { TailwindMergeConfig } from './constants'
 import type { ClassValue, TailwindMergeAdapter, TVConfig, TWMConfig } from './types'
 import { defaultConfig } from './constants'
 import { isEmptyObject, isEqual } from './utils'
-// eslint-disable-next-line perfectionist/sort-imports
-import { createRequire } from 'node:module'
 
 export type ClassMerger = (...classes: ClassValue[]) => string | undefined
 
 const MERGE_MODULE_IDS = ['tailwind-merge'] as const
+// Keep the ESM output browser-friendly by avoiding static Node built-in imports.
 const requireFromThisModule = (() => {
-  try {
-    return createRequire(import.meta.url)
-  }
-  catch {
+  const moduleRef = globalThis.module as unknown as {
+    createRequire?: (url: string | URL) => NodeRequire
+    require?: NodeRequire
+  } | undefined
+
+  if (!moduleRef) {
     return null
   }
+
+  if (typeof moduleRef.createRequire === 'function') {
+    try {
+      const moduleUrl = new URL(import.meta.url)
+      moduleUrl.search = ''
+      moduleUrl.hash = ''
+      return moduleRef.createRequire(moduleUrl)
+    }
+    catch {
+      return null
+    }
+  }
+
+  const moduleCtor = (moduleRef as { constructor?: { createRequire?: (url: string | URL) => NodeRequire } }).constructor
+
+  if (typeof moduleCtor?.createRequire === 'function') {
+    try {
+      const moduleUrl = new URL(import.meta.url)
+      moduleUrl.search = ''
+      moduleUrl.hash = ''
+      return moduleCtor.createRequire(moduleUrl)
+    }
+    catch {
+      return null
+    }
+  }
+
+  if (typeof moduleRef.require === 'function') {
+    try {
+      return moduleRef.require.bind(moduleRef)
+    }
+    catch {
+      return null
+    }
+  }
+
+  return null
 })()
 
 let cachedTwMerge: ((className: string) => string) | null = null
@@ -96,7 +134,7 @@ function createTailwindMerge(adapter: TailwindMergeAdapter | null) {
     return adapter.twMerge
   }
 
-  const activeMergeConfig = cachedTwMergeConfig as Record<string, any>
+  const activeMergeConfig = cachedTwMergeConfig as NonNullable<TWMConfig['twMergeConfig']>
 
   return adapter.extendTailwindMerge({
     ...activeMergeConfig,
@@ -178,11 +216,13 @@ export function cn<T extends ClassValue[]>(...classes: T) {
       return undefined
     }
 
-    if (!config.twMerge) {
+    const resolvedConfig = config === defaultConfig ? config : { ...defaultConfig, ...config }
+
+    if (!resolvedConfig.twMerge) {
       return className
     }
 
-    const adapter = resolveMergeAdapter(config)
+    const adapter = resolveMergeAdapter(resolvedConfig)
     const shouldRefreshAdapter = adapter !== cachedActiveAdapter
 
     if (!cachedTwMerge || didTwMergeConfigChange || shouldRefreshAdapter) {

.changeset/fix-type-errors-98f3d7d9c.md …eset/ignore/fix-type-errors-98f3d7d9c.md.changeset/fix-type-errors-98f3d7d9c.md renamed to .changeset/ignore/fix-type-errors-98f3d7d9c.md .changeset/fix-type-errors-98f3d7d9c.md renamed to .changeset/ignore/fix-type-errors-98f3d7d9c.md

@@ -1,4 +1,4 @@
-import type { CreateTVFactory, TV, TVConfig } from './types'
+import type { ClassValue, CreateTVFactory, TV, TVConfig } from './types'
 import { defaultConfig } from './constants'
 import { hasSlotOverrides, hasVariantOverrides } from './helpers'
 import { cn, cnBase, createClassMerger, updateTailwindMergeConfig } from './merge'
@@ -13,6 +13,37 @@ import {
   resolveResponsiveSettings,
 } from './variants'
 
+interface TVExtendShape {
+  base?: ClassValue
+  variants?: Record<string, any>
+  defaultVariants?: Record<string, any>
+  slots?: Record<string, any>
+  compoundVariants?: any[]
+  compoundSlots?: any[]
+}
+
+type TVExtend = TVExtendShape | null
+
+interface TVOptions {
+  base?: ClassValue
+  extend?: TVExtend
+  slots?: Record<string, any> | undefined
+  variants?: Record<string, any>
+  compoundVariants?: any[]
+  compoundSlots?: any[]
+  defaultVariants?: Record<string, any>
+}
+
+interface TVProps extends Record<string, any> {
+  class?: ClassValue
+  className?: ClassValue
+}
+
+interface SlotPropsArg extends Record<string, any> {
+  class?: ClassValue
+  className?: ClassValue
+}
+
 function mergeSlotDefinitions(
   baseSlots: Record<string, any>,
   overrideSlots: Record<string, any>,
@@ -39,7 +70,7 @@ function assertArray(value: unknown, propName: string): asserts value is any[] {
   }
 }
 
-export function tvImplementation(options: Record<string, any>, configProp?: TVConfig) {
+export function tvImplementation(options: TVOptions, configProp?: TVConfig) {
   const {
     extend = null,
     slots: slotProps = {},
@@ -51,7 +82,9 @@ export function tvImplementation(options: Record<string, any>, configProp?: TVCo
 
   const config: TVConfig = { ...defaultConfig, ...configProp }
 
-  const base = extend?.base ? cnBase(extend.base, options?.base) : options?.base
+  const base = extend?.base
+    ? cnBase(extend.base, options?.base)
+    : options?.base
 
   const variants = extend?.variants && !isEmptyObject(extend.variants)
     ? mergeObjects(variantsProps, extend.variants)
@@ -67,14 +100,14 @@ export function tvImplementation(options: Record<string, any>, configProp?: TVCo
   const isExtendedSlotsEmpty = isEmptyObject(extendSlots)
   const hasOwnSlots = !isEmptyObject(slotProps)
 
-  const componentSlots = hasOwnSlots
+  const componentSlots: Record<string, any> = hasOwnSlots
     ? {
         base: cnBase(options?.base, isExtendedSlotsEmpty && extend?.base),
         ...slotProps,
       }
     : {}
 
-  const slots = isExtendedSlotsEmpty
+  const slots: Record<string, any> = isExtendedSlotsEmpty
     ? componentSlots
     : mergeSlotDefinitions(
         { ...extendSlots },
@@ -93,12 +126,12 @@ export function tvImplementation(options: Record<string, any>, configProp?: TVCo
   let cachedDefaultResult: any
   let hasCachedDefaultResult = false
 
-  const component = (propsParam?: Record<string, any>) => {
+  const component = (propsParam?: TVProps) => {
     if (!propsParam && hasCachedDefaultResult) {
       return cachedDefaultResult
     }
 
-    const props = propsParam ?? {}
+    const props: Record<string, any> = propsParam ?? {}
 
     assertArray(compoundVariants, 'compoundVariants')
     assertArray(compoundSlots, 'compoundSlots')
@@ -116,7 +149,9 @@ export function tvImplementation(options: Record<string, any>, configProp?: TVCo
       config,
       props,
       variantResponsiveSettings: responsiveState.variantResponsiveSettings,
-      globalResponsiveSetting: responsiveState.globalResponsiveSetting,
+      ...(responsiveState.globalResponsiveSetting === undefined
+        ? {}
+        : { globalResponsiveSetting: responsiveState.globalResponsiveSetting }),
     })
 
     const baseVariantClassNames = getVariantClassNames(context)
@@ -157,12 +192,15 @@ export function tvImplementation(options: Record<string, any>, configProp?: TVCo
       )
     }
 
-    const slotsFns: Record<string, any> = {}
+    const slotsFns: Record<
+      string,
+      (slotPropsArg?: SlotPropsArg) => ReturnType<typeof mergeClasses>
+    > = {}
 
     for (const slotKey of slotKeys) {
       const cached = baseSlotOutputs.get(slotKey)
 
-      slotsFns[slotKey] = (slotPropsArg?: Record<string, any>) => {
+      slotsFns[slotKey] = (slotPropsArg?: SlotPropsArg) => {
         if (!slotPropsArg || !hasSlotOverrides(slotPropsArg)) {
           return cached
         }

.changeset/raise-node-version-to-20-19.md …et/ignore/raise-node-version-to-20-19.md.changeset/raise-node-version-to-20-19.md renamed to .changeset/ignore/raise-node-version-to-20-19.md .changeset/raise-node-version-to-20-19.md renamed to .changeset/ignore/raise-node-version-to-20-19.md

@@ -26,10 +26,12 @@ export function resolveResponsiveSettings(
   if (Array.isArray(responsiveConfig) || typeof responsiveConfig === 'boolean') {
     globalResponsiveSetting = responsiveConfig
   }
-  else if (responsiveConfig && typeof responsiveConfig === 'object') {
+  else if (responsiveConfig && typeof responsiveConfig === 'object' && !Array.isArray(responsiveConfig)) {
+    const responsiveMap = responsiveConfig as Record<string, boolean | string[] | undefined>
+
     for (const key of variantKeys) {
-      if (responsiveConfig[key] !== undefined) {
-        variantResponsiveSettings[key] = responsiveConfig[key] as boolean | string[]
+      if (responsiveMap[key] !== undefined) {
+        variantResponsiveSettings[key] = responsiveMap[key] as boolean | string[]
       }
     }
   }
@@ -337,7 +339,7 @@ export function getCompoundVariantClassNamesBySlot(
     return compoundClassNames
   }
 
-  const result: Record<string, any> = {}
+  const result: { base?: any } & Record<string, any> = {}
 
   for (const className of compoundClassNames) {
     if (typeof className === 'string') {

.changeset/split-typedoc-refactor.md …angeset/ignore/split-typedoc-refactor.md.changeset/split-typedoc-refactor.md renamed to .changeset/ignore/split-typedoc-refactor.md .changeset/split-typedoc-refactor.md renamed to .changeset/ignore/split-typedoc-refactor.md

@@ -1,4 +1,8 @@
+import { extendTailwindMerge, twMerge } from 'tailwind-merge'
 import { expect } from 'vitest'
+import { defaultConfig } from '../src/index'
+
+defaultConfig.twMergeAdapter = { extendTailwindMerge, twMerge }
 
 function parseClasses(result: string | string[]) {
   return (typeof result === 'string' ? result.split(' ') : result).slice().sort()