From c7d2e66334e7708c628312aa60e361c91dfef9da Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 21 Oct 2021 21:47:57 +0200 Subject: [PATCH 1/4] add brief plugin docs --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index a9a6ec58..b9aec01f 100644 --- a/README.md +++ b/README.md @@ -310,6 +310,37 @@ interface 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). +## 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: + +- 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. + +Here is an example of how a plugin could look like: + +```ts +import { mergeConfigs, validators, Config } from 'tailwind-merge' + +export function withMagic(config: Config): Config { + return mergeConfigs(config, { + classGroups: { + magic: [{ magic: ['1', '2'] }], + }, + }) +} +``` + +This plugin can then be used like this: + +```ts +import { extendTailwindMerge } from 'tailwind-merge' +import { withMagic } from 'tailwind-merge-magic-plugin' + +const twMerge = extendTailwindMerge(withMagic) +``` + ## Versioning This package follows the [SemVer](https://semver.org) versioning rules. More specifically: From 2061a174e86c2d85efc503d9293371d54d41ccc9 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 21 Oct 2021 21:50:40 +0200 Subject: [PATCH 2/4] enable using `extendTailwindMerge` without configExtension So people can use it with plugins only --- src/extend-tailwind-merge.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/extend-tailwind-merge.ts b/src/extend-tailwind-merge.ts index 63bff958..dde424fe 100644 --- a/src/extend-tailwind-merge.ts +++ b/src/extend-tailwind-merge.ts @@ -6,11 +6,13 @@ import { Config } from './types' type CreateConfigSubsequent = (config: Config) => Config export function extendTailwindMerge( - configExtension: Partial, + configExtension: Partial | CreateConfigSubsequent, ...createConfig: CreateConfigSubsequent[] ) { - return createTailwindMerge( - () => mergeConfigs(getDefaultConfig(), configExtension), - ...createConfig - ) + return typeof configExtension === 'function' + ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) + : createTailwindMerge( + () => mergeConfigs(getDefaultConfig(), configExtension), + ...createConfig + ) } From 2001d5755b53fe0d20683a1f055ec40bec4cf7d1 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 21 Oct 2021 21:51:03 +0200 Subject: [PATCH 3/4] add test case for `extendTailwindMerge` with function config --- tests/extend-tailwind-merge.test.ts | 31 +++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/tests/extend-tailwind-merge.test.ts b/tests/extend-tailwind-merge.test.ts index 9d76b264..444211ba 100644 --- a/tests/extend-tailwind-merge.test.ts +++ b/tests/extend-tailwind-merge.test.ts @@ -62,3 +62,34 @@ test('extendTailwindMerge works corectly with multiple configs', () => { expect(tailwindMerge('p-10 p-20')).toBe('p-20') expect(tailwindMerge('hover:focus:p-10 focus:hover:p-20')).toBe('focus:hover:p-20') }) + +test('extendTailwindMerge works corectly with function config', () => { + const tailwindMerge = extendTailwindMerge((config) => ({ + ...config, + cacheSize: 20, + classGroups: { + ...config.classGroups, + fooKey: [{ fooKey: ['bar', 'baz'] }], + fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'], + otherKey: ['nother', 'group'], + }, + conflictingClassGroups: { + ...config.conflictingClassGroups, + fooKey: ['otherKey'], + otherKey: ['fooKey', 'fooKey2'], + }, + })) + + expect(tailwindMerge('')).toBe('') + expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz') + expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe( + 'other-prefix:fooKey-baz' + ) + expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar') + expect(tailwindMerge('fooKey-bar group')).toBe('group') + expect(tailwindMerge('group other-2')).toBe('group other-2') + expect(tailwindMerge('other-2 group')).toBe('group') + + expect(tailwindMerge('p-10 p-20')).toBe('p-20') + expect(tailwindMerge('hover:focus:p-10 focus:hover:p-20')).toBe('focus:hover:p-20') +}) From 16de3d4903071b15f692ae0cfa31e3a5baa01560 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 21 Oct 2021 21:52:58 +0200 Subject: [PATCH 4/4] add new `extendTailwindMerge` functionality to docs --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index b9aec01f..c3e57b93 100644 --- a/README.md +++ b/README.md @@ -169,6 +169,7 @@ function extendTailwindMerge( configExtension: Partial, ...createConfig: Array<(config: Config) => Config> ): TailwindMerge +function extendTailwindMerge(...createConfig: Array<(config: Config) => Config>): TailwindMerge ``` Function to create merge function with custom config. @@ -206,6 +207,12 @@ Additionally you can pass multiple `createConfig` functions (more to that in [`c const customTwMerge = extendTailwindMerge({ … }, withSomePlugin) ``` +If you only use plugins, you can omit the `configExtension` object as well. + +```ts +const customTwMerge = extendTailwindMerge(withSomePlugin) +``` + ### `createTailwindMerge` ```ts