Add support to configure the modifier separator

[jgornick]

We've configured our classes to use a different modifier separator. Would it be possible to configure the separator with tailwind-merge?

If I'm understanding the flow of the code, it seems like we would only need to provide the configuration option to:

tailwind-merge/src/lib/merge-classlist.ts

Lines 77 to 112 in e9f1e1b

	const SPLIT_MODIFIER_REGEX = /[:[\]]/g
	function splitModifiers(className: string) {
	const modifiers = []
	let bracketDepth = 0
	let modifierStart = 0
	let match: RegExpExecArray | null
	while ((match = SPLIT_MODIFIER_REGEX.exec(className))) {
	if (match[0] === ':') {
	if (bracketDepth === 0) {
	const nextModifierStart = match.index! + 1
	modifiers.push(className.substring(modifierStart, nextModifierStart))
	modifierStart = nextModifierStart
	}
	} else if (match[0] === '[') {
	bracketDepth++
	} else if (match[0] === ']') {
	bracketDepth--
	}
	}
	const baseClassNameWithImportantModifier =
	modifiers.length === 0 ? className : className.substring(modifierStart)
	const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)
	const baseClassName = hasImportantModifier
	? baseClassNameWithImportantModifier.substring(1)
	: baseClassNameWithImportantModifier
	return {
	modifiers,
	hasImportantModifier,
	baseClassName,
	}
	}

Any help would be greatly appreciated! Thank you!

[dcastil]

Hey @jgornick! 👋 I think that should be possible. Are you using a single character as separator or multiple characters?

Just bookmarking some links from my research in here:

• Tailwind splits out modifieders in https://github.com/tailwindlabs/tailwindcss/blob/226be119dfb95706486df0d38f3ce357fb4ac856/src/lib/generateRules.js#L534.
• Tailwind's split modifier logic is in https://github.com/tailwindlabs/tailwindcss/blob/226be119dfb95706486df0d38f3ce357fb4ac856/src/util/splitAtTopLevelOnly.js.
• There might be a bug in my current split modifier logic. Need to read more about it in Improve data type analysis for arbitrary values tailwindlabs/tailwindcss#9320.

[dcastil]

@jgornick I just added support for custom separators in v1.8.0.

You can add it to the tailwind-merge config like this:

const twMerge = extendTailwindMerge({ separator: '…' })

Let me know if you encounter any issues with it!

[jgornick]

Well that was fast :)

To answer your earlier question, we use 2 characters (__). It looks like the implementation does support multiple characters so we should be all good!

Thank you so much for this update!

[dcastil]

Yeah, I basically copied the modifier separation logic from Tailwind, so it should work the same way. 😊