diff --git a/CHANGELOG.md b/CHANGELOG.md index 86205ef4e..22d88df1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Discard matched variants with non-string values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799)) - Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798)) - Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](https://github.com/tailwindlabs/tailwindcss/pull/18769)) +- Hide internal fields from completions in `matchUtilities` ([#18820](https://github.com/tailwindlabs/tailwindcss/pull/18820)) - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](https://github.com/tailwindlabs/tailwindcss/pull/18815)) - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](https://github.com/tailwindlabs/tailwindcss/pull/18816)) - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](https://github.com/tailwindlabs/tailwindcss/pull/18817)) diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index c52693ef0..42b1c6176 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -472,6 +472,10 @@ export function buildPluginApi({ // work even with legacy configs and plugins valueKeys.delete('__BARE_VALUE__') + // The `__CSS_VALUES__` key is a special key used by the theme function + // to transport `@theme` metadata about values from CSS + valueKeys.delete('__CSS_VALUES__') + // The `DEFAULT` key is represented as `null` in the utility API if (valueKeys.has('DEFAULT')) { valueKeys.delete('DEFAULT') diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index f9aca65ce..32893b1a0 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -712,3 +712,38 @@ test('matchVariant', async () => { expect(v1.name).toEqual('foo') expect(v1.values).toEqual(['a', 'b']) }) + +test('matchUtilities discards internal only helpers from suggestions when using the theme function', async () => { + let input = css` + @import 'tailwindcss/utilities'; + @plugin "./plugin.js"; + + @theme { + --color-red: red; + } + ` + + let design = await __unstable__loadDesignSystem(input, { + loadStylesheet: async (_, base) => ({ + path: '', + base, + content: '@tailwind utilities;', + }), + loadModule: async () => ({ + path: '', + base: '', + module: plugin(({ matchUtilities, theme }) => { + matchUtilities({ foo: (val) => ({ color: val }) }, { values: theme('colors') }) + matchUtilities({ bar: (val) => ({ color: val }) }, { values: theme('transitionDuration') }) + }), + }), + }) + + let classNames = design.getClassList().map((e) => e[0]) + + expect(classNames).not.toContain('foo-__BARE_VALUE__') + expect(classNames).not.toContain('bar-__BARE_VALUE__') + + expect(classNames).not.toContain('foo-__CSS_VALUES__') + expect(classNames).not.toContain('bar-__CSS_VALUES__') +})