mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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:
parent
ae8fb146a7
commit
3b033957c5
@ -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
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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}\``)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user