Skip to content

Commit

Permalink
Ensure namespace reset with escaped * works (#15603)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
RobinMalfait authored Jan 13, 2025
1 parent ae8fb14 commit 3b03395
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
47 changes: 47 additions & 0 deletions packages/tailwindcss/src/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 4 additions & 0 deletions packages/tailwindcss/src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}\``)
Expand Down

0 comments on commit 3b03395

Please sign in to comment.