Only emits theme variables that are used outside of being defined by another variable

Author: philipp-spiess

integrations/cli/index.test.ts

@@ -1289,9 +1289,7 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
-      :root, :host {
-        --color-blue-500: blue;
-      }
+      <EMPTY>
       "
     `)
 

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

@@ -267,12 +267,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ":root, :host {
-      --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    }
-
-    @media (width >= 48rem) {
+    "@media (width >= 48rem) {
       .foo {
         bar: baz;
       }

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

@@ -2,8 +2,6 @@
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
 ":root, :host {
-  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --color-red-500: oklch(.637 .237 25.331);
   --spacing: .25rem;
 }

packages/tailwindcss/src/ast.ts

@@ -1,8 +1,9 @@
 import { parseAtRule } from './css-parser'
 import type { DesignSystem } from './design-system'
 import { enableRemoveUnusedThemeVariables } from './feature-flags'
-import { ThemeOptions } from './theme'
+import { Theme, ThemeOptions } from './theme'
 import { DefaultMap } from './utils/default-map'
+import { extractUsedVariables } from './utils/variables'
 
 const AT_SIGN = 0x40
 
@@ -270,6 +271,8 @@ export function optimizeAst(
   let keyframes = new Set<AtRule>()
   let usedKeyframeNames = new Set()
 
+  let variableDependencies = new DefaultMap<string, Set<string>>(() => new Set())
+
   function transform(
     node: AstNode,
     parent: Extract<AstNode, { nodes: AstNode[] }>['nodes'],
@@ -289,7 +292,15 @@ export function optimizeAst(
 
       // Track used CSS variables
       if (node.value.includes('var(')) {
-        designSystem.trackUsedVariables(node.value)
+        // Declaring another variable does not count as usage. Instead, we mark
+        // the relationship
+        if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
+          for (let variable of extractUsedVariables(node.value)) {
+            variableDependencies.get(variable).add(node.property)
+          }
+        } else {
+          designSystem.trackUsedVariables(node.value)
+        }
       }
 
       // Track used animation names
@@ -426,11 +437,17 @@ export function optimizeAst(
   }
   // Remove unused theme variables
   if (enableRemoveUnusedThemeVariables) {
+    // Remove unused theme variables
     next: for (let [parent, declarations] of cssThemeVariables) {
       for (let declaration of declarations) {
-        let options = designSystem.theme.getOptions(declaration.property)
-
-        if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) {
+        // Find out if a variable is either used directly or if any of the
+        // variables referencing it is used.
+        let variableUsed = isVariableUsed(
+          declaration.property,
+          designSystem.theme,
+          variableDependencies,
+        )
+        if (variableUsed) {
           if (declaration.property.startsWith('--animate-')) {
             let parts = declaration.value!.split(/\s+/)
             for (let part of parts) usedKeyframeNames.add(part)
@@ -570,3 +587,33 @@ function findNode(ast: AstNode[], fn: (node: AstNode) => boolean): AstNode[] | n
   })
   return foundPath
 }
+
+// Find out if a variable is either used directly or if any of the variables that depend on it are
+// used
+function isVariableUsed(
+  variable: string,
+  theme: Theme,
+  variableDependencies: Map<string, Set<string>>,
+  alreadySeenVariables: Set<string> = new Set(),
+): boolean {
+  // Break recursions when visiting a variable twice
+  if (alreadySeenVariables.has(variable)) {
+    return true
+  } else {
+    alreadySeenVariables.add(variable)
+  }
+
+  let options = theme.getOptions(variable)
+  if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) {
+    return true
+  } else {
+    let dependencies = variableDependencies.get(variable) ?? []
+    for (let dependency of dependencies) {
+      if (isVariableUsed(dependency, theme, variableDependencies, alreadySeenVariables)) {
+        return true
+      }
+    }
+  }
+
+  return false
+}

packages/tailwindcss/src/design-system.ts

@@ -7,7 +7,7 @@ import { getClassOrder } from './sort'
 import type { Theme, ThemeKey } from './theme'
 import { Utilities, createUtilities, withAlpha } from './utilities'
 import { DefaultMap } from './utils/default-map'
-import * as ValueParser from './value-parser'
+import { extractUsedVariables } from './utils/variables'
 import { Variants, createVariants } from './variants'
 
 export type DesignSystem = {
@@ -69,19 +69,9 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
   })
 
   let trackUsedVariables = new DefaultMap((raw) => {
-    ValueParser.walk(ValueParser.parse(raw), (node) => {
-      if (node.kind !== 'function' || node.value !== 'var') return
-
-      ValueParser.walk(node.nodes, (child) => {
-        if (child.kind !== 'word' || child.value[0] !== '-' || child.value[1] !== '-') return
-
-        theme.markUsedVariable(child.value)
-      })
-
-      return ValueParser.ValueWalkAction.Skip
-    })
-
-    return true
+    for (let variable of extractUsedVariables(raw)) {
+      theme.markUsedVariable(variable)
+    }
   })
 
   let designSystem: DesignSystem = {
@@ -104,7 +94,7 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
           },
         })
 
-        astNodes = optimizeAst(astNodes, designSystem)
+        astNodes = optimizeAst(astNodes, designSystem, null)
 
         if (astNodes.length === 0 || wasInvalid) {
           result.push(null)

packages/tailwindcss/src/index.test.ts

@@ -2366,6 +2366,54 @@ describe('Parsing themes values from CSS', () => {
       }"
     `)
   })
+
+  test('only emits theme variables that are used outside of being defined by another variable', async () => {
+    let { build } = await compile(
+      css`
+        @theme {
+          --var-a: var(--var-b);
+          --var-b: var(--var-c);
+          --var-c: var(--var-d);
+          --var-d: red;
+
+          --var-four: green;
+          --var-three: var(--var-four);
+          --var-two: var(--var-three);
+          --var-one: var(--var-two);
+
+          --var-eins: var(--var-zwei);
+          --var-zwei: var(--var-drei);
+          --var-drei: var(--var-vier);
+          --var-vier: blue;
+        }
+
+        @utility get-var-* {
+          color: --value(--var-\*);
+        }
+        @tailwind utilities;
+      `,
+      {},
+    )
+
+    expect(optimizeCss(build(['get-var-b', 'get-var-two'])).trim()).toMatchInlineSnapshot(`
+      ":root, :host {
+        --var-b: var(--var-c);
+        --var-c: var(--var-d);
+        --var-d: red;
+        --var-four: green;
+        --var-three: var(--var-four);
+        --var-two: var(--var-three);
+      }
+
+      .get-var-b {
+        color: var(--var-b);
+      }
+
+      .get-var-two {
+        color: var(--var-two);
+      }"
+    `)
+  })
 })
 
 describe('plugins', () => {

packages/tailwindcss/src/utils/variables.ts

@@ -0,0 +1,17 @@
+import * as ValueParser from '../value-parser'
+
+export function extractUsedVariables(raw: string): string[] {
+  let variables: string[] = []
+  ValueParser.walk(ValueParser.parse(raw), (node) => {
+    if (node.kind !== 'function' || node.value !== 'var') return
+
+    ValueParser.walk(node.nodes, (child) => {
+      if (child.kind !== 'word' || child.value[0] !== '-' || child.value[1] !== '-') return
+
+      variables.push(child.value)
+    })
+
+    return ValueParser.ValueWalkAction.Skip
+  })
+  return variables
+}