Allow both escaped dots and underscores to be registered in theme

Author: philipp-spiess

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

@@ -158,21 +158,35 @@ describe('compiling CSS', () => {
         css`
           @theme {
             --spacing-*: initial;
-            --spacing-1\.5: 2.5rem;
+            --spacing-1\.5: 1.5px;
+            --spacing-2_5: 2.5px;
+            --spacing-3\.5: 3.5px;
+            --spacing-3_5: 3.5px;
             --spacing-foo\/bar: 3rem;
           }
           @tailwind utilities;
         `,
-        ['m-1.5', 'm-foo/bar'],
+        ['m-1.5', 'm-2.5', 'm-2_5', 'm-3.5', 'm-foo/bar'],
       ),
     ).toMatchInlineSnapshot(`
       ":root, :host {
-        --spacing-1_5: 2.5rem;
+        --spacing-1\\.5: 1.5px;
+        --spacing-2_5: 2.5px;
+        --spacing-3\\.5: 3.5px;
+        --spacing-3_5: 3.5px;
         --spacing-foo\\/bar: 3rem;
       }
 
       .m-1\\.5 {
-        margin: var(--spacing-1_5);
+        margin: var(--spacing-1\\.5);
+      }
+
+      .m-2\\.5, .m-2_5 {
+        margin: var(--spacing-2_5);
+      }
+
+      .m-3\\.5 {
+        margin: var(--spacing-3\\.5);
       }
 
       .m-foo\\/bar {

packages/tailwindcss/src/theme.ts

@@ -41,8 +41,6 @@ export class Theme {
   ) {}
 
   add(key: string, value: string, options = ThemeOptions.NONE): void {
-    key = key.replaceAll('.', '_')
-
     if (key.endsWith('-*')) {
       if (value !== 'initial') {
         throw new Error(`Invalid theme value \`${value}\` for namespace \`${key}\``)
@@ -147,11 +145,20 @@ export class Theme {
   #resolveKey(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
     for (let namespace of themeKeys) {
       let themeKey =
-        candidateValue !== null
-          ? (`${namespace}-${candidateValue.replaceAll('.', '_')}` as ThemeKey)
-          : namespace
+        candidateValue !== null ? (`${namespace}-${candidateValue}` as ThemeKey) : namespace
+
+      if (!this.values.has(themeKey)) {
+        // If the exact theme key is not found, we might be trying to resolve a key containing a dot
+        // that was registered with an underscore instead:
+        if (candidateValue !== null && candidateValue.includes('.')) {
+          themeKey = `${namespace}-${candidateValue.replaceAll('.', '_')}` as ThemeKey
+
+          if (!this.values.has(themeKey)) continue
+        } else {
+          continue
+        }
+      }
 
-      if (!this.values.has(themeKey)) continue
       if (isIgnoredThemeKey(themeKey, namespace)) continue
 
       return themeKey