tailwind-merge - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0-dev.f745ace15e9a8cdf7815d9972858e5940c8db8b7

package.json

 {
     "name": "tailwind-merge",
-    "version": "2.3.0",
+    "version": "2.4.0-dev.f745ace15e9a8cdf7815d9972858e5940c8db8b7",
     "description": "Merge Tailwind CSS classes without style conflicts",
@@ -58,3 +58,2 @@ "keywords": [
         "lint": "eslint --max-warnings 0 '**'",
-        "size": "size-limit",
         "preversion": "if [ -n \"$DANYS_MACHINE\" ]; then git checkout main && git pull; fi",
@@ -64,30 +63,27 @@ "version": "zx scripts/update-readme.mjs",
     },
-    "dependencies": {
-        "@babel/runtime": "^7.24.1"
-    },
+    "dependencies": {},
     "devDependencies": {
-        "@babel/plugin-transform-runtime": "^7.24.3",
-        "@babel/preset-env": "^7.24.3",
+        "@babel/core": "^7.24.7",
+        "@babel/preset-env": "^7.24.7",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-typescript": "^11.1.6",
-        "@size-limit/preset-small-lib": "^11.1.2",
         "@types/jest": "^29.5.12",
-        "@typescript-eslint/eslint-plugin": "^7.5.0",
-        "@typescript-eslint/parser": "^7.5.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
+        "@typescript-eslint/parser": "^7.14.1",
         "babel-plugin-annotate-pure-calls": "^0.4.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.1",
+        "babel-plugin-polyfill-regenerator": "^0.6.2",
         "eslint": "^8.57.0",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^27.9.0",
+        "eslint-plugin-jest": "^28.6.0",
         "globby": "^11.1.0",
         "jest": "^29.7.0",
-        "prettier": "^3.2.5",
-        "rollup": "^4.13.2",
+        "prettier": "^3.3.2",
+        "rollup": "^4.18.0",
         "rollup-plugin-delete": "^2.0.0",
-        "rollup-plugin-dts": "^6.1.0",
-        "size-limit": "^11.1.2",
-        "ts-jest": "^29.1.2",
-        "typescript": "^5.4.3",
-        "zx": "^7.2.3"
+        "rollup-plugin-dts": "^6.1.1",
+        "ts-jest": "^29.1.5",
+        "tslib": "^2.6.3",
+        "typescript": "^5.5.2",
+        "zx": "^8.1.3"
     },
@@ -94,0 +90,0 @@ "publishConfig": {

README.md

@@ -6,3 +6,3 @@ <!-- This file is autogenerated. If you want to change this content, please do the changes in `./docs/README.md` instead. -->
     <a href="https://github.com/dcastil/tailwind-merge">
-        <img src="https://github.com/dcastil/tailwind-merge/raw/v2.3.0/assets/logo.svg" alt="tailwind-merge" height="150px" />
+        <img src="https://github.com/dcastil/tailwind-merge/raw/f745ace15e9a8cdf7815d9972858e5940c8db8b7/assets/logo.svg" alt="tailwind-merge" height="150px" />
     </a>
@@ -29,12 +29,12 @@ </div>
 
--   [What is it for](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/what-is-it-for.md)
--   [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/when-and-how-to-use-it.md)
--   [Features](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/features.md)
--   [Limitations](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/limitations.md)
--   [Configuration](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/configuration.md)
--   [Recipes](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/recipes.md)
--   [API reference](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/api-reference.md)
--   [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/writing-plugins.md)
--   [Versioning](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/versioning.md)
--   [Contributing](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/contributing.md)
--   [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs/similar-packages.md)
+-   [What is it for](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/what-is-it-for.md)
+-   [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/when-and-how-to-use-it.md)
+-   [Features](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/features.md)
+-   [Limitations](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/limitations.md)
+-   [Configuration](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/configuration.md)
+-   [Recipes](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/recipes.md)
+-   [API reference](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/api-reference.md)
+-   [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/writing-plugins.md)
+-   [Versioning](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/versioning.md)
+-   [Contributing](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/contributing.md)
+-   [Similar packages](https://github.com/dcastil/tailwind-merge/tree/f745ace15e9a8cdf7815d9972858e5940c8db8b7/docs/similar-packages.md)

src/index.ts

@@ -13,3 +13,5 @@ export { createTailwindMerge } from './lib/create-tailwind-merge'
     type DefaultThemeGroupIds,
+    type ExperimentalParseClassNameParam,
+    type ExperimentalParsedClassName,
 } from './lib/types'
 export * as validators from './lib/validators'

src/lib/config-utils.ts

@@ -1,4 +0,4 @@
-import { createClassUtils } from './class-utils'
+import { createClassGroupUtils } from './class-group-utils'
 import { createLruCache } from './lru-cache'
-import { createSplitModifiers } from './modifier-utils'
+import { createParseClassName } from './parse-class-name'
 import { GenericConfig } from './types'
@@ -11,5 +11,5 @@
         cache: createLruCache<string, string>(config.cacheSize),
-        splitModifiers: createSplitModifiers(config),
-        ...createClassUtils(config),
+        parseClassName: createParseClassName(config),
+        ...createClassGroupUtils(config),
     }
 }

src/lib/merge-classlist.ts

 import { ConfigUtils } from './config-utils'
-import { IMPORTANT_MODIFIER, sortModifiers } from './modifier-utils'
+import { IMPORTANT_MODIFIER, sortModifiers } from './parse-class-name'
 
@@ -7,3 +7,3 @@ const SPLIT_CLASSES_REGEX = /\s+/
 export function mergeClassList(classList: string, configUtils: ConfigUtils) {
-    const { splitModifiers, getClassGroupId, getConflictingClassGroupIds } = configUtils
+    const { parseClassName, getClassGroupId, getConflictingClassGroupIds } = configUtils
 
@@ -29,6 +29,7 @@ /**
                     maybePostfixModifierPosition,
-                } = splitModifiers(originalClassName)
+                } = parseClassName(originalClassName)
 
+                let hasPostfixModifier = Boolean(maybePostfixModifierPosition)
                 let classGroupId = getClassGroupId(
-                    maybePostfixModifierPosition
+                    hasPostfixModifier
                         ? baseClassName.substring(0, maybePostfixModifierPosition)
@@ -38,6 +39,4 @@ : baseClassName,
 
-                let hasPostfixModifier = Boolean(maybePostfixModifierPosition)
-
                 if (!classGroupId) {
-                    if (!maybePostfixModifierPosition) {
+                    if (!hasPostfixModifier) {
                         return {
@@ -44,0 +43,0 @@ isTailwindClass: false as const,

src/lib/merge-configs.ts

@@ -13,2 +13,3 @@ import { ConfigExtension, GenericConfig } from './types'
         separator,
+        experimentalParseClassName,
         extend = {},
@@ -21,2 +22,3 @@ override = {},
     overrideProperty(baseConfig, 'separator', separator)
+    overrideProperty(baseConfig, 'experimentalParseClassName', experimentalParseClassName)
 
@@ -23,0 +25,0 @@ for (const configKey in override) {

src/lib/types.ts

@@ -23,7 +23,57 @@ export interface Config<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.
+     * 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): ExperimentalParsedClassName
 }
 
+/**
+ * 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): ExperimentalParsedClassName
+}
+
+/**
+ * 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 ExperimentalParsedClassName {
+    /**
+     * 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
+}
+
 interface ConfigGroups<ClassGroupIds extends string, ThemeGroupIds extends string> {
@@ -30,0 +80,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

707517

increased by1.25%

Dependency count

0

decreased by-100%

Dev dependency count

23

decreased by-4.17%

Lines of code

15700

increased by1.05%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• - Removed@babel/runtime@^7.24.1

• - Removed@babel/runtime@7.25.4(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)