diff --git a/CHANGELOG.md b/CHANGELOG.md index eeb3b3091..067c06bf5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix issue that could cause the CLI to crash when files are deleted while watching ([#14616](https://github.com/tailwindlabs/tailwindcss/pull/14616)) - Ensure custom variants using the JS API have access to modifiers ([#14637](https://github.com/tailwindlabs/tailwindcss/pull/14637)) - Ensure auto complete suggestions work when using `matchUtilities` ([#14589](https://github.com/tailwindlabs/tailwindcss/pull/14589)) +- Pass options when using `addComponents` and `matchComponents` ([#14590](https://github.com/tailwindlabs/tailwindcss/pull/14590)) - _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596)) - _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600)) diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 08c62a4cc..1f5a1aec9 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -3544,6 +3544,51 @@ describe('addComponents()', () => { }) }) +describe('matchComponents()', () => { + test('is an alias for matchUtilities', async () => { + let compiled = await compile( + css` + @plugin "my-plugin"; + @tailwind utilities; + `, + { + async loadModule(id, base) { + return { + base, + module: ({ matchComponents }: PluginAPI) => { + matchComponents( + { + prose: (value) => ({ '--container-size': value }), + }, + { + values: { + DEFAULT: 'normal', + sm: 'sm', + lg: 'lg', + }, + }, + ) + }, + } + }, + }, + ) + + expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim()) + .toMatchInlineSnapshot(` + ".prose { + --container-size: normal; + } + + @media (hover: hover) { + .hover\\:prose-lg:hover { + --container-size: lg; + } + }" + `) + }) +}) + describe('prefix()', () => { test('is an identity function', async () => { let fn = vi.fn() diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index 0edeb4b3b..a4552520d 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -371,11 +371,11 @@ export function buildPluginApi( }, addComponents(components, options) { - this.addUtilities(components) + this.addUtilities(components, options) }, matchComponents(components, options) { - this.matchUtilities(components) + this.matchUtilities(components, options) }, theme: createThemeFn(