Enable multiple createConfig functions

README.md

@@ -153,7 +153,7 @@ If some of these points don't apply to you, it makes sense to test whether `twMe
 ### `createTailwindMerge`
 
 ```ts
-function createTailwindMerge(createConfig: CreateConfig): TailwindMerge
+function createTailwindMerge(...createConfig: CreateConfig[]): TailwindMerge
 ```
 
 Function to create merge function with custom config.
@@ -194,6 +194,23 @@ const customTwMerge = createTailwindMerge((getDefaultConfig) => {
 })
 ```
 
+You can also use multiple `createConfig` functions which is convenient if you want to combine your config with third-party plugins.
+
+```ts
+const customTwMerge = createTailwindConfig(withSomePlugin, (getConfig) => {
+    // ↓ Gets config returned by `withSomePlugin`
+    const config = getConfig()
+
+    return {
+        ...config,
+        classGroups: {
+            ...config.classGroups,
+            mySpecialClassGroup: [{ special: ['1', '2'] }],
+        },
+    }
+})
+```
+
 ### `validators`
 
 ```ts

src/tailwind-merge.ts

@@ -3,20 +3,25 @@ import { getDefaultConfig } from './default-config'
 import { Config } from './types'
 import { mergeClassList } from './merge-classlist'
 
-type CreateConfig = (getDefault: typeof getDefaultConfig) => Config
+type CreateConfig = (getConfig: () => Config) => Config
 type ClassLists = ClassListElement[]
 type ClassListElement = string | undefined | null | false
 type TailwindMerge = (...classLists: ClassLists) => string
 type ConfigUtils = ReturnType<typeof createConfigUtils>
 
-export function createTailwindMerge(createConfig: CreateConfig): TailwindMerge {
+export function createTailwindMerge(...createConfigFunctions: CreateConfig[]): TailwindMerge {
     let configUtils: ConfigUtils
     let cacheGet: ConfigUtils['cache']['get']
     let cacheSet: ConfigUtils['cache']['set']
     let functionToCall = initTailwindMerge
 
     function initTailwindMerge(classList: string) {
-        configUtils = createConfigUtils(createConfig(getDefaultConfig))
+        const createConfig = createConfigFunctions.reduce<() => Config>(
+            (getPreviousConfig, createConfigCurrent) => () =>
+                createConfigCurrent(getPreviousConfig),
+            getDefaultConfig
+        )
+        configUtils = createConfigUtils(createConfig())
         cacheGet = configUtils.cache.get
         cacheSet = configUtils.cache.set
         functionToCall = tailwindMerge

tests/create-tailwind-merge.test.ts

@@ -0,0 +1,77 @@
+import { createTailwindMerge } from '../src'
+
+test('createTailwindMerge() works with single config function', () => {
+    const tailwindMerge = createTailwindMerge(() => ({
+        cacheSize: 20,
+        prefixes: ['my-prefix'],
+        classGroups: {
+            fooKey: [{ fooKey: ['bar', 'baz'] }],
+            fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'],
+            otherKey: ['nother', 'group'],
+        },
+        conflictingClassGroups: {
+            fooKey: ['otherKey'],
+            otherKey: ['fooKey', 'fooKey2'],
+        },
+    }))
+
+    expect(tailwindMerge('')).toBe('')
+    expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
+    expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
+        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
+    )
+    expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
+    expect(tailwindMerge('fooKey-bar group')).toBe('group')
+    expect(tailwindMerge('group other-2')).toBe('group other-2')
+    expect(tailwindMerge('other-2 group')).toBe('group')
+})
+
+test('createTailwindMerge() works with multiple config functions', () => {
+    const tailwindMerge = createTailwindMerge(
+        () => ({
+            cacheSize: 20,
+            prefixes: ['my-prefix'],
+            classGroups: {
+                fooKey: [{ fooKey: ['bar', 'baz'] }],
+                fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'],
+                otherKey: ['nother', 'group'],
+            },
+            conflictingClassGroups: {
+                fooKey: ['otherKey'],
+                otherKey: ['fooKey', 'fooKey2'],
+            },
+        }),
+        (getConfig) => {
+            const config = getConfig()
+            return {
+                ...config,
+                prefixes: [...config.prefixes, 'second'],
+                classGroups: {
+                    ...config.classGroups,
+                    helloFromSecondConfig: ['hello-there'],
+                },
+                conflictingClassGroups: {
+                    ...config.conflictingClassGroups,
+                    fooKey: [
+                        ...(config.conflictingClassGroups.fooKey ?? []),
+                        'helloFromSecondConfig',
+                    ],
+                },
+            }
+        }
+    )
+
+    expect(tailwindMerge('')).toBe('')
+    expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
+    expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
+        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
+    )
+    expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
+    expect(tailwindMerge('fooKey-bar group')).toBe('group')
+    expect(tailwindMerge('group other-2')).toBe('group other-2')
+    expect(tailwindMerge('other-2 group')).toBe('group')
+
+    expect(tailwindMerge('second:group second:nother')).toBe('second:nother')
+    expect(tailwindMerge('fooKey-bar hello-there')).toBe('fooKey-bar hello-there')
+    expect(tailwindMerge('hello-there fooKey-bar')).toBe('fooKey-bar')
+})

tests/public-api.test.ts

@@ -1,8 +1,15 @@
-import { twMerge, createTailwindMerge } from '../src'
+import { twMerge, createTailwindMerge, validators } from '../src'
 
 test('has correct export types', () => {
     expect(twMerge).toStrictEqual(expect.any(Function))
     expect(createTailwindMerge).toStrictEqual(expect.any(Function))
+    expect(validators).toEqual({
+        isLength: expect.any(Function),
+        isCustomLength: expect.any(Function),
+        isInteger: expect.any(Function),
+        isCustomValue: expect.any(Function),
+        isAny: expect.any(Function),
+    })
 })
 
 test('twMerge() has correct inputs and outputs', () => {
@@ -87,3 +94,11 @@ test('createTailwindMerge() has correct inputs and outputs', () => {
         tailwindMerge(() => {})
     }
 })
+
+test('validators have correct inputs and outputs', () => {
+    expect(validators.isLength('')).toEqual(expect.any(Boolean))
+    expect(validators.isCustomLength('')).toEqual(expect.any(Boolean))
+    expect(validators.isInteger('')).toEqual(expect.any(Boolean))
+    expect(validators.isCustomValue('')).toEqual(expect.any(Boolean))
+    expect(validators.isAny()).toEqual(expect.any(Boolean))
+})

tests/validators.test.ts

@@ -0,0 +1,84 @@
+import { validators } from '../src'
+
+const { isLength, isCustomLength, isInteger, isCustomValue, isAny } = validators
+
+describe('validators', () => {
+    test('isLength', () => {
+        expect(isLength('1')).toBe(true)
+        expect(isLength('1023713')).toBe(true)
+        expect(isLength('1.5')).toBe(true)
+        expect(isLength('1231.503761')).toBe(true)
+        expect(isLength('px')).toBe(true)
+        expect(isLength('full')).toBe(true)
+        expect(isLength('screen')).toBe(true)
+        expect(isLength('1/2')).toBe(true)
+        expect(isLength('123/345')).toBe(true)
+        expect(isLength('[3.7%]')).toBe(true)
+        expect(isLength('[481px]')).toBe(true)
+        expect(isLength('[19.1rem]')).toBe(true)
+        expect(isLength('[50vw]')).toBe(true)
+        expect(isLength('[length:var(--custom)]')).toBe(true)
+
+        expect(isLength('1d5')).toBe(false)
+        expect(isLength('[1]')).toBe(false)
+        expect(isLength('[12px')).toBe(false)
+        expect(isLength('12px]')).toBe(false)
+        expect(isLength('one')).toBe(false)
+    })
+
+    test('isCustomLength', () => {
+        expect(isCustomLength('[3.7%]')).toBe(true)
+        expect(isCustomLength('[481px]')).toBe(true)
+        expect(isCustomLength('[19.1rem]')).toBe(true)
+        expect(isCustomLength('[50vw]')).toBe(true)
+        expect(isCustomLength('[length:var(--custom)]')).toBe(true)
+
+        expect(isCustomLength('1')).toBe(false)
+        expect(isCustomLength('3px')).toBe(false)
+        expect(isCustomLength('1d5')).toBe(false)
+        expect(isCustomLength('[1]')).toBe(false)
+        expect(isCustomLength('[12px')).toBe(false)
+        expect(isCustomLength('12px]')).toBe(false)
+        expect(isCustomLength('one')).toBe(false)
+    })
+
+    test('isInteger', () => {
+        expect(isInteger('1')).toBe(true)
+        expect(isInteger('123')).toBe(true)
+        expect(isInteger('8312')).toBe(true)
+        expect(isInteger('[8312]')).toBe(true)
+        expect(isInteger('[2]')).toBe(true)
+
+        expect(isInteger('[8312px]')).toBe(false)
+        expect(isInteger('[8312%]')).toBe(false)
+        expect(isInteger('[8312rem]')).toBe(false)
+        expect(isInteger('8312.2')).toBe(false)
+        expect(isInteger('1.2')).toBe(false)
+        expect(isInteger('one')).toBe(false)
+        expect(isInteger('1/2')).toBe(false)
+        expect(isInteger('1%')).toBe(false)
+        expect(isInteger('1px')).toBe(false)
+    })
+
+    test('isCustomValue', () => {
+        expect(isCustomValue('[1]')).toBe(true)
+        expect(isCustomValue('[bla]')).toBe(true)
+        expect(isCustomValue('[not-a-custom-value?]')).toBe(true)
+        expect(isCustomValue('[auto,auto,minmax(0,1fr),calc(100vw-50%)]')).toBe(true)
+
+        expect(isCustomValue('[]')).toBe(false)
+        expect(isCustomValue('[1')).toBe(false)
+        expect(isCustomValue('1]')).toBe(false)
+        expect(isCustomValue('1')).toBe(false)
+        expect(isCustomValue('one')).toBe(false)
+        expect(isCustomValue('o[n]e')).toBe(false)
+    })
+
+    test('isAny', () => {
+        expect(isAny()).toBe(true)
+        // @ts-expect-error
+        expect(isAny('')).toBe(true)
+        // @ts-expect-error
+        expect(isAny('something')).toBe(true)
+    })
+})