Make reference mode emit var fallbacks instead of all CSS vars

Author: philipp-spiess

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

@@ -99,12 +99,8 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ":root, :host {
-      --color-red-500: oklch(.637 .237 25.331);
-    }
-
-    .foo {
-      color: var(--color-red-500);
+    ".foo {
+      color: var(--color-red-500, oklch(.637 .237 25.331));
     }"
   `)
 })

packages/tailwindcss/src/ast.ts

@@ -256,11 +256,7 @@ export function walkDepth(
 
 // Optimize the AST for printing where all the special nodes that require custom
 // handling are handled such that the printing is a 1-to-1 transformation.
-export function optimizeAst(
-  ast: AstNode[],
-  designSystem: DesignSystem,
-  firstThemeRule: StyleRule | null,
-) {
+export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
   let atRoots: AstNode[] = []
   let seenAtProperties = new Set<string>()
   let cssThemeVariables = new DefaultMap<
@@ -396,27 +392,8 @@ export function optimizeAst(
 
     // Context
     else if (node.kind === 'context') {
+      // Remove reference imports from printing
       if (node.context.reference) {
-        if (firstThemeRule) {
-          let path = findNode(node.nodes, (node) => node === firstThemeRule)
-          if (path) {
-            let newPathToFirstThemeRule = path
-              .filter((node) => node.kind === 'at-rule')
-              .map((node) => ({ ...node, nodes: [] }))
-              .reverse() as AtRule[]
-
-            let child = firstThemeRule as AstNode
-            for (let node of newPathToFirstThemeRule) {
-              node.nodes = [child]
-              child = node
-            }
-
-            let newParent: AstNode[] = []
-            transform(child, newParent, { ...context, ...node.context, reference: false }, depth)
-            parent.push(...newParent)
-          }
-        }
-
         return
       } else {
         for (let child of node.nodes) {

packages/tailwindcss/src/at-import.test.ts

@@ -421,7 +421,7 @@ test('supports theme(reference) imports', async () => {
     ),
   ).resolves.toMatchInlineSnapshot(`
     ".text-red-500 {
-      color: var(--color-red-500);
+      color: var(--color-red-500, red);
     }
     "
   `)
@@ -580,12 +580,8 @@ test('resolves @reference as `@import "…" reference`', async () => {
       { loadStylesheet, candidates: ['text-red-500'] },
     ),
   ).resolves.toMatchInlineSnapshot(`
-    ":root, :host {
-      --color-red-500: red;
-    }
-
-    .text-red-500 {
-      color: var(--color-red-500);
+    ".text-red-500 {
+      color: var(--color-red-500, red);
     }
     "
   `)

packages/tailwindcss/src/compat/config.test.ts

@@ -1389,7 +1389,7 @@ test('blocklisted candidates are not generated', async () => {
     }
     .md\\:bg-white {
       @media (width >= 48rem) {
-        background-color: var(--color-white);
+        background-color: var(--color-white, #fff);
       }
     }
     "

packages/tailwindcss/src/index.test.ts

@@ -1842,7 +1842,7 @@ describe('Parsing theme values from CSS', () => {
       }
 
       .bg-potato {
-        background-color: var(--color-potato);
+        background-color: var(--color-potato, #ac855b);
       }
 
       .bg-tomato {
@@ -1874,7 +1874,7 @@ describe('Parsing theme values from CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ".animate-foo {
-        animation: var(--animate-foo);
+        animation: var(--animate-foo, foo 1s infinite);
       }"
     `)
   })
@@ -1911,7 +1911,7 @@ describe('Parsing theme values from CSS', () => {
       }
 
       .animate-foo {
-        animation: var(--animate-foo);
+        animation: var(--animate-foo, foo 1s infinite);
       }
 
       .bg-pink {
@@ -1936,7 +1936,7 @@ describe('Parsing theme values from CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ".bg-potato {
-        background-color: var(--color-potato);
+        background-color: var(--color-potato, #c794aa);
       }"
     `)
   })
@@ -1991,11 +1991,11 @@ describe('Parsing theme values from CSS', () => {
       }
 
       .bg-avocado {
-        background-color: var(--color-avocado);
+        background-color: var(--color-avocado, #c0cc6d);
       }
 
       .bg-potato {
-        background-color: var(--color-potato);
+        background-color: var(--color-potato, #ac855b);
       }
 
       .bg-tomato {
@@ -2323,7 +2323,7 @@ describe('Parsing theme values from CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ".bg-potato {
-        background-color: var(--color-potato);
+        background-color: var(--color-potato, #efb46b);
       }"
     `)
   })
@@ -3849,20 +3849,8 @@ describe('`@reference "…" reference`', () => {
         },
       ),
     ).resolves.toMatchInlineSnapshot(`
-      "@layer theme {
-        :root, :host {
-          --animate-spin: spin 1s linear infinite;
-        }
-      }
-
-      .bar {
-        animation: var(--animate-spin);
-      }
-
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
+      ".bar {
+        animation: var(--animate-spin, spin 1s linear infinite);
       }"
     `)
   })
@@ -3924,28 +3912,9 @@ describe('`@reference "…" reference`', () => {
         { loadStylesheet },
       ),
     ).resolves.toMatchInlineSnapshot(`
-      "@layer two {
-        @layer three {
-          :root, :host {
-            --color-red: red;
-            --animate-wiggle: wiggle 1s ease-in-out infinite;
-          }
-        }
-      }
-
-      .bar {
-        animation: var(--animate-wiggle);
-        color: var(--color-red);
-      }
-
-      @keyframes wiggle {
-        0%, 100% {
-          transform: rotate(-3deg);
-        }
-
-        50% {
-          transform: rotate(3deg);
-        }
+      ".bar {
+        animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite);
+        color: var(--color-red, red);
       }"
     `)
   })

packages/tailwindcss/src/index.ts

@@ -448,6 +448,10 @@ async function parseCss(
     if (node.name === '@theme') {
       let [themeOptions, themePrefix] = parseThemeOptions(node.params)
 
+      if (context.reference) {
+        themeOptions |= ThemeOptions.REFERENCE
+      }
+
       if (themePrefix) {
         if (!IS_VALID_PREFIX.test(themePrefix)) {
           throw new Error(
@@ -603,7 +607,6 @@ async function parseCss(
     root,
     utilitiesNode,
     features,
-    firstThemeRule,
   }
 }
 
@@ -616,10 +619,7 @@ export async function compileAst(
   features: Features
   build(candidates: string[]): AstNode[]
 }> {
-  let { designSystem, ast, globs, root, utilitiesNode, features, firstThemeRule } = await parseCss(
-    input,
-    opts,
-  )
+  let { designSystem, ast, globs, root, utilitiesNode, features } = await parseCss(input, opts)
 
   if (process.env.NODE_ENV !== 'test') {
     ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `))
@@ -647,7 +647,7 @@ export async function compileAst(
       }
 
       if (!utilitiesNode) {
-        compiled ??= optimizeAst(ast, designSystem, firstThemeRule)
+        compiled ??= optimizeAst(ast, designSystem)
         return compiled
       }
 
@@ -669,7 +669,7 @@ export async function compileAst(
       // If no new candidates were added, we can return the original CSS. This
       // currently assumes that we only add new candidates and never remove any.
       if (!didChange) {
-        compiled ??= optimizeAst(ast, designSystem, firstThemeRule)
+        compiled ??= optimizeAst(ast, designSystem)
         return compiled
       }
 
@@ -681,15 +681,15 @@ export async function compileAst(
       // CSS. This currently assumes that we only add new ast nodes and never
       // remove any.
       if (previousAstNodeCount === newNodes.length) {
-        compiled ??= optimizeAst(ast, designSystem, firstThemeRule)
+        compiled ??= optimizeAst(ast, designSystem)
         return compiled
       }
 
       previousAstNodeCount = newNodes.length
 
       utilitiesNode.nodes = newNodes
 
-      compiled = optimizeAst(ast, designSystem, firstThemeRule)
+      compiled = optimizeAst(ast, designSystem)
       return compiled
     },
   }

packages/tailwindcss/src/prefix.test.ts

@@ -228,7 +228,7 @@ test('a prefix can be configured via @import theme(…)', async () => {
     ]),
   ).toMatchInlineSnapshot(`
     ".tw\\:bg-potato {
-      background-color: var(--tw-color-potato);
+      background-color: var(--tw-color-potato, #7a4724);
     }
     .tw\\:custom {
       color: red;

packages/tailwindcss/src/theme.ts

@@ -177,11 +177,20 @@ export class Theme {
   }
 
   #var(themeKey: string) {
-    if (!this.values.has(themeKey)) {
+    let value = this.values.get(themeKey)
+    if (!value) {
       return null
     }
 
-    return `var(${escape(this.#prefixKey(themeKey))})`
+    // Since @theme blocks in reference mode do not emit the CSS variables, we can not assume that
+    // the values will eventually be set up in the browser (e.g. when using `@apply` inside roots
+    // that use `@reference`). Ensure we set up a fallback in these cases.
+    let fallback = null
+    if (value.options & ThemeOptions.REFERENCE) {
+      fallback = value.value
+    }
+
+    return `var(${escape(this.#prefixKey(themeKey))}${fallback ? `, ${fallback}` : ''})`
   }
 
   markUsedVariable(themeKey: string) {