diff --git a/package.json b/package.json index eb9160b..0065a4f 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "test": "jest --verbose" }, "dependencies": { - "tailwind-merge": "^1.14.0" + "tailwind-merge": "^2.2.0" }, "devDependencies": { "@commitlint/cli": "^17.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6079749..e0ead1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,8 +6,8 @@ settings: dependencies: tailwind-merge: - specifier: ^1.14.0 - version: 1.14.0 + specifier: ^2.2.0 + version: 2.2.0 devDependencies: '@commitlint/cli': @@ -96,7 +96,7 @@ devDependencies: version: 5.0.1 tailwindcss: specifier: ^3.2.7 - version: 3.2.7(postcss@8.4.32)(ts-node@10.9.1) + version: 3.2.7(postcss@8.4.33)(ts-node@10.9.1) ts-node: specifier: ^10.9.1 version: 10.9.1(@swc/core@1.2.198)(@types/node@18.11.18)(typescript@5.1.3) @@ -105,7 +105,7 @@ devDependencies: version: 2.4.1 tsup: specifier: 6.6.3 - version: 6.6.3(@swc/core@1.2.198)(postcss@8.4.32)(ts-node@10.9.1)(typescript@5.1.3) + version: 6.6.3(@swc/core@1.2.198)(postcss@8.4.33)(ts-node@10.9.1)(typescript@5.1.3) typescript: specifier: 5.1.3 version: 5.1.3 @@ -426,6 +426,13 @@ packages: '@babel/helper-plugin-utils': 7.20.2 dev: true + /@babel/runtime@7.23.8: + resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.1 + dev: false + /@babel/template@7.20.7: resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==} engines: {node: '>=6.9.0'} @@ -5656,29 +5663,29 @@ packages: resolution: {integrity: sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==} dev: true - /postcss-import@14.1.0(postcss@8.4.32): + /postcss-import@14.1.0(postcss@8.4.33): resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.32 + postcss: 8.4.33 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.1 dev: true - /postcss-js@4.0.0(postcss@8.4.32): + /postcss-js@4.0.0(postcss@8.4.33): resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.3.3 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.32 + postcss: 8.4.33 dev: true - /postcss-load-config@3.1.4(postcss@8.4.32)(ts-node@10.9.1): + /postcss-load-config@3.1.4(postcss@8.4.33)(ts-node@10.9.1): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -5691,18 +5698,18 @@ packages: optional: true dependencies: lilconfig: 2.0.6 - postcss: 8.4.32 + postcss: 8.4.33 ts-node: 10.9.1(@swc/core@1.2.198)(@types/node@18.11.18)(typescript@5.1.3) yaml: 1.10.2 dev: true - /postcss-nested@6.0.0(postcss@8.4.32): + /postcss-nested@6.0.0(postcss@8.4.33): resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.32 + postcss: 8.4.33 postcss-selector-parser: 6.0.11 dev: true @@ -5718,8 +5725,8 @@ packages: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true - /postcss@8.4.32: - resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==} + /postcss@8.4.33: + resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.7 @@ -5958,6 +5965,10 @@ packages: strip-indent: 3.0.0 dev: true + /regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + dev: false + /regexp.prototype.flags@1.4.3: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} engines: {node: '>= 0.4'} @@ -6488,11 +6499,13 @@ packages: strip-ansi: 6.0.1 dev: true - /tailwind-merge@1.14.0: - resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==} + /tailwind-merge@2.2.0: + resolution: {integrity: sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==} + dependencies: + '@babel/runtime': 7.23.8 dev: false - /tailwindcss@3.2.7(postcss@8.4.32)(ts-node@10.9.1): + /tailwindcss@3.2.7(postcss@8.4.33)(ts-node@10.9.1): resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==} engines: {node: '>=12.13.0'} hasBin: true @@ -6513,11 +6526,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.32 - postcss-import: 14.1.0(postcss@8.4.32) - postcss-js: 4.0.0(postcss@8.4.32) - postcss-load-config: 3.1.4(postcss@8.4.32)(ts-node@10.9.1) - postcss-nested: 6.0.0(postcss@8.4.32) + postcss: 8.4.33 + postcss-import: 14.1.0(postcss@8.4.33) + postcss-js: 4.0.0(postcss@8.4.33) + postcss-load-config: 3.1.4(postcss@8.4.33)(ts-node@10.9.1) + postcss-nested: 6.0.0(postcss@8.4.33) postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 quick-lru: 5.1.1 @@ -6741,7 +6754,7 @@ packages: resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==} dev: true - /tsup@6.6.3(@swc/core@1.2.198)(postcss@8.4.32)(ts-node@10.9.1)(typescript@5.1.3): + /tsup@6.6.3(@swc/core@1.2.198)(postcss@8.4.33)(ts-node@10.9.1)(typescript@5.1.3): resolution: {integrity: sha512-OLx/jFllYlVeZQ7sCHBuRVEQBBa1tFbouoc/gbYakyipjVQdWy/iQOvmExUA/ewap9iQ7tbJf9pW0PgcEFfJcQ==} engines: {node: '>=14.18'} hasBin: true @@ -6766,8 +6779,8 @@ packages: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss: 8.4.32 - postcss-load-config: 3.1.4(postcss@8.4.32)(ts-node@10.9.1) + postcss: 8.4.33 + postcss-load-config: 3.1.4(postcss@8.4.33)(ts-node@10.9.1) resolve-from: 5.0.0 rollup: 3.10.0 source-map: 0.8.0-beta.0 diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts index 93af34e..641f612 100644 --- a/src/__tests__/tv.test.ts +++ b/src/__tests__/tv.test.ts @@ -5,21 +5,23 @@ import {tv, cn} from "../index"; const COMMON_UNITS = ["small", "medium", "large"]; const twMergeConfig = { - theme: { - opacity: ["disabled"], - spacing: ["divider", "unit", "unit-2", "unit-4", "unit-6"], - borderWidth: COMMON_UNITS, - borderRadius: COMMON_UNITS, - }, - classGroups: { - shadow: [{shadow: COMMON_UNITS}], - "font-size": [{text: ["tiny", ...COMMON_UNITS]}], - "bg-image": ["bg-stripe-gradient"], - "min-w": [ - { - "min-w": ["unit", "unit-2", "unit-4", "unit-6"], - }, - ], + extend: { + theme: { + opacity: ["disabled"], + spacing: ["divider", "unit", "unit-2", "unit-4", "unit-6"], + borderWidth: COMMON_UNITS, + borderRadius: COMMON_UNITS, + }, + classGroups: { + shadow: [{shadow: COMMON_UNITS}], + "font-size": [{text: ["tiny", ...COMMON_UNITS]}], + "bg-image": ["bg-stripe-gradient"], + "min-w": [ + { + "min-w": ["unit", "unit-2", "unit-4", "unit-6"], + }, + ], + }, }, }; @@ -2974,4 +2976,50 @@ describe("Tailwind Variants (TV) - Tailwind Merge", () => { expect(result).toHaveClass(["text-medium", "text-blue-500", "w-unit-4"]); }); + + it("should support legacy custom config", () => { + const styles = tv( + { + base: "text-small text-yellow-400 w-unit", + variants: { + size: { + small: "text-small w-unit-2", + medium: "text-medium w-unit-4", + large: "text-large w-unit-6", + }, + color: { + red: "text-red-500", + blue: "text-blue-500", + }, + }, + }, + { + twMergeConfig: { + theme: { + opacity: ["disabled"], + spacing: ["divider", "unit", "unit-2", "unit-4", "unit-6"], + borderWidth: COMMON_UNITS, + borderRadius: COMMON_UNITS, + }, + classGroups: { + shadow: [{shadow: COMMON_UNITS}], + "font-size": [{text: ["tiny", ...COMMON_UNITS]}], + "bg-image": ["bg-stripe-gradient"], + "min-w": [ + { + "min-w": ["unit", "unit-2", "unit-4", "unit-6"], + }, + ], + }, + }, + }, + ); + + const result = styles({ + size: "medium", + color: "blue", + }); + + expect(result).toHaveClass(["text-medium", "text-blue-500", "w-unit-4"]); + }); }); diff --git a/src/config.d.ts b/src/config.d.ts index f3a12db..8c555d4 100644 --- a/src/config.d.ts +++ b/src/config.d.ts @@ -1,20 +1,23 @@ -import type {Config as TwMergeConfig} from "tailwind-merge"; +import type {extendTailwindMerge} from "tailwind-merge"; import type {TVVariants} from "./index"; import type {TVGeneratedScreens} from "./generated"; +type MergeConfig = Parameters[0]; +type LegacyMergeConfig = Extract["extend"]; + export type TWMConfig = { /** * Whether to merge the class names with `tailwind-merge` library. * It's avoid to have duplicate tailwind classes. (Recommended) - * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md + * @see https://github.com/dcastil/tailwind-merge/blob/v2.2.0/README.md * @default true */ twMerge?: boolean; /** * The config object for `tailwind-merge` library. - * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md + * @see https://github.com/dcastil/tailwind-merge/blob/v2.2.0/docs/configuration.md */ - twMergeConfig?: Partial; + twMergeConfig?: MergeConfig & LegacyMergeConfig; }; export type TVConfig< diff --git a/src/index.js b/src/index.js index e8a1de9..920dc2b 100644 --- a/src/index.js +++ b/src/index.js @@ -35,7 +35,18 @@ export const cn = didTwMergeConfigChange = false; cachedTwMerge = isEmptyObject(cachedTwMergeConfig) ? twMergeBase - : extendTailwindMerge(cachedTwMergeConfig); + : extendTailwindMerge({ + ...cachedTwMergeConfig, + extend: { + // Support for legacy tailwind-merge config shape + theme: cachedTwMergeConfig.theme, + classGroups: cachedTwMergeConfig.classGroups, + conflictingClassGroupModifiers: cachedTwMergeConfig.conflictingClassGroupModifiers, + conflictingClassGroups: cachedTwMergeConfig.conflictingClassGroups, + // Support for new tailwind-merge config shape + ...cachedTwMergeConfig.extend, + }, + }); } return voidEmpty(cachedTwMerge(cnBase(classes)));