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

Author: RobinMalfait

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

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(

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