diff --git a/CHANGELOG.md b/CHANGELOG.md index c2686352696a..7ff6cdbb6bc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,11 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! - ### Fixed - Ensure that the `containers` JS theme key is added to the `--container-*` namespace. ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169)) +- Fix missing `@keyframes` definition ([#16237](https://github.com/tailwindlabs/tailwindcss/pull/16237)) ## [4.0.3] - 2025-02-01 diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 67a0a3d64dab..497ccc034173 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1170,6 +1170,45 @@ describe('Parsing themes values from CSS', () => { `) }) + test('`@keyframes` in `@theme` are generated when name contains a new line', async () => { + expect( + await compileCss( + css` + @theme { + --animate-very-long-animation-name: very-long-animation-name + var( + --very-long-animation-name-configuration, + 2.5s ease-in-out 0s infinite normal none running + ); + + @keyframes very-long-animation-name { + to { + opacity: 1; + } + } + } + + @tailwind utilities; + `, + ['animate-very-long-animation-name'], + ), + ).toMatchInlineSnapshot(` + ":root, :host { + --animate-very-long-animation-name: very-long-animation-name var(--very-long-animation-name-configuration, 2.5s ease-in-out 0s infinite normal none running); + } + + .animate-very-long-animation-name { + animation: var(--animate-very-long-animation-name); + } + + @keyframes very-long-animation-name { + to { + opacity: 1; + } + }" + `) + }) + test('`@theme` values can be unset', async () => { expect( await compileCss( diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 2baed9acf6a5..37c19a3f3edf 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -545,7 +545,7 @@ async function parseCss( let keyframesRules = theme.getKeyframes() if (keyframesRules.length > 0) { let animationParts = [...theme.namespace('--animate').values()].flatMap((animation) => - animation.split(' '), + animation.split(/\s+/), ) for (let keyframesRule of keyframesRules) {