tailwind-merge
Advanced tools
tailwind-merge - npm Package Compare versions
Comparing version 0.8.0 to 0.8.1
@@ -647,3 +647,3 @@ import HLRU from 'hashlru'; | ||
| 'auto-cols': [{ | ||
| 'auto-cols': ['auto', 'min', 'max', 'fr'] | ||
| 'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue] | ||
| }], | ||
@@ -656,3 +656,3 @@ | ||
| 'auto-rows': [{ | ||
| 'auto-rows': ['auto', 'min', 'max', 'fr'] | ||
| 'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue] | ||
| }], | ||
@@ -921,3 +921,3 @@ | ||
| screen: getSizesSimple() | ||
| }] | ||
| }, isCustomLength] | ||
| }], | ||
@@ -1721,3 +1721,3 @@ | ||
| transition: [{ | ||
| transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform'] | ||
| transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isCustomValue] | ||
| }], | ||
@@ -1738,3 +1738,3 @@ | ||
| ease: [{ | ||
| ease: ['linear', 'in', 'out', 'in-out'] | ||
| ease: ['linear', 'in', 'out', 'in-out', isCustomValue] | ||
| }], | ||
@@ -1755,3 +1755,3 @@ | ||
| animate: [{ | ||
| animate: ['none', 'spin', 'ping', 'pulse', 'bounce'] | ||
| animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue] | ||
| }], | ||
@@ -1892,3 +1892,5 @@ // Transforms | ||
| */ | ||
| fill: ['fill-current'], | ||
| fill: [{ | ||
| fill: ['current', isCustomValue] | ||
| }], | ||
@@ -1900,3 +1902,3 @@ /** | ||
| stroke: [{ | ||
| stroke: ['current'] | ||
| stroke: ['current', isCustomValue] | ||
| }], | ||
@@ -1903,0 +1905,0 @@ |
@@ -692,3 +692,3 @@ import HLRU from 'hashlru'; | ||
| 'auto-cols': [{ | ||
| 'auto-cols': ['auto', 'min', 'max', 'fr'] | ||
| 'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue] | ||
| }], | ||
@@ -701,3 +701,3 @@ | ||
| 'auto-rows': [{ | ||
| 'auto-rows': ['auto', 'min', 'max', 'fr'] | ||
| 'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue] | ||
| }], | ||
@@ -966,3 +966,3 @@ | ||
| screen: getSizesSimple() | ||
| }]) | ||
| }, isCustomLength]) | ||
| }], | ||
@@ -1766,3 +1766,3 @@ | ||
| transition: [{ | ||
| transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform'] | ||
| transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isCustomValue] | ||
| }], | ||
@@ -1783,3 +1783,3 @@ | ||
| ease: [{ | ||
| ease: ['linear', 'in', 'out', 'in-out'] | ||
| ease: ['linear', 'in', 'out', 'in-out', isCustomValue] | ||
| }], | ||
@@ -1800,3 +1800,3 @@ | ||
| animate: [{ | ||
| animate: ['none', 'spin', 'ping', 'pulse', 'bounce'] | ||
| animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue] | ||
| }], | ||
@@ -1937,3 +1937,5 @@ // Transforms | ||
| */ | ||
| fill: ['fill-current'], | ||
| fill: [{ | ||
| fill: ['current', isCustomValue] | ||
| }], | ||
@@ -1945,3 +1947,3 @@ /** | ||
| stroke: [{ | ||
| stroke: ['current'] | ||
| stroke: ['current', isCustomValue] | ||
| }], | ||
@@ -1948,0 +1950,0 @@ |
@@ -284,3 +284,3 @@ import { isAny, isCustomLength, isCustomValue, isInteger, isLength } from './validators'; | ||
| readonly 'auto-cols': readonly [{ | ||
| readonly 'auto-cols': readonly ["auto", "min", "max", "fr"]; | ||
| readonly 'auto-cols': readonly ["auto", "min", "max", "fr", typeof isCustomValue]; | ||
| }]; | ||
@@ -292,3 +292,3 @@ /** | ||
| readonly 'auto-rows': readonly [{ | ||
| readonly 'auto-rows': readonly ["auto", "min", "max", "fr"]; | ||
| readonly 'auto-rows': readonly ["auto", "min", "max", "fr", typeof isCustomValue]; | ||
| }]; | ||
@@ -522,3 +522,3 @@ /** | ||
| readonly screen: readonly ["sm", "md", "lg", "xl", "2xl"]; | ||
| }]; | ||
| }, typeof isCustomLength]; | ||
| }]; | ||
@@ -1217,3 +1217,3 @@ /** | ||
| readonly transition: readonly [{ | ||
| readonly transition: readonly ["none", "all", "", "colors", "opacity", "shadow", "transform"]; | ||
| readonly transition: readonly ["none", "all", "", "colors", "opacity", "shadow", "transform", typeof isCustomValue]; | ||
| }]; | ||
@@ -1232,3 +1232,3 @@ /** | ||
| readonly ease: readonly [{ | ||
| readonly ease: readonly ["linear", "in", "out", "in-out"]; | ||
| readonly ease: readonly ["linear", "in", "out", "in-out", typeof isCustomValue]; | ||
| }]; | ||
@@ -1247,3 +1247,3 @@ /** | ||
| readonly animate: readonly [{ | ||
| readonly animate: readonly ["none", "spin", "ping", "pulse", "bounce"]; | ||
| readonly animate: readonly ["none", "spin", "ping", "pulse", "bounce", typeof isCustomValue]; | ||
| }]; | ||
@@ -1364,3 +1364,5 @@ /** | ||
| */ | ||
| readonly fill: readonly ["fill-current"]; | ||
| readonly fill: readonly [{ | ||
| readonly fill: readonly ["current", typeof isCustomValue]; | ||
| }]; | ||
| /** | ||
@@ -1371,3 +1373,3 @@ * Stroke | ||
| readonly stroke: readonly [{ | ||
| readonly stroke: readonly ["current"]; | ||
| readonly stroke: readonly ["current", typeof isCustomValue]; | ||
| }]; | ||
@@ -1374,0 +1376,0 @@ /** |
| { | ||
| "name": "tailwind-merge", | ||
| "version": "0.8.0", | ||
| "version": "0.8.1", | ||
| "description": "Merge Tailwind CSS classes without style conflicts", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
| <div align="center"> | ||
| <br /> | ||
| <a href="https://github.com/dcastil/tailwind-merge"> | ||
| <!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v0.8.0/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END --> | ||
| <!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v0.8.1/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END --> | ||
| </a> | ||
@@ -70,5 +70,5 @@ </div> | ||
| - Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results. The cache size can be modified or opt-out of by using [`extendTailwindMerge()`](#extendtailwindmerge). | ||
| - Expensive computations happen upfront so that `twMerge()` calls without a cache hit stay fast. | ||
| - These computations are called lazily on the first call to `twMerge()` to prevent it from impacting app startup performance if it isn't used initially. | ||
| - Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results. The cache size can be modified or opt-out of by using [`extendTailwindMerge`](#extendtailwindmerge). | ||
| - Expensive computations happen upfront so that `twMerge` calls without a cache hit stay fast. | ||
| - These computations are called lazily on the first call to `twMerge` to prevent it from impacting app startup performance if it isn't used initially. | ||
@@ -148,7 +148,8 @@ ### Last conflicting class wins | ||
| - Only using variants known to Tailwind | ||
| - Only using default color names or color names which don't clash with Tailwind class names | ||
| - Only using color names which don't clash with other Tailwind class names | ||
| - Only deviating by number values from number-based Tailwind classes | ||
| - Only using font-family classes which don't clash with default font-weight classes | ||
| - Sticking to default Tailwind config for everything else | ||
| If some of these points don't apply to you, it makes sense to test whether `twMerge()` still works as intended with your custom classes. Otherwise, you can create your own custom merge function with [`extendTailwindMerge()`](#extendtailwindmerge). | ||
| If some of these points don't apply to you, it makes sense to test whether `twMerge` still works as intended with your custom classes. Otherwise, you can create your own custom merge function with [`extendTailwindMerge`](#extendtailwindmerge). | ||
@@ -161,8 +162,4 @@ ### `getDefaultConfig` | ||
| Function which returns the default config used by tailwind-merge. In fact, `twMerge` is just built like this: | ||
| Function which returns the default config used by tailwind-merge. The tailwind-merge config is different from the Tailwind config. It is optimized for small bundle size and fast runtime performance because it is expected to run in the browser. | ||
| ```ts | ||
| const twMerge = createTailwindMerge(getDefaultConfig) | ||
| ``` | ||
| ### `extendTailwindMerge` | ||
@@ -178,3 +175,3 @@ | ||
| Function to create merge function with custom config. | ||
| Function to create merge function with custom config which extends the default config. Use this if you use the default Tailwind config and just extend it in some places. | ||
@@ -208,3 +205,3 @@ You provide it a `configExtension` object which gets [merged](#mergeconfigs) with the default config. | ||
| Additionally you can pass multiple `createConfig` functions (more to that in [`createTailwindMerge()`](#createtailwindmerge)) which is convenient if you want to combine your config with third-party plugins. | ||
| Additionally you can pass multiple `createConfig` functions (more to that in [`createTailwindMerge`](#createtailwindmerge)) which is convenient if you want to combine your config with third-party plugins. | ||
@@ -229,3 +226,3 @@ ```ts | ||
| Function to create merge function with custom config. Here you get more control over the config than in [`extendTailwindMerge()`](#extendtailwindmerge). | ||
| Function to create merge function with custom config. Use this function instead of [`extendTailwindMerge`](#extendtailwindmerge) if you don't need the default config or want more control over the config. | ||
@@ -235,4 +232,4 @@ You need to provide a function which resolves to the config tailwind-merge should use for the new merge function. You can either extend from the default config or create a new one from scratch. | ||
| ```ts | ||
| // ↓ Callback passed to `createTailwindMerge()` is called when | ||
| // `customTwMerge()` gets called the first time. | ||
| // ↓ Callback passed to `createTailwindMerge` is called when | ||
| // `customTwMerge` gets called the first time. | ||
| const customTwMerge = createTailwindMerge(() => { | ||
@@ -257,3 +254,3 @@ const defaultConfig = getDefaultConfig() | ||
| Same as in [`extendTailwindMerge()`](#extendtailwindmerge) you can use multiple `createConfig` functions which is convenient if you want to combine your config with third-party plugins. Just keep in mind that the first `createConfig` function does not get passed any arguments, whereas the subsequent functions get each passed the config from the previous function. | ||
| Same as in [`extendTailwindMerge`](#extendtailwindmerge) you can use multiple `createConfig` functions which is convenient if you want to combine your config with third-party plugins. Just keep in mind that the first `createConfig` function does not get passed any arguments, whereas the subsequent functions get each passed the config from the previous function. | ||
@@ -271,3 +268,3 @@ ```ts | ||
| But don't merge configs like that. Use [`mergeConfigs()`](#mergeconfigs) instead. | ||
| But don't merge configs like that. Use [`mergeConfigs`](#mergeconfigs) instead. | ||
@@ -307,3 +304,3 @@ ### `mergeConfigs` | ||
| An object containing all the validators used in tailwind-merge. They are useful if you want to use a custom config with [`extendTailwindMerge()`](#extendtailwindmerge) or [`createTailwindMerge()`](#createtailwindmerge). E.g. the `classGroup` for padding is defined as | ||
| An object containing all the validators used in tailwind-merge. They are useful if you want to use a custom config with [`extendTailwindMerge`](#extendtailwindmerge) or [`createTailwindMerge`](#createtailwindmerge). E.g. the `classGroup` for padding is defined as | ||
@@ -314,9 +311,9 @@ ```ts | ||
| Here is a brief summary for each validator: | ||
| A brief summary for each validator: | ||
| - `isLength()` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a custom length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`. | ||
| - `isCustomLength()` checks for custom length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`). | ||
| - `isInteger()` checks for integer values (`3`) and custom integer values (`[3]`). | ||
| - `isCustomValue()` checks whether the class part is enclosed in brackets (`[something]`) | ||
| - `isAny()` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when I'm ceertain there are no other class groups in a namespace. | ||
| - `isLength` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a custom length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`. | ||
| - `isCustomLength` checks for custom length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`). | ||
| - `isInteger` checks for integer values (`3`) and custom integer values (`[3]`). | ||
| - `isCustomValue` checks whether the class part is enclosed in brackets (`[something]`) | ||
| - `isAny` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when I'm ceertain there are no other class groups in a namespace. | ||
@@ -329,11 +326,12 @@ ### `Config` | ||
| TypeScript type for config object. Useful if you want to build a `createConfig` function but don't want to define it inline in [`extendTailwindMerge()`](#extendtailwindmerge) or [`createTailwindMerge()`](#createtailwindmerge). | ||
| TypeScript type for config object. Useful if you want to build a `createConfig` function but don't want to define it inline in [`extendTailwindMerge`](#extendtailwindmerge) or [`createTailwindMerge`](#createtailwindmerge). | ||
| ## Writing plugins | ||
| This library supports classes of the core Tailwind library out of the box, but not classes of any plugins. But it's possible and hopefully easy to write third-party plugins for tailwind-merge. In case you want to write a plugin, I welcome you to follow these steps: | ||
| This library supports classes of the core Tailwind library out of the box, but not classes of any plugins. But it's possible and hopefully easy to write third-party plugins for tailwind-merge. In case you want to write a plugin, I invite you to follow these steps: | ||
| - Create a package called `tailwind-merge-magic-plugin` with tailwind-merge as peer dependency which exports a function `withMagic` and replace "magic" with your plugin name. | ||
| - This function would be ideally a `createConfig` function which takes a config object as argument and returns the modified config object. | ||
| - Use the [`validators`](#validators) and [`mergeConfigs()`](#mergeconfigs) from tailwind-merge to extend the config with magic. | ||
| - If you create new class groups, prepend them with `magic.` (your plugin name with a dot at the end) so they don't collide with class group names from other plugins or even future class groups in tailwind-merge itself. | ||
| - Use the [`validators`](#validators) and [`mergeConfigs`](#mergeconfigs) from tailwind-merge to extend the config with magic. | ||
@@ -348,3 +346,3 @@ Here is an example of how a plugin could look like: | ||
| classGroups: { | ||
| magic: [{ magic: ['1', '2'] }], | ||
| 'magic.my-group': [{ magic: [validators.isLength, 'wow'] }], | ||
| }, | ||
@@ -364,2 +362,4 @@ }) | ||
| Also feel free to check out [tailwind-merge-rtl-plugin](https://github.com/vltansky/tailwind-merge-rtl-plugin) as a real example of a tailwind-merge plugin. | ||
| ## Versioning | ||
@@ -373,3 +373,3 @@ | ||
| - Major version gets incremented when breaking changes are introduced to the package API. E.g. the return type of `twMerge()` changes. | ||
| - Major version gets incremented when breaking changes are introduced to the package API. E.g. the return type of `twMerge` changes. | ||
@@ -376,0 +376,0 @@ - `alpha` releases might introduce breaking changes on any update. Whereas `beta` releases only introduce new features or bug fixes. |
@@ -286,3 +286,3 @@ import { isAny, isCustomLength, isCustomValue, isInteger, isLength } from './validators' | ||
| */ | ||
| 'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr'] }], | ||
| 'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue] }], | ||
| /** | ||
@@ -292,3 +292,3 @@ * Grid Auto Rows | ||
| */ | ||
| 'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr'] }], | ||
| 'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue] }], | ||
| /** | ||
@@ -472,2 +472,3 @@ * Gap | ||
| { screen: getSizesSimple() }, | ||
| isCustomLength, | ||
| ], | ||
@@ -1037,3 +1038,14 @@ }, | ||
| transition: [ | ||
| { transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform'] }, | ||
| { | ||
| transition: [ | ||
| 'none', | ||
| 'all', | ||
| '', | ||
| 'colors', | ||
| 'opacity', | ||
| 'shadow', | ||
| 'transform', | ||
| isCustomValue, | ||
| ], | ||
| }, | ||
| ], | ||
@@ -1049,3 +1061,3 @@ /** | ||
| */ | ||
| ease: [{ ease: ['linear', 'in', 'out', 'in-out'] }], | ||
| ease: [{ ease: ['linear', 'in', 'out', 'in-out', isCustomValue] }], | ||
| /** | ||
@@ -1060,3 +1072,3 @@ * Transition Delay | ||
| */ | ||
| animate: [{ animate: ['none', 'spin', 'ping', 'pulse', 'bounce'] }], | ||
| animate: [{ animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue] }], | ||
| // Transforms | ||
@@ -1177,3 +1189,3 @@ /** | ||
| */ | ||
| fill: ['fill-current'], | ||
| fill: [{ fill: ['current', isCustomValue] }], | ||
| /** | ||
@@ -1183,3 +1195,3 @@ * Stroke | ||
| */ | ||
| stroke: [{ stroke: ['current'] }], | ||
| stroke: [{ stroke: ['current', isCustomValue] }], | ||
| /** | ||
@@ -1186,0 +1198,0 @@ * Stroke Width |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by0.61%
562405
- Lines of code
- increased by0.24%
8458
No dependency changes