diff --git a/CHANGELOG.md b/CHANGELOG.md index 96d38c1b1b1a..88bb4669b4b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Add missing `main` and `browser` fields for `@tailwindcss/browser` ([#15594](https://github.com/tailwindlabs/tailwindcss/pull/15594)) +- Ensure namespace reset with escaped `*` (e.g.: `--color-\*: initial;`) ([#15603](https://github.com/tailwindlabs/tailwindcss/pull/15603)) - _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596)) ## [4.0.0-beta.9] - 2025-01-09 diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 677f33593454..89ddceb10fb6 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1208,6 +1208,53 @@ describe('Parsing themes values from CSS', () => { `) }) + test('`@theme` values can be unset (using the escaped syntax)', async () => { + expect( + await compileCss( + css` + @theme { + --color-red: #f00; + --color-blue: #00f; + --text-sm: 13px; + --text-md: 16px; + + --animate-spin: spin 1s infinite linear; + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + } + @theme { + --color-\*: initial; + --text-md: initial; + --animate-\*: initial; + --keyframes-\*: initial; + } + @theme { + --color-green: #0f0; + } + @tailwind utilities; + `, + ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'], + ), + ).toMatchInlineSnapshot(` + ":root { + --text-sm: 13px; + --color-green: #0f0; + } + + .text-sm { + font-size: var(--text-sm); + } + + .accent-green { + accent-color: var(--color-green); + }" + `) + }) + test('all `@theme` values can be unset at once', async () => { expect( await compileCss( diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 03379c7b4e4c..a2d3c205fa4a 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -41,6 +41,10 @@ export class Theme { ) {} add(key: string, value: string, options = ThemeOptions.NONE): void { + if (key.endsWith('\\*')) { + key = key.slice(0, -2) + '*' + } + if (key.endsWith('-*')) { if (value !== 'initial') { throw new Error(`Invalid theme value \`${value}\` for namespace \`${key}\``)