Ensure namespace reset with escaped * works (#15603)

This PR fixes an issue if you want to reset a namespace like:

```css
@theme {
  --color-*: initial;
}
```

That some formatters such as Biome won't allow this syntax. To solve
that, this PR allows you to use an escaped `*` character.

```css
@theme {
  --color-\*: initial;
}
```

Fixes: #15602
This commit is contained in:
Robin Malfait 2025-01-13 11:43:22 +01:00 committed by GitHub
parent ae8fb146a7
commit 3b033957c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 0 deletions

View File

@ -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

View File

@ -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(

View File

@ -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}\``)