diff --git a/CHANGELOG.md b/CHANGELOG.md index 515473f78728..24f1637b1e24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure color opacity modifiers work with OKLCH colors ([#14741](https://github.com/tailwindlabs/tailwindcss/pull/14741)) - Ensure changes to the input CSS file result in a full rebuild ([#14744](https://github.com/tailwindlabs/tailwindcss/pull/14744)) - Add `postcss` as a dependency of `@tailwindcss/postcss` ([#14750](https://github.com/tailwindlabs/tailwindcss/pull/14750)) +- Always emit keyframes registered in `addUtilities` ([#14747](https://github.com/tailwindlabs/tailwindcss/pull/14747)) - Ensure loading stylesheets via the `?raw` and `?url` static asset query works when using the Vite plugin ([#14716](https://github.com/tailwindlabs/tailwindcss/pull/14716)) - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721)) - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720)) diff --git a/integrations/cli/plugins.test.ts b/integrations/cli/plugins.test.ts index 6fe04f022175..8d889b7b9a62 100644 --- a/integrations/cli/plugins.test.ts +++ b/integrations/cli/plugins.test.ts @@ -154,6 +154,7 @@ test( candidate`duration-350`, 'transition-duration: 350ms', 'animation-duration: 350ms', + '@keyframes enter {', ]) }, ) diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index abde27c9f1e9..81789bec212e 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -71,6 +71,39 @@ describe('theme', async () => { `) }) + test('keyframes added via addUtilities are appended to the AST', async () => { + let input = css` + @tailwind utilities; + @plugin "my-plugin"; + ` + + let compiler = await compile(input, { + loadModule: async (id, base) => { + return { + base, + module: plugin(function ({ addUtilities, theme }) { + addUtilities({ + '@keyframes enter': { + from: { + opacity: 'var(--tw-enter-opacity, 1)', + }, + }, + }) + }), + } + }, + }) + + expect(compiler.build([])).toMatchInlineSnapshot(` + "@keyframes enter { + from { + opacity: var(--tw-enter-opacity, 1); + } + } + " + `) + }) + test('plugin theme can extend colors', async () => { let input = css` @theme reference { diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index 8b9fc3bf8b25..a4552520d174 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -204,7 +204,7 @@ export function buildPluginApi( for (let [name, css] of Object.entries(utils)) { if (name.startsWith('@keyframes ')) { - designSystem.theme.addKeyframes(rule(name, objectToAst(css))) + ast.push(rule(name, objectToAst(css))) continue }