Ensure escaped theme variables are handled correctly

Author: philipp-spiess

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
+- Ensure escaped theme variables are handled correctly
 
 ## [4.0.1] - 2025-01-29
 

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -1,6 +1,5 @@
 import type { DesignSystem } from '../design-system'
 import { ThemeOptions } from '../theme'
-import { escape } from '../utils/escape'
 import type { ResolvedConfig } from './config/types'
 
 function resolveThemeValue(value: unknown, subValue: string | null = null): string | null {
@@ -55,7 +54,7 @@ export function applyConfigToTheme(
     if (!name) continue
 
     designSystem.theme.add(
-      `--${escape(name)}`,
+      `--${name}`,
       '' + value,
       ThemeOptions.INLINE | ThemeOptions.REFERENCE | ThemeOptions.DEFAULT,
     )

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -1425,7 +1425,7 @@ describe('theme', async () => {
         :root, :host {
           --width-1: 0.25rem;
           --width-1\\/2: 60%;
-          --width-1\\.5: 0.375rem;
+          --width-1_5: 0.375rem;
           --width-2_5: 0.625rem;
         }
         "
@@ -1482,7 +1482,7 @@ describe('theme', async () => {
         :root, :host {
           --width-1: 0.25rem;
           --width-1\\/2: 60%;
-          --width-1\\.5: 0.375rem;
+          --width-1_5: 0.375rem;
           --width-2_5: 0.625rem;
         }
         "

packages/tailwindcss/src/index.test.ts

@@ -152,6 +152,35 @@ describe('compiling CSS', () => {
     `)
   })
 
+  test('unescapes theme variables and handles dots as underscore', async () => {
+    expect(
+      await compileCss(
+        css`
+          @theme {
+            --spacing-*: initial;
+            --spacing-1\.5: 2.5rem;
+            --spacing-foo\/bar: 3rem;
+          }
+          @tailwind utilities;
+        `,
+        ['m-1.5', 'm-foo/bar'],
+      ),
+    ).toMatchInlineSnapshot(`
+      ":root, :host {
+        --spacing-1_5: 2.5rem;
+        --spacing-foo\\/bar: 3rem;
+      }
+
+      .m-1\\.5 {
+        margin: var(--spacing-1_5);
+      }
+
+      .m-foo\\/bar {
+        margin: var(--spacing-foo\\/bar);
+      }"
+    `)
+  })
+
   test('adds vendor prefixes', async () => {
     expect(
       await compileCss(

packages/tailwindcss/src/index.ts

@@ -27,6 +27,7 @@ import * as CSS from './css-parser'
 import { buildDesignSystem, type DesignSystem } from './design-system'
 import { Theme, ThemeOptions } from './theme'
 import { createCssUtility } from './utilities'
+import { escape, unescape } from './utils/escape'
 import { segment } from './utils/segment'
 import { compoundsForSelectors, IS_VALID_VARIANT_NAME } from './variants'
 export type Config = UserConfig
@@ -461,7 +462,7 @@ async function parseCss(
 
         if (child.kind === 'comment') return
         if (child.kind === 'declaration' && child.property.startsWith('--')) {
-          theme.add(child.property, child.value ?? '', themeOptions)
+          theme.add(unescape(child.property), child.value ?? '', themeOptions)
           return
         }
 
@@ -520,7 +521,7 @@ async function parseCss(
 
     for (let [key, value] of theme.entries()) {
       if (value.options & ThemeOptions.REFERENCE) continue
-      nodes.push(decl(key, value.value))
+      nodes.push(decl(escape(key), value.value))
     }
 
     let keyframesRules = theme.getKeyframes()

packages/tailwindcss/src/theme.ts

@@ -41,9 +41,7 @@ export class Theme {
   ) {}
 
   add(key: string, value: string, options = ThemeOptions.NONE): void {
-    if (key.endsWith('\\*')) {
-      key = key.slice(0, -2) + '*'
-    }
+    key = key.replaceAll('.', '_')
 
     if (key.endsWith('-*')) {
       if (value !== 'initial') {
@@ -150,7 +148,7 @@ export class Theme {
     for (let namespace of themeKeys) {
       let themeKey =
         candidateValue !== null
-          ? (escape(`${namespace}-${candidateValue.replaceAll('.', '_')}`) as ThemeKey)
+          ? (`${namespace}-${candidateValue.replaceAll('.', '_')}` as ThemeKey)
           : namespace
 
       if (!this.values.has(themeKey)) continue
@@ -167,7 +165,7 @@ export class Theme {
       return null
     }
 
-    return `var(${this.#prefixKey(themeKey)})`
+    return `var(${escape(this.#prefixKey(themeKey))})`
   }
 
   resolve(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {