Add yet-another-react-lightbox package and update .gitignore to exclude node_modules

This commit is contained in:
IGNY8 VPS (Salman)
2025-11-12 18:50:30 +00:00
parent bd2a5570a9
commit c92f4a5edd
9304 changed files with 29 additions and 2008667 deletions

View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2021 Dany Castillo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -1,38 +0,0 @@
<!-- This file is autogenerated. If you want to change this content, please do the changes in `./docs/README.md` instead. -->
<div align="center">
<br />
<a href="https://github.com/dcastil/tailwind-merge">
<img src="https://github.com/dcastil/tailwind-merge/raw/v3.0.1/assets/logo.svg" alt="tailwind-merge" height="150px" />
</a>
</div>
# tailwind-merge
Utility function to efficiently merge [Tailwind CSS](https://tailwindcss.com) classes in JS without style conflicts.
```ts
import { twMerge } from 'tailwind-merge'
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
```
- Supports Tailwind v4.0 (if you use Tailwind v3, use [tailwind-merge v2.6.0](https://github.com/dcastil/tailwind-merge/tree/v2.6.0))
- Works in all modern browsers and maintained Node versions
- Fully typed
- [Check bundle size on Bundlephobia](https://bundlephobia.com/package/tailwind-merge)
## Get started
- [What is it for](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/what-is-it-for.md)
- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/when-and-how-to-use-it.md)
- [Features](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/features.md)
- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/limitations.md)
- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/configuration.md)
- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/recipes.md)
- [API reference](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/api-reference.md)
- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/writing-plugins.md)
- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/versioning.md)
- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/contributing.md)
- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v3.0.1/docs/similar-packages.md)

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -1,91 +0,0 @@
{
"name": "tailwind-merge",
"version": "3.0.1",
"description": "Merge Tailwind CSS classes without style conflicts",
"keywords": [
"tailwindcss",
"tailwind",
"css",
"classes",
"className",
"classList",
"merge",
"conflict",
"override"
],
"homepage": "https://github.com/dcastil/tailwind-merge",
"bugs": {
"url": "https://github.com/dcastil/tailwind-merge/issues"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
},
"license": "MIT",
"author": "Dany Castillo",
"files": [
"dist",
"src"
],
"source": "src/index.ts",
"exports": {
".": {
"types": "./dist/types.d.ts",
"require": "./dist/bundle-cjs.js",
"import": "./dist/bundle-mjs.mjs",
"default": "./dist/bundle-mjs.mjs"
},
"./es5": {
"types": "./dist/types.d.ts",
"require": "./dist/es5/bundle-cjs.js",
"import": "./dist/es5/bundle-mjs.mjs",
"default": "./dist/es5/bundle-mjs.mjs"
}
},
"main": "./dist/bundle-cjs.js",
"types": "./dist/types.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/dcastil/tailwind-merge.git"
},
"sideEffects": false,
"scripts": {
"build": "rollup --config scripts/rollup.config.mjs",
"bench": "vitest bench --config scripts/vitest.config.mts",
"test": "vitest --config scripts/vitest.config.mts --coverage",
"test:watch": "vitest --config scripts/vitest.config.mts",
"test:exports": "node scripts/test-built-package-exports.cjs && node scripts/test-built-package-exports.mjs",
"lint": "eslint --max-warnings 0 '**'",
"preversion": "if [ -n \"$DANYS_MACHINE\" ]; then git checkout main && git pull; fi",
"version": "zx scripts/update-readme.mjs",
"postversion": "if [ -n \"$DANYS_MACHINE\" ]; then git push --follow-tags && open https://github.com/dcastil/tailwind-merge/releases; fi"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@codspeed/vitest-plugin": "^4.0.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-typescript": "^12.1.2",
"@vitest/coverage-v8": "^2.1.8",
"@vitest/eslint-plugin": "^1.1.22",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"babel-plugin-polyfill-regenerator": "^0.6.3",
"eslint": "^9.17.0",
"eslint-plugin-import": "^2.31.0",
"globby": "^11.1.0",
"prettier": "^3.4.2",
"rollup": "^4.29.1",
"rollup-plugin-delete": "^2.1.0",
"rollup-plugin-dts": "^6.1.1",
"tslib": "^2.8.1",
"typescript": "^5.7.2",
"typescript-eslint": "^8.19.0",
"vitest": "^2.1.8",
"zx": "^8.3.0"
},
"publishConfig": {
"provenance": true
}
}

View File

@@ -1,17 +0,0 @@
export { createTailwindMerge } from './lib/create-tailwind-merge'
export { getDefaultConfig } from './lib/default-config'
export { extendTailwindMerge } from './lib/extend-tailwind-merge'
export { fromTheme } from './lib/from-theme'
export { mergeConfigs } from './lib/merge-configs'
export { twJoin, type ClassNameValue } from './lib/tw-join'
export { twMerge } from './lib/tw-merge'
export {
type ClassValidator,
type Config,
type ConfigExtension,
type DefaultClassGroupIds,
type DefaultThemeGroupIds,
type ExperimentalParseClassNameParam,
type ParsedClassName as ExperimentalParsedClassName,
} from './lib/types'
export * as validators from './lib/validators'

View File

@@ -1,182 +0,0 @@
import {
AnyClassGroupIds,
AnyConfig,
AnyThemeGroupIds,
ClassGroup,
ClassValidator,
Config,
ThemeGetter,
ThemeObject,
} from './types'
export interface ClassPartObject {
nextPart: Map<string, ClassPartObject>
validators: ClassValidatorObject[]
classGroupId?: AnyClassGroupIds
}
interface ClassValidatorObject {
classGroupId: AnyClassGroupIds
validator: ClassValidator
}
const CLASS_PART_SEPARATOR = '-'
export const createClassGroupUtils = (config: AnyConfig) => {
const classMap = createClassMap(config)
const { conflictingClassGroups, conflictingClassGroupModifiers } = config
const getClassGroupId = (className: string) => {
const classParts = className.split(CLASS_PART_SEPARATOR)
// Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
if (classParts[0] === '' && classParts.length !== 1) {
classParts.shift()
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className)
}
const getConflictingClassGroupIds = (
classGroupId: AnyClassGroupIds,
hasPostfixModifier: boolean,
) => {
const conflicts = conflictingClassGroups[classGroupId] || []
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]!]
}
return conflicts
}
return {
getClassGroupId,
getConflictingClassGroupIds,
}
}
const getGroupRecursive = (
classParts: string[],
classPartObject: ClassPartObject,
): AnyClassGroupIds | undefined => {
if (classParts.length === 0) {
return classPartObject.classGroupId
}
const currentClassPart = classParts[0]!
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart)
const classGroupFromNextClassPart = nextClassPartObject
? getGroupRecursive(classParts.slice(1), nextClassPartObject)
: undefined
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart
}
if (classPartObject.validators.length === 0) {
return undefined
}
const classRest = classParts.join(CLASS_PART_SEPARATOR)
return classPartObject.validators.find(({ validator }) => validator(classRest))?.classGroupId
}
const arbitraryPropertyRegex = /^\[(.+)\]$/
const getGroupIdForArbitraryProperty = (className: string) => {
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)![1]
const property = arbitraryPropertyClassName?.substring(
0,
arbitraryPropertyClassName.indexOf(':'),
)
if (property) {
// I use two dots here because one dot is used as prefix for class groups in plugins
return 'arbitrary..' + property
}
}
}
/**
* Exported for testing only
*/
export const createClassMap = (config: Config<AnyClassGroupIds, AnyThemeGroupIds>) => {
const { theme, classGroups } = config
const classMap: ClassPartObject = {
nextPart: new Map<string, ClassPartObject>(),
validators: [],
}
for (const classGroupId in classGroups) {
processClassesRecursively(classGroups[classGroupId]!, classMap, classGroupId, theme)
}
return classMap
}
const processClassesRecursively = (
classGroup: ClassGroup<AnyThemeGroupIds>,
classPartObject: ClassPartObject,
classGroupId: AnyClassGroupIds,
theme: ThemeObject<AnyThemeGroupIds>,
) => {
classGroup.forEach((classDefinition) => {
if (typeof classDefinition === 'string') {
const classPartObjectToEdit =
classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition)
classPartObjectToEdit.classGroupId = classGroupId
return
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(
classDefinition(theme),
classPartObject,
classGroupId,
theme,
)
return
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId,
})
return
}
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(
classGroup,
getPart(classPartObject, key),
classGroupId,
theme,
)
})
})
}
const getPart = (classPartObject: ClassPartObject, path: string) => {
let currentClassPartObject = classPartObject
path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: new Map(),
validators: [],
})
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart)!
})
return currentClassPartObject
}
const isThemeGetter = (func: ClassValidator | ThemeGetter): func is ThemeGetter =>
(func as ThemeGetter).isThemeGetter

View File

@@ -1,14 +0,0 @@
import { createClassGroupUtils } from './class-group-utils'
import { createLruCache } from './lru-cache'
import { createParseClassName } from './parse-class-name'
import { createSortModifiers } from './sort-modifiers'
import { AnyConfig } from './types'
export type ConfigUtils = ReturnType<typeof createConfigUtils>
export const createConfigUtils = (config: AnyConfig) => ({
cache: createLruCache<string, string>(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
...createClassGroupUtils(config),
})

View File

@@ -1,50 +0,0 @@
import { createConfigUtils } from './config-utils'
import { mergeClassList } from './merge-classlist'
import { ClassNameValue, twJoin } from './tw-join'
import { AnyConfig } from './types'
type CreateConfigFirst = () => AnyConfig
type CreateConfigSubsequent = (config: AnyConfig) => AnyConfig
type TailwindMerge = (...classLists: ClassNameValue[]) => string
type ConfigUtils = ReturnType<typeof createConfigUtils>
export function createTailwindMerge(
createConfigFirst: CreateConfigFirst,
...createConfigRest: CreateConfigSubsequent[]
): TailwindMerge {
let configUtils: ConfigUtils
let cacheGet: ConfigUtils['cache']['get']
let cacheSet: ConfigUtils['cache']['set']
let functionToCall = initTailwindMerge
function initTailwindMerge(classList: string) {
const config = createConfigRest.reduce(
(previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig),
createConfigFirst() as AnyConfig,
)
configUtils = createConfigUtils(config)
cacheGet = configUtils.cache.get
cacheSet = configUtils.cache.set
functionToCall = tailwindMerge
return tailwindMerge(classList)
}
function tailwindMerge(classList: string) {
const cachedResult = cacheGet(classList)
if (cachedResult) {
return cachedResult
}
const result = mergeClassList(classList, configUtils)
cacheSet(classList, result)
return result
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments as any))
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,25 +0,0 @@
import { createTailwindMerge } from './create-tailwind-merge'
import { getDefaultConfig } from './default-config'
import { mergeConfigs } from './merge-configs'
import { AnyConfig, ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from './types'
type CreateConfigSubsequent = (config: AnyConfig) => AnyConfig
export const extendTailwindMerge = <
AdditionalClassGroupIds extends string = never,
AdditionalThemeGroupIds extends string = never,
>(
configExtension:
| ConfigExtension<
DefaultClassGroupIds | AdditionalClassGroupIds,
DefaultThemeGroupIds | AdditionalThemeGroupIds
>
| CreateConfigSubsequent,
...createConfig: CreateConfigSubsequent[]
) =>
typeof configExtension === 'function'
? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig)
: createTailwindMerge(
() => mergeConfigs(getDefaultConfig(), configExtension),
...createConfig,
)

View File

@@ -1,13 +0,0 @@
import { DefaultThemeGroupIds, NoInfer, ThemeGetter, ThemeObject } from './types'
export const fromTheme = <
AdditionalThemeGroupIds extends string = never,
DefaultThemeGroupIdsInner extends string = DefaultThemeGroupIds,
>(key: NoInfer<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>): ThemeGetter => {
const themeGetter = (theme: ThemeObject<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>) =>
theme[key] || []
themeGetter.isThemeGetter = true as const
return themeGetter
}

View File

@@ -1,52 +0,0 @@
// Export is needed because TypeScript complains about an error otherwise:
// Error: …/tailwind-merge/src/config-utils.ts(8,17): semantic error TS4058: Return type of exported function has or is using name 'LruCache' from external module "…/tailwind-merge/src/lru-cache" but cannot be named.
export interface LruCache<Key, Value> {
get(key: Key): Value | undefined
set(key: Key, value: Value): void
}
// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
export const createLruCache = <Key, Value>(maxCacheSize: number): LruCache<Key, Value> => {
if (maxCacheSize < 1) {
return {
get: () => undefined,
set: () => {},
}
}
let cacheSize = 0
let cache = new Map<Key, Value>()
let previousCache = new Map<Key, Value>()
const update = (key: Key, value: Value) => {
cache.set(key, value)
cacheSize++
if (cacheSize > maxCacheSize) {
cacheSize = 0
previousCache = cache
cache = new Map()
}
}
return {
get(key) {
let value = cache.get(key)
if (value !== undefined) {
return value
}
if ((value = previousCache.get(key)) !== undefined) {
update(key, value)
return value
}
},
set(key, value) {
if (cache.has(key)) {
cache.set(key, value)
} else {
update(key, value)
}
},
}
}

View File

@@ -1,89 +0,0 @@
import { ConfigUtils } from './config-utils'
import { IMPORTANT_MODIFIER } from './parse-class-name'
const SPLIT_CLASSES_REGEX = /\s+/
export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
const { parseClassName, getClassGroupId, getConflictingClassGroupIds, sortModifiers } =
configUtils
/**
* Set of classGroupIds in following format:
* `{importantModifier}{variantModifiers}{classGroupId}`
* @example 'float'
* @example 'hover:focus:bg-color'
* @example 'md:!pr'
*/
const classGroupsInConflict: string[] = []
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX)
let result = ''
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index]!
const {
isExternal,
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition,
} = parseClassName(originalClassName)
if (isExternal) {
result = originalClassName + (result.length > 0 ? ' ' + result : result)
continue
}
let hasPostfixModifier = !!maybePostfixModifierPosition
let classGroupId = getClassGroupId(
hasPostfixModifier
? baseClassName.substring(0, maybePostfixModifierPosition)
: baseClassName,
)
if (!classGroupId) {
if (!hasPostfixModifier) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result)
continue
}
classGroupId = getClassGroupId(baseClassName)
if (!classGroupId) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result)
continue
}
hasPostfixModifier = false
}
const variantModifier = sortModifiers(modifiers).join(':')
const modifierId = hasImportantModifier
? variantModifier + IMPORTANT_MODIFIER
: variantModifier
const classId = modifierId + classGroupId
if (classGroupsInConflict.includes(classId)) {
// Tailwind class omitted due to conflict
continue
}
classGroupsInConflict.push(classId)
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier)
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i]!
classGroupsInConflict.push(modifierId + group)
}
// Tailwind class not in conflict
result = originalClassName + (result.length > 0 ? ' ' + result : result)
}
return result
}

View File

@@ -1,84 +0,0 @@
import { AnyConfig, ConfigExtension, NoInfer } from './types'
/**
* @param baseConfig Config where other config will be merged into. This object will be mutated.
* @param configExtension Partial config to merge into the `baseConfig`.
*/
export const mergeConfigs = <ClassGroupIds extends string, ThemeGroupIds extends string = never>(
baseConfig: AnyConfig,
{
cacheSize,
prefix,
experimentalParseClassName,
extend = {},
override = {},
}: ConfigExtension<ClassGroupIds, ThemeGroupIds>,
) => {
overrideProperty(baseConfig, 'cacheSize', cacheSize)
overrideProperty(baseConfig, 'prefix', prefix)
overrideProperty(baseConfig, 'experimentalParseClassName', experimentalParseClassName)
overrideConfigProperties(baseConfig.theme, override.theme)
overrideConfigProperties(baseConfig.classGroups, override.classGroups)
overrideConfigProperties(baseConfig.conflictingClassGroups, override.conflictingClassGroups)
overrideConfigProperties(
baseConfig.conflictingClassGroupModifiers,
override.conflictingClassGroupModifiers,
)
overrideProperty(baseConfig, 'orderSensitiveModifiers', override.orderSensitiveModifiers)
mergeConfigProperties(baseConfig.theme, extend.theme)
mergeConfigProperties(baseConfig.classGroups, extend.classGroups)
mergeConfigProperties(baseConfig.conflictingClassGroups, extend.conflictingClassGroups)
mergeConfigProperties(
baseConfig.conflictingClassGroupModifiers,
extend.conflictingClassGroupModifiers,
)
mergeArrayProperties(baseConfig, extend, 'orderSensitiveModifiers')
return baseConfig
}
const overrideProperty = <T extends object, K extends keyof T>(
baseObject: T,
overrideKey: K,
overrideValue: T[K] | undefined,
) => {
if (overrideValue !== undefined) {
baseObject[overrideKey] = overrideValue
}
}
const overrideConfigProperties = (
baseObject: Partial<Record<string, readonly unknown[]>>,
overrideObject: Partial<Record<string, readonly unknown[]>> | undefined,
) => {
if (overrideObject) {
for (const key in overrideObject) {
overrideProperty(baseObject, key, overrideObject[key])
}
}
}
const mergeConfigProperties = (
baseObject: Partial<Record<string, readonly unknown[]>>,
mergeObject: Partial<Record<string, readonly unknown[]>> | undefined,
) => {
if (mergeObject) {
for (const key in mergeObject) {
mergeArrayProperties(baseObject, mergeObject, key)
}
}
}
const mergeArrayProperties = <Key extends string>(
baseObject: Partial<Record<NoInfer<Key>, readonly unknown[]>>,
mergeObject: Partial<Record<NoInfer<Key>, readonly unknown[]>>,
key: Key,
) => {
const mergeValue = mergeObject[key]
if (mergeValue !== undefined) {
baseObject[key] = baseObject[key] ? baseObject[key].concat(mergeValue) : mergeValue
}
}

View File

@@ -1,106 +0,0 @@
import { AnyConfig, ParsedClassName } from './types'
export const IMPORTANT_MODIFIER = '!'
const MODIFIER_SEPARATOR = ':'
const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length
export const createParseClassName = (config: AnyConfig) => {
const { prefix, experimentalParseClassName } = config
/**
* Parse class name into parts.
*
* Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
* @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
*/
let parseClassName = (className: string): ParsedClassName => {
const modifiers = []
let bracketDepth = 0
let parenDepth = 0
let modifierStart = 0
let postfixModifierPosition: number | undefined
for (let index = 0; index < className.length; index++) {
let currentCharacter = className[index]
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index))
modifierStart = index + MODIFIER_SEPARATOR_LENGTH
continue
}
if (currentCharacter === '/') {
postfixModifierPosition = index
continue
}
}
if (currentCharacter === '[') {
bracketDepth++
} else if (currentCharacter === ']') {
bracketDepth--
} else if (currentCharacter === '(') {
parenDepth++
} else if (currentCharacter === ')') {
parenDepth--
}
}
const baseClassNameWithImportantModifier =
modifiers.length === 0 ? className : className.substring(modifierStart)
const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier)
const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier
const maybePostfixModifierPosition =
postfixModifierPosition && postfixModifierPosition > modifierStart
? postfixModifierPosition - modifierStart
: undefined
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition,
}
}
if (prefix) {
const fullPrefix = prefix + MODIFIER_SEPARATOR
const parseClassNameOriginal = parseClassName
parseClassName = (className) =>
className.startsWith(fullPrefix)
? parseClassNameOriginal(className.substring(fullPrefix.length))
: {
isExternal: true,
modifiers: [],
hasImportantModifier: false,
baseClassName: className,
maybePostfixModifierPosition: undefined,
}
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName
parseClassName = (className) =>
experimentalParseClassName({ className, parseClassName: parseClassNameOriginal })
}
return parseClassName
}
const stripImportantModifier = (baseClassName: string) => {
if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(0, baseClassName.length - 1)
}
/**
* In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
* @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
*/
if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(1)
}
return baseClassName
}

View File

@@ -1,38 +0,0 @@
import { AnyConfig } from './types'
/**
* Sorts modifiers according to following schema:
* - Predefined modifiers are sorted alphabetically
* - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
*/
export const createSortModifiers = (config: AnyConfig) => {
const orderSensitiveModifiers = Object.fromEntries(
config.orderSensitiveModifiers.map((modifier) => [modifier, true]),
)
const sortModifiers = (modifiers: string[]) => {
if (modifiers.length <= 1) {
return modifiers
}
const sortedModifiers: string[] = []
let unsortedModifiers: string[] = []
modifiers.forEach((modifier) => {
const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier]
if (isPositionSensitive) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier)
unsortedModifiers = []
} else {
unsortedModifiers.push(modifier)
}
})
sortedModifiers.push(...unsortedModifiers.sort())
return sortedModifiers
}
return sortModifiers
}

View File

@@ -1,50 +0,0 @@
/**
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
*
* Specifically:
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
*
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
*/
export type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false
type ClassNameArray = ClassNameValue[]
export function twJoin(...classLists: ClassNameValue[]): string
export function twJoin() {
let index = 0
let argument: ClassNameValue
let resolvedValue: string
let string = ''
while (index < arguments.length) {
if ((argument = arguments[index++])) {
if ((resolvedValue = toValue(argument))) {
string && (string += ' ')
string += resolvedValue
}
}
}
return string
}
const toValue = (mix: ClassNameArray | string) => {
if (typeof mix === 'string') {
return mix
}
let resolvedValue: string
let string = ''
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if ((resolvedValue = toValue(mix[k] as ClassNameArray | string))) {
string && (string += ' ')
string += resolvedValue
}
}
}
return string
}

View File

@@ -1,4 +0,0 @@
import { createTailwindMerge } from './create-tailwind-merge'
import { getDefaultConfig } from './default-config'
export const twMerge = createTailwindMerge(getDefaultConfig)

View File

@@ -1,507 +0,0 @@
/**
* Type the tailwind-merge configuration adheres to.
*/
export interface Config<ClassGroupIds extends string, ThemeGroupIds extends string>
extends ConfigStaticPart,
ConfigGroupsPart<ClassGroupIds, ThemeGroupIds> {}
/**
* The static part of the tailwind-merge configuration. When merging multiple configurations, the properties of this interface are always overridden.
*/
interface ConfigStaticPart {
/**
* Integer indicating size of LRU cache used for memoizing results.
* - Cache might be up to twice as big as `cacheSize`
* - No cache is used for values <= 0
*/
cacheSize: number
/**
* Prefix added to Tailwind-generated classes
* @see https://tailwindcss.com/docs/configuration#prefix
*/
prefix?: string
/**
* Allows to customize parsing of individual classes passed to `twMerge`.
* All classes passed to `twMerge` outside of cache hits are passed to this function before it is determined whether the class is a valid Tailwind CSS class.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
experimentalParseClassName?(param: ExperimentalParseClassNameParam): ParsedClassName
}
/**
* Type of param passed to the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
export interface ExperimentalParseClassNameParam {
className: string
parseClassName(className: string): ParsedClassName
}
/**
* Type of the result returned by the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
export interface ParsedClassName {
/**
* Whether the class is external and merging logic should be sipped.
*
* If this is `true`, the class will be treated as if it wasn't a Tailwind class and will be passed through as is.
*/
isExternal?: boolean
/**
* Modifiers of the class in the order they appear in the class.
*
* @example ['hover', 'dark'] // for `hover:dark:bg-gray-100`
*/
modifiers: string[]
/**
* Whether the class has an `!important` modifier.
*
* @example true // for `hover:dark:!bg-gray-100`
*/
hasImportantModifier: boolean
/**
* Base class without preceding modifiers.
*
* @example 'bg-gray-100' // for `hover:dark:bg-gray-100`
*/
baseClassName: string
/**
* Index position of a possible postfix modifier in the class.
* If the class has no postfix modifier, this is `undefined`.
*
* This property is prefixed with "maybe" because tailwind-merge does not know whether something is a postfix modifier or part of the base class since it's possible to configure Tailwind CSS classes which include a `/` in the base class name.
*
* If a `maybePostfixModifierPosition` is present, tailwind-merge first tries to match the `baseClassName` without the possible postfix modifier to a class group. If tht fails, it tries again with the possible postfix modifier.
*
* @example 11 // for `bg-gray-100/50`
*/
maybePostfixModifierPosition: number | undefined
}
/**
* The dynamic part of the tailwind-merge configuration. When merging multiple configurations, the user can choose to either override or extend the properties of this interface.
*/
interface ConfigGroupsPart<ClassGroupIds extends string, ThemeGroupIds extends string> {
/**
* Theme scales used in classGroups.
*
* The keys are the same as in the Tailwind config but the values are sometimes defined more broadly.
*/
theme: NoInfer<ThemeObject<ThemeGroupIds>>
/**
* Object with groups of classes.
*
* @example
* {
* // Creates group of classes `group`, `of` and `classes`
* 'group-id': ['group', 'of', 'classes'],
* // Creates group of classes `look-at-me-other` and `look-at-me-group`.
* 'other-group': [{ 'look-at-me': ['other', 'group']}]
* }
*/
classGroups: NoInfer<Record<ClassGroupIds, ClassGroup<ThemeGroupIds>>>
/**
* Conflicting classes across groups.
*
* The key is ID of class group which creates conflict, values are IDs of class groups which receive a conflict.
* A class group ID is the key of a class group in classGroups object.
* @example { gap: ['gap-x', 'gap-y'] }
*/
conflictingClassGroups: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>
/**
* Postfix modifiers conflicting with other class groups.
*
* A class group ID is the key of a class group in classGroups object.
* @example { 'font-size': ['leading'] }
*/
conflictingClassGroupModifiers: NoInfer<
Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>
>
/**
* Modifiers whose order among multiple modifiers should be preserved because their order changes which element gets targeted.
*
* tailwind-merge makes sure that classes with these modifiers are not overwritten by classes with the same modifiers with order-sensitive modifiers being in a different position.
*/
orderSensitiveModifiers: string[]
}
/**
* Type of the configuration object that can be passed to `extendTailwindMerge`.
*/
export interface ConfigExtension<ClassGroupIds extends string, ThemeGroupIds extends string>
extends Partial<ConfigStaticPart> {
override?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>
extend?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>
}
type PartialPartial<T> = {
[P in keyof T]?: T[P] extends any[] ? T[P] : Partial<T[P]>
}
export type ThemeObject<ThemeGroupIds extends string> = Record<
ThemeGroupIds,
ClassGroup<ThemeGroupIds>
>
export type ClassGroup<ThemeGroupIds extends string> = readonly ClassDefinition<ThemeGroupIds>[]
type ClassDefinition<ThemeGroupIds extends string> =
| string
| ClassValidator
| ThemeGetter
| ClassObject<ThemeGroupIds>
export type ClassValidator = (classPart: string) => boolean
export interface ThemeGetter {
(theme: ThemeObject<AnyThemeGroupIds>): ClassGroup<AnyClassGroupIds>
isThemeGetter: true
}
type ClassObject<ThemeGroupIds extends string> = Record<
string,
readonly ClassDefinition<ThemeGroupIds>[]
>
/**
* Hack from https://stackoverflow.com/questions/56687668/a-way-to-disable-type-argument-inference-in-generics/56688073#56688073
*
* Could be replaced with NoInfer utility type from TypeScript (https://www.typescriptlang.org/docs/handbook/utility-types.html#noinfertype), but that is only supported in TypeScript 5.4 or higher, so I should wait some time before using it.
*/
export type NoInfer<T> = [T][T extends any ? 0 : never]
/**
* Theme group IDs included in the default configuration of tailwind-merge.
*
* If you want to use a scale that is not supported in the `ThemeObject` type,
* consider using `classGroups` instead of `theme`.
*
* @see https://github.com/dcastil/tailwind-merge/blob/main/docs/configuration.md#theme
* (the list of supported keys may vary between `tailwind-merge` versions)
*/
export type DefaultThemeGroupIds =
| 'animate'
| 'aspect'
| 'blur'
| 'breakpoint'
| 'color'
| 'container'
| 'drop-shadow'
| 'ease'
| 'font-weight'
| 'font'
| 'inset-shadow'
| 'leading'
| 'perspective'
| 'radius'
| 'shadow'
| 'spacing'
| 'text'
| 'tracking'
/**
* Class group IDs included in the default configuration of tailwind-merge.
*/
export type DefaultClassGroupIds =
| 'accent'
| 'align-content'
| 'align-items'
| 'align-self'
| 'animate'
| 'appearance'
| 'aspect'
| 'auto-cols'
| 'auto-rows'
| 'backdrop-blur'
| 'backdrop-brightness'
| 'backdrop-contrast'
| 'backdrop-filter'
| 'backdrop-grayscale'
| 'backdrop-hue-rotate'
| 'backdrop-invert'
| 'backdrop-opacity'
| 'backdrop-saturate'
| 'backdrop-sepia'
| 'backface'
| 'basis'
| 'bg-attachment'
| 'bg-blend'
| 'bg-clip'
| 'bg-color'
| 'bg-image'
| 'bg-origin'
| 'bg-position'
| 'bg-repeat'
| 'bg-size'
| 'blur'
| 'border-collapse'
| 'border-color-b'
| 'border-color-e'
| 'border-color-l'
| 'border-color-r'
| 'border-color-s'
| 'border-color-t'
| 'border-color-x'
| 'border-color-y'
| 'border-color'
| 'border-spacing-x'
| 'border-spacing-y'
| 'border-spacing'
| 'border-style'
| 'border-w-b'
| 'border-w-e'
| 'border-w-l'
| 'border-w-r'
| 'border-w-s'
| 'border-w-t'
| 'border-w-x'
| 'border-w-y'
| 'border-w'
| 'bottom'
| 'box-decoration'
| 'box'
| 'break-after'
| 'break-before'
| 'break-inside'
| 'break'
| 'brightness'
| 'caption'
| 'caret-color'
| 'clear'
| 'col-end'
| 'col-start-end'
| 'col-start'
| 'color-scheme'
| 'columns'
| 'container'
| 'content'
| 'contrast'
| 'cursor'
| 'delay'
| 'display'
| 'divide-color'
| 'divide-style'
| 'divide-x-reverse'
| 'divide-x'
| 'divide-y-reverse'
| 'divide-y'
| 'drop-shadow'
| 'duration'
| 'ease'
| 'end'
| 'field-sizing'
| 'fill'
| 'filter'
| 'flex-direction'
| 'flex-wrap'
| 'flex'
| 'float'
| 'font-family'
| 'font-size'
| 'font-smoothing'
| 'font-stretch'
| 'font-style'
| 'font-weight'
| 'forced-color-adjust'
| 'fvn-figure'
| 'fvn-fraction'
| 'fvn-normal'
| 'fvn-ordinal'
| 'fvn-slashed-zero'
| 'fvn-spacing'
| 'gap-x'
| 'gap-y'
| 'gap'
| 'gradient-from-pos'
| 'gradient-from'
| 'gradient-to-pos'
| 'gradient-to'
| 'gradient-via-pos'
| 'gradient-via'
| 'grayscale'
| 'grid-cols'
| 'grid-flow'
| 'grid-rows'
| 'grow'
| 'h'
| 'hue-rotate'
| 'hyphens'
| 'indent'
| 'inset-ring-color'
| 'inset-ring-w'
| 'inset-shadow-color'
| 'inset-shadow'
| 'inset-x'
| 'inset-y'
| 'inset'
| 'invert'
| 'isolation'
| 'justify-content'
| 'justify-items'
| 'justify-self'
| 'leading'
| 'left'
| 'line-clamp'
| 'list-image'
| 'list-style-position'
| 'list-style-type'
| 'm'
| 'max-h'
| 'max-w'
| 'mb'
| 'me'
| 'min-h'
| 'min-w'
| 'mix-blend'
| 'ml'
| 'mr'
| 'ms'
| 'mt'
| 'mx'
| 'my'
| 'object-fit'
| 'object-position'
| 'opacity'
| 'order'
| 'outline-color'
| 'outline-offset'
| 'outline-style'
| 'outline-w'
| 'overflow-x'
| 'overflow-y'
| 'overflow'
| 'overscroll-x'
| 'overscroll-y'
| 'overscroll'
| 'p'
| 'pb'
| 'pe'
| 'perspective-origin'
| 'perspective'
| 'pl'
| 'place-content'
| 'place-items'
| 'place-self'
| 'placeholder-color'
| 'pointer-events'
| 'position'
| 'pr'
| 'ps'
| 'pt'
| 'px'
| 'py'
| 'resize'
| 'right'
| 'ring-color'
| 'ring-offset-color'
| 'ring-offset-w'
| 'ring-w-inset'
| 'ring-w'
| 'rotate-x'
| 'rotate-y'
| 'rotate-z'
| 'rotate'
| 'rounded-b'
| 'rounded-bl'
| 'rounded-br'
| 'rounded-e'
| 'rounded-ee'
| 'rounded-es'
| 'rounded-l'
| 'rounded-r'
| 'rounded-s'
| 'rounded-se'
| 'rounded-ss'
| 'rounded-t'
| 'rounded-tl'
| 'rounded-tr'
| 'rounded'
| 'row-end'
| 'row-start-end'
| 'row-start'
| 'saturate'
| 'scale-3d'
| 'scale-x'
| 'scale-y'
| 'scale-z'
| 'scale'
| 'scroll-behavior'
| 'scroll-m'
| 'scroll-mb'
| 'scroll-me'
| 'scroll-ml'
| 'scroll-mr'
| 'scroll-ms'
| 'scroll-mt'
| 'scroll-mx'
| 'scroll-my'
| 'scroll-p'
| 'scroll-pb'
| 'scroll-pe'
| 'scroll-pl'
| 'scroll-pr'
| 'scroll-ps'
| 'scroll-pt'
| 'scroll-px'
| 'scroll-py'
| 'select'
| 'sepia'
| 'shadow-color'
| 'shadow'
| 'shrink'
| 'size'
| 'skew-x'
| 'skew-y'
| 'skew'
| 'snap-align'
| 'snap-stop'
| 'snap-strictness'
| 'snap-type'
| 'space-x-reverse'
| 'space-x'
| 'space-y-reverse'
| 'space-y'
| 'sr'
| 'start'
| 'stroke-w'
| 'stroke'
| 'table-layout'
| 'text-alignment'
| 'text-color'
| 'text-decoration-color'
| 'text-decoration-style'
| 'text-decoration-thickness'
| 'text-decoration'
| 'text-overflow'
| 'text-transform'
| 'text-wrap'
| 'top'
| 'touch-pz'
| 'touch-x'
| 'touch-y'
| 'touch'
| 'tracking'
| 'transform-origin'
| 'transform-style'
| 'transform'
| 'transition-behavior'
| 'transition'
| 'translate-none'
| 'translate-x'
| 'translate-y'
| 'translate-z'
| 'translate'
| 'underline-offset'
| 'vertical-align'
| 'visibility'
| 'w'
| 'whitespace'
| 'will-change'
| 'z'
export type AnyClassGroupIds = string
export type AnyThemeGroupIds = string
/**
* type of the tailwind-merge configuration that allows for any possible configuration.
*/
export type AnyConfig = Config<AnyClassGroupIds, AnyThemeGroupIds>

View File

@@ -1,131 +0,0 @@
const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i
const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i
const fractionRegex = /^\d+\/\d+$/
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
const lengthUnitRegex =
/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/
// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
const imageRegex =
/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/
export const isFraction = (value: string) => fractionRegex.test(value)
export const isNumber = (value: string) => Boolean(value) && !Number.isNaN(Number(value))
export const isInteger = (value: string) => Boolean(value) && Number.isInteger(Number(value))
export const isPercent = (value: string) => value.endsWith('%') && isNumber(value.slice(0, -1))
export const isTshirtSize = (value: string) => tshirtUnitRegex.test(value)
export const isAny = () => true
const isLengthOnly = (value: string) =>
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
const isNever = () => false
const isShadow = (value: string) => shadowRegex.test(value)
const isImage = (value: string) => imageRegex.test(value)
export const isAnyNonArbitrary = (value: string) =>
!isArbitraryValue(value) && !isArbitraryVariable(value)
export const isArbitrarySize = (value: string) => getIsArbitraryValue(value, isLabelSize, isNever)
export const isArbitraryValue = (value: string) => arbitraryValueRegex.test(value)
export const isArbitraryLength = (value: string) =>
getIsArbitraryValue(value, isLabelLength, isLengthOnly)
export const isArbitraryNumber = (value: string) =>
getIsArbitraryValue(value, isLabelNumber, isNumber)
export const isArbitraryPosition = (value: string) =>
getIsArbitraryValue(value, isLabelPosition, isNever)
export const isArbitraryImage = (value: string) => getIsArbitraryValue(value, isLabelImage, isImage)
export const isArbitraryShadow = (value: string) => getIsArbitraryValue(value, isNever, isShadow)
export const isArbitraryVariable = (value: string) => arbitraryVariableRegex.test(value)
export const isArbitraryVariableLength = (value: string) =>
getIsArbitraryVariable(value, isLabelLength)
export const isArbitraryVariableFamilyName = (value: string) =>
getIsArbitraryVariable(value, isLabelFamilyName)
export const isArbitraryVariablePosition = (value: string) =>
getIsArbitraryVariable(value, isLabelPosition)
export const isArbitraryVariableSize = (value: string) => getIsArbitraryVariable(value, isLabelSize)
export const isArbitraryVariableImage = (value: string) =>
getIsArbitraryVariable(value, isLabelImage)
export const isArbitraryVariableShadow = (value: string) =>
getIsArbitraryVariable(value, isLabelShadow, true)
// Helpers
const getIsArbitraryValue = (
value: string,
testLabel: (label: string) => boolean,
testValue: (value: string) => boolean,
) => {
const result = arbitraryValueRegex.exec(value)
if (result) {
if (result[1]) {
return testLabel(result[1])
}
return testValue(result[2]!)
}
return false
}
const getIsArbitraryVariable = (
value: string,
testLabel: (label: string) => boolean,
shouldMatchNoLabel = false,
) => {
const result = arbitraryVariableRegex.exec(value)
if (result) {
if (result[1]) {
return testLabel(result[1])
}
return shouldMatchNoLabel
}
return false
}
// Labels
const isLabelPosition = (label: string) => label === 'position'
const imageLabels = new Set(['image', 'url'])
const isLabelImage = (label: string) => imageLabels.has(label)
const sizeLabels = new Set(['length', 'size', 'percentage'])
const isLabelSize = (label: string) => sizeLabels.has(label)
const isLabelLength = (label: string) => label === 'length'
const isLabelNumber = (label: string) => label === 'number'
const isLabelFamilyName = (label: string) => label === 'family-name'
const isLabelShadow = (label: string) => label === 'shadow'