Support advanced screens from JS configs

Author: thecrypticace

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -10,7 +10,7 @@ import { resolveConfig } from './config/resolve-config'
 import type { UserConfig } from './config/types'
 import { darkModePlugin } from './dark-mode'
 import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
-import { registerScreensConfig } from './screens-config'
+import { buildMediaQuery, registerScreensConfig } from './screens-config'
 import { registerThemeVariantOverrides } from './theme-variants'
 
 export async function applyCompatibilityHooks({
@@ -191,6 +191,13 @@ export async function applyCompatibilityHooks({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
 
+  // Replace `resolveBreakpointQuery` with a version that can handle more
+  // complex breakpoint queries like objects, tuples, and custom media queries
+  // that are present in JS theme configurations.
+  designSystem.resolveBreakpointQuery = function resolveBreakpointQuery(name: string) {
+    return buildMediaQuery(pluginApi.theme(`screens.${name}`))
+  }
+
   // Replace `resolveThemeValue` with a version that is backwards compatible
   // with dot-notation but also aware of any JS theme configurations registered
   // by plugins or JS config files. This is significantly slower than just

packages/tailwindcss/src/compat/plugin-api.ts

@@ -85,7 +85,7 @@ export function buildPluginApi(
   let api: PluginAPI = {
     addBase(css) {
       let baseNodes = objectToAst(css)
-      substituteFunctions(baseNodes, api.theme)
+      substituteFunctions(baseNodes, api.theme, designSystem.resolveBreakpointQuery)
       ast.push(rule('@layer base', baseNodes))
     },
 

packages/tailwindcss/src/compile.ts

@@ -49,6 +49,7 @@ export function compileCandidates(
         substituteFunctions(
           rules.map(({ node }) => node),
           designSystem.resolveThemeValue,
+          designSystem.resolveBreakpointQuery,
         )
       } catch (err) {
         // If substitution fails then the candidate likely contains a call to

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

@@ -830,6 +830,65 @@ describe('screen function', () => {
         }"
       `)
     })
+
+    test('@media screen(advanced)', async () => {
+      let compiled = await compile(
+        css`
+          @config "./my-config.js";
+          .foo {
+            @media screen(simple) {
+              --custom: simple;
+            }
+            @media screen(min-only) {
+              --custom: min-only;
+            }
+            @media screen(max-only) {
+              --custom: max-only;
+            }
+            @media screen(min-max) {
+              --custom: min-max;
+            }
+            @media screen(multi) {
+              --custom: multi;
+            }
+          }
+        `,
+        {
+          loadConfig: async () => ({
+            theme: {
+              screens: {
+                simple: '48rem',
+                'min-only': { min: '48rem' },
+                'max-only': { max: '64rem' },
+                'min-max': { max: '64rem' },
+                multi: ['32rem', { min: '48rem', max: '64rem' }],
+              },
+            },
+          }),
+        },
+      )
+
+      expect(compiled.build([])).toMatchInlineSnapshot(`
+        ".foo {
+          @media (width >= 48rem) {
+            --custom: simple;
+          }
+          @media (width >= 48rem) {
+            --custom: min-only;
+          }
+          @media (64rem >= width) {
+            --custom: max-only;
+          }
+          @media (64rem >= width) {
+            --custom: min-max;
+          }
+          @media (width >= 32rem), (64rem >= width >= 48rem) {
+            --custom: multi;
+          }
+        }
+        "
+      `)
+    })
   })
 })
 

packages/tailwindcss/src/css-functions.ts

@@ -1,5 +1,4 @@
 import { walk, type AstNode } from './ast'
-import { buildMediaQuery } from './compat/screens-config'
 import * as ValueParser from './value-parser'
 import { type ValueAstNode } from './value-parser'
 
@@ -8,14 +7,11 @@ export const SCREEN_FUNCTION_INVOCATION = 'screen('
 
 type ResolveThemeValue = (path: string) => string | undefined
 
-export function substituteFunctions(ast: AstNode[], resolveThemeValue: ResolveThemeValue) {
-  function resolveBreakpointQuery(name: string) {
-    let value = resolveThemeValue(`screens.${name}`) ?? resolveThemeValue(`--breakpoint-${name}`)
-    if (value) {
-      return buildMediaQuery(value)
-    }
-  }
-
+export function substituteFunctions(
+  ast: AstNode[],
+  resolveThemeValue: ResolveThemeValue,
+  resolveBreakpointQuery: ResolveThemeValue,
+) {
   walk(ast, (node) => {
     // Find all declaration values
     if (

packages/tailwindcss/src/design-system.ts

@@ -23,6 +23,7 @@ export type DesignSystem = {
 
   getVariantOrder(): Map<Variant, number>
   resolveThemeValue(path: string): string | undefined
+  resolveBreakpointQuery(name: string): string | undefined
 
   // Used by IntelliSense
   candidatesToCss(classes: string[]): (string | null)[]
@@ -123,6 +124,13 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
 
       return themeValue
     },
+
+    resolveBreakpointQuery(name: string) {
+      let themeValue = theme.resolveValue(name, ['--breakpoint'])
+      if (themeValue) {
+        return `(width >= ${themeValue})`
+      }
+    },
   }
 
   return designSystem

packages/tailwindcss/src/index.ts

@@ -292,7 +292,7 @@ async function parseCss(
   }
 
   if (css.includes(THEME_FUNCTION_INVOCATION) || css.includes(SCREEN_FUNCTION_INVOCATION)) {
-    substituteFunctions(ast, designSystem.resolveThemeValue)
+    substituteFunctions(ast, designSystem.resolveThemeValue, designSystem.resolveBreakpointQuery)
   }
 
   // Remove `@utility`, we couldn't replace it before yet because we had to