Don't inject the fallback if the injected fallback is initial

Author: philipp-spiess

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -9,8 +9,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-bold: 700;
-    --default-font-family: var(--font-sans, initial);
-    --default-mono-font-family: var(--font-mono, initial);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
   }
 }
 

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -98,8 +98,8 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
   :root, :host {
     --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --tw-default-font-family: var(--tw-font-sans, initial);
-    --tw-default-mono-font-family: var(--tw-font-mono, initial);
+    --tw-default-font-family: var(--tw-font-sans);
+    --tw-default-mono-font-family: var(--tw-font-mono);
   }
 }
 

packages/tailwindcss/src/css-functions.test.ts

@@ -286,6 +286,43 @@ describe('--theme(…)', () => {
     `)
   })
 
+  test.only('--theme(…) does not inject the fallback if the fallback is `initial`', async () => {
+    expect(
+      await compileCss(
+        css`
+          @theme prefix(tw) {
+            --font-sans:
+              ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+              'Segoe UI Symbol', 'Noto Color Emoji';
+            --default-font-family: --theme(--font-sans, initial);
+          }
+          @layer base {
+            html {
+              font-family: --theme(--default-font-family, sans-serif);
+            }
+          }
+          @tailwind utilities;
+        `,
+        ['tw:font-sans'],
+      ),
+    ).toMatchInlineSnapshot(`
+      ":root, :host {
+        --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        --tw-default-font-family: var(--tw-font-sans);
+      }
+
+      @layer base {
+        html {
+          font-family: var(--tw-default-font-family, sans-serif);
+        }
+      }
+
+      .tw\\:font-sans {
+        font-family: var(--tw-font-sans);
+      }"
+    `)
+  })
+
   test('--theme(…) forces the value to be retrieved as inline when used inside an at rule', async () => {
     expect(
       await compileCss(css`

packages/tailwindcss/src/css-functions.ts

@@ -106,14 +106,16 @@ function theme(
   // - …as the value if the value returned is `initial`
   // - …expect any `initial` fallbacks on `var(…)`, `theme(…)`, or `--theme(…)`
   // - …as the fallback if a `var(…)` with no fallback is returned
-  if (resolvedValue === 'initial') return fallback.join(', ')
+  let joinedFallback = fallback.join(', ')
+  if (joinedFallback === 'initial') return resolvedValue
+  if (resolvedValue === 'initial') return joinedFallback
   if (
     resolvedValue.startsWith('var(') ||
     resolvedValue.startsWith('theme(') ||
     resolvedValue.startsWith('--theme(')
   ) {
     let valueAst = ValueParser.parse(resolvedValue)
-    injectFallbackForInitialFallback(valueAst, fallback.join(', '))
+    injectFallbackForInitialFallback(valueAst, joinedFallback)
     return ValueParser.toCss(valueAst)
   }