Force-inline when --theme(…) is used inside at rules

Author: philipp-spiess

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

@@ -152,26 +152,70 @@ describe('--theme(…)', () => {
           color: --theme(--color-red-500);
         }
       `),
+    ).toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: red;
+      }
+
+      .red {
+        color: var(--color-red-500);
+      }"
+    `)
+  })
+
+  test('--theme(--color-red-500 inline)', async () => {
+    expect(
+      await compileCss(css`
+        @theme {
+          --color-red-500: #f00;
+        }
+        .red {
+          color: --theme(--color-red-500 inline);
+        }
+      `),
     ).toMatchInlineSnapshot(`
       ".red {
         color: red;
       }"
     `)
   })
 
-  test('--theme(…) can only be used with CSS variables from your theme', async () => {
-    expect(() =>
-      compileCss(css`
+  test('--theme(--color-red-500/50)', async () => {
+    expect(
+      await compileCss(css`
         @theme {
           --color-red-500: #f00;
         }
         .red {
-          color: --theme(colors.red.500);
+          color: --theme(--color-red-500/0.5);
         }
       `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --theme(…) function can only be used with CSS variables from your theme.]`,
-    )
+    ).toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: red;
+      }
+
+      .red {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }"
+    `)
+  })
+
+  test('--theme(--color-red-500/50 inline)', async () => {
+    expect(
+      await compileCss(css`
+        @theme {
+          --color-red-500: #f00;
+        }
+        .red {
+          color: --theme(--color-red-500/50 inline);
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ".red {
+        color: oklab(62.7955% .224863 .125846);
+      }"
+    `)
   })
 
   test('--theme(…) forces the value to be retrieved as inline when used inside an at rule', async () => {
@@ -207,6 +251,21 @@ describe('--theme(…)', () => {
       }"
     `)
   })
+
+  test('--theme(…) can only be used with CSS variables from your theme', async () => {
+    expect(() =>
+      compileCss(css`
+        @theme {
+          --color-red-500: #f00;
+        }
+        .red {
+          color: --theme(colors.red.500);
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: The --theme(…) function can only be used with CSS variables from your theme.]`,
+    )
+  })
 })
 
 describe('theme(…)', () => {

packages/tailwindcss/src/css-functions.ts

@@ -5,14 +5,17 @@ import { withAlpha } from './utilities'
 import { segment } from './utils/segment'
 import * as ValueParser from './value-parser'
 
-const functions: Record<string, (designSystem: DesignSystem, ...args: string[]) => string> = {
+const CSS_FUNCTIONS: Record<
+  string,
+  (designSystem: DesignSystem, source: AstNode, ...args: string[]) => string
+> = {
   '--alpha': alpha,
   '--spacing': spacing,
   '--theme': theme,
   theme: legacyTheme,
 }
 
-function alpha(_designSystem: DesignSystem, value: string, ...rest: string[]) {
+function alpha(_designSystem: DesignSystem, _source: AstNode, value: string, ...rest: string[]) {
   let [color, alpha] = segment(value, '/').map((v) => v.trim())
 
   if (!color || !alpha) {
@@ -30,7 +33,7 @@ function alpha(_designSystem: DesignSystem, value: string, ...rest: string[]) {
   return withAlpha(color, alpha)
 }
 
-function spacing(designSystem: DesignSystem, value: string, ...rest: string[]) {
+function spacing(designSystem: DesignSystem, _source: AstNode, value: string, ...rest: string[]) {
   if (!value) {
     throw new Error(`The --spacing(…) function requires an argument, but received none.`)
   }
@@ -51,27 +54,44 @@ function spacing(designSystem: DesignSystem, value: string, ...rest: string[]) {
   return `calc(${multiplier} * ${value})`
 }
 
-function theme(designSystem: DesignSystem, path: string, ...fallback: string[]) {
+function theme(designSystem: DesignSystem, source: AstNode, path: string, ...fallback: string[]) {
   if (!path.startsWith('--')) {
     throw new Error(`The --theme(…) function can only be used with CSS variables from your theme.`)
   }
 
-  let resolvedValue = designSystem.resolveThemeValue(path)
+  let inline = false
+  if (path.endsWith(' inline')) {
+    inline = true
+    path = path.slice(0, -7)
+  }
+
+  // If the `--theme(…)` function is used within an at-rule (e.g. `@media (width >= theme(…)))`, we
+  // have to always inline the result since CSS does not support CSS variables in these positions.
+  if (source.kind === 'at-rule') {
+    inline = true
+  }
+
+  let resolvedValue = designSystem.resolveThemeValue(path, inline)
 
   if (!resolvedValue && fallback.length > 0) {
     return fallback.join(', ')
   }
 
   if (!resolvedValue) {
     throw new Error(
-      `Could not resolve value for theme function: \`theme(${path})\`. Consider checking if the path is correct or provide a fallback value to silence this error.`,
+      `Could not resolve value for theme function: \`theme(${path})\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.`,
     )
   }
 
   return resolvedValue
 }
 
-function legacyTheme(designSystem: DesignSystem, path: string, ...fallback: string[]) {
+function legacyTheme(
+  designSystem: DesignSystem,
+  _source: AstNode,
+  path: string,
+  ...fallback: string[]
+) {
   path = eventuallyUnquote(path)
 
   let resolvedValue = designSystem.resolveThemeValue(path)
@@ -90,7 +110,7 @@ function legacyTheme(designSystem: DesignSystem, path: string, ...fallback: stri
 }
 
 export const THEME_FUNCTION_INVOCATION = new RegExp(
-  Object.keys(functions)
+  Object.keys(CSS_FUNCTIONS)
     .map((x) => `${x}\\(`)
     .join('|'),
 )
@@ -101,7 +121,7 @@ export function substituteFunctions(ast: AstNode[], designSystem: DesignSystem)
     // Find all declaration values
     if (node.kind === 'declaration' && node.value && THEME_FUNCTION_INVOCATION.test(node.value)) {
       features |= Features.ThemeFunction
-      node.value = substituteFunctionsInValue(node.value, designSystem)
+      node.value = substituteFunctionsInValue(node.value, node, designSystem)
       return
     }
 
@@ -115,19 +135,27 @@ export function substituteFunctions(ast: AstNode[], designSystem: DesignSystem)
         THEME_FUNCTION_INVOCATION.test(node.params)
       ) {
         features |= Features.ThemeFunction
-        node.params = substituteFunctionsInValue(node.params, designSystem)
+        node.params = substituteFunctionsInValue(node.params, node, designSystem)
       }
     }
   })
   return features
 }
 
-export function substituteFunctionsInValue(value: string, designSystem: DesignSystem): string {
+export function substituteFunctionsInValue(
+  value: string,
+  source: AstNode,
+  designSystem: DesignSystem,
+): string {
   let ast = ValueParser.parse(value)
   ValueParser.walk(ast, (node, { replaceWith }) => {
-    if (node.kind === 'function' && node.value in functions) {
+    if (node.kind === 'function' && node.value in CSS_FUNCTIONS) {
       let args = segment(ValueParser.toCss(node.nodes).trim(), ',').map((x) => x.trim())
-      let result = functions[node.value as keyof typeof functions](designSystem, ...args)
+      let result = CSS_FUNCTIONS[node.value as keyof typeof CSS_FUNCTIONS](
+        designSystem,
+        source,
+        ...args,
+      )
       return replaceWith(ValueParser.parse(result))
     }
   })