Extend support to @container and @supports

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Support CSS `theme()` functions inside `@custom-media` rules ([#14358])(https://github.com/tailwindlabs/tailwindcss/pull/14358)
+- Support CSS `theme()` functions inside other `@custom-media`, `@container`, and `@supports` rules ([#14358])(https://github.com/tailwindlabs/tailwindcss/pull/14358)
 
 ### Fixed
 

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

@@ -620,63 +620,80 @@ describe('theme function', () => {
     })
   })
 
-  describe('in @custom-media queries', () => {
-    test('@custom-media --my-media (min-width:theme(breakpoint.md)) and (max-width: theme(--breakpoint-lg))', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-          }
-          /* prettier-ignore */
-          @custom-media --my-media (min-width:theme(breakpoint.md)) and (max-width: theme(--breakpoint-lg));
-          @media (--my-media) {
-            .red {
-              color: red;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        ":root {
+  test('@custom-media --my-media (min-width: theme(breakpoint.md))', async () => {
+    expect(
+      await compileCss(css`
+        @theme {
           --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
         }
-
-        @media (width >= 48rem) and (width <= 64rem) {
+        @custom-media --my-media (min-width: theme(breakpoint.md));
+        @media (--my-media) {
           .red {
             color: red;
           }
-        }"
-      `)
-    })
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --breakpoint-md: 48rem;
+      }
 
-    test('@custom-media --my-media (width >= theme(breakpoint.md)) and (width<theme(--breakpoint-lg))', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-          }
-          @custom-media --my-media (width >= theme(breakpoint.md)) and (width<theme(--breakpoint-lg));
-          @media (--my-media) {
-            .red {
-              color: red;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        ":root {
+      @media (width >= 48rem) {
+        .red {
+          color: red;
+        }
+      }"
+    `)
+  })
+
+  test('@container (width > theme(breakpoint.md))', async () => {
+    expect(
+      await compileCss(css`
+        @theme {
           --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
         }
+        @container (width > theme(breakpoint.md)) {
+          .red {
+            color: red;
+          }
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --breakpoint-md: 48rem;
+      }
 
-        @media (width >= 48rem) and (width < 64rem) {
+      @container (width > 48rem) {
+        .red {
+          color: red;
+        }
+      }"
+    `)
+  })
+
+  test('@supports (text-stroke: theme(--font-size-xs))', async () => {
+    expect(
+      await compileCss(css`
+        @theme {
+          --font-size-xs: 0.75rem;
+        }
+        @supports (text-stroke: theme(--font-size-xs)) {
           .red {
             color: red;
           }
-        }"
-      `)
-    })
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --font-size-xs: .75rem;
+      }
+
+      @supports (text-stroke: 0.75rem) {
+        .red {
+          color: red;
+        }
+      }"
+    `)
   })
 })
 

packages/tailwindcss/src/css-functions.ts

@@ -13,11 +13,14 @@ export function substituteFunctions(ast: AstNode[], pluginApi: PluginAPI) {
       return
     }
 
-    // Find @media rules
+    // Find at-rules rules
     if (node.kind === 'rule') {
       if (
         node.selector[0] === '@' &&
-        (node.selector.startsWith('@media ') || node.selector.startsWith('@custom-media ')) &&
+        (node.selector.startsWith('@media ') ||
+          node.selector.startsWith('@custom-media ') ||
+          node.selector.startsWith('@container ') ||
+          node.selector.startsWith('@supports ')) &&
         node.selector.includes(THEME_FUNCTION_INVOCATION)
       ) {
         node.selector = substituteFunctionsInValue(node.selector, pluginApi)