WIP

packages/@tailwindcss-node/src/compile.ts

@@ -7,10 +7,13 @@ import { pathToFileURL } from 'node:url'
 import {
   __unstable__loadDesignSystem as ___unstable__loadDesignSystem,
   compile as _compile,
+  Features,
 } from 'tailwindcss'
 import { getModuleDependencies } from './get-module-dependencies'
 import { rewriteUrls } from './urls'
 
+export { Features }
+
 export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
 
 export async function compile(

packages/@tailwindcss-node/src/index.ts

@@ -1,7 +1,7 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
-export { __unstable__loadDesignSystem, compile } from './compile'
+export { __unstable__loadDesignSystem, compile, Features } from './compile'
 export * from './normalize-path'
 export { env }
 

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

@@ -1,8 +1,8 @@
 import QuickLRU from '@alloc/quick-lru'
-import { compile, env } from '@tailwindcss/node'
+import { compile, env, Features } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features, transform } from 'lightningcss'
+import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs'
 import path from 'node:path'
 import postcss, {
@@ -98,7 +98,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
           // guarantee a `build()` function is available.
           context.compiler ??= await createCompiler()
 
-          if (context.compiler.tailwindCssType === 'none') {
+          if (context.compiler.features === Features.None) {
             return
           }
 
@@ -171,10 +171,11 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
           }
 
           env.DEBUG && console.time('[@tailwindcss/postcss] Scan for candidates')
-          let candidates = context.compiler.tailwindCssType === 'full' ? context.scanner.scan() : []
+          let candidates =
+            context.compiler.features & Features.Utilities ? context.scanner.scan() : []
           env.DEBUG && console.timeEnd('[@tailwindcss/postcss] Scan for candidates')
 
-          if (context.compiler.tailwindCssType === 'full') {
+          if (context.compiler.features & Features.Utilities) {
             // Add all found files as direct dependencies
             for (let file of context.scanner.files) {
               result.messages.push({
@@ -404,8 +405,8 @@ function optimizeCss(
       nonStandard: {
         deepSelectorCombinator: true,
       },
-      include: Features.Nesting,
-      exclude: Features.LogicalProperties,
+      include: LightningCssFeatures.Nesting,
+      exclude: LightningCssFeatures.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),

packages/@tailwindcss-vite/src/index.ts

@@ -1,7 +1,7 @@
-import { compile, env, normalizePath } from '@tailwindcss/node'
+import { compile, env, Features, normalizePath } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features, transform } from 'lightningcss'
+import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { sveltePreprocess } from 'svelte-preprocess'
@@ -360,8 +360,8 @@ function optimizeCss(
       nonStandard: {
         deepSelectorCombinator: true,
       },
-      include: Features.Nesting,
-      exclude: Features.LogicalProperties,
+      include: LightningCssFeatures.Nesting,
+      exclude: LightningCssFeatures.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),
@@ -497,11 +497,16 @@ class Root {
       this.scanner = new Scanner({ sources })
     }
 
-    if (this.compiler.tailwindCssType === 'none') {
+    if (
+      !(
+        this.compiler.features &
+        (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
+      )
+    ) {
       return false
     }
 
-    if (!this.overwriteCandidates || this.compiler.tailwindCssType === 'full') {
+    if (!this.overwriteCandidates || this.compiler.features & Features.Utilities) {
       // This should not be here, but right now the Vite plugin is setup where we
       // setup a new scanner and compiler every time we request the CSS file
       // (regardless whether it actually changed or not).
@@ -512,7 +517,7 @@ class Root {
       env.DEBUG && console.timeEnd('[@tailwindcss/vite] Scan for candidates')
     }
 
-    if (this.compiler.tailwindCssType === 'full') {
+    if (this.compiler.features & Features.Utilities) {
       // Watch individual files found via custom `@source` paths
       for (let file of this.scanner.files) {
         addWatchFile(file)

packages/tailwindcss/src/apply.ts

@@ -1,11 +1,14 @@
+import { Features, type FeaturesRef } from '.'
 import { walk, WalkAction, type AstNode } from './ast'
 import { compileCandidates } from './compile'
 import type { DesignSystem } from './design-system'
 import { escape } from './utils/escape'
 
-export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
-  let usesAtApply = false
-
+export function substituteAtApply(
+  ast: AstNode[],
+  designSystem: DesignSystem,
+  featuresRef: FeaturesRef,
+) {
   walk(ast, (node, { replaceWith }) => {
     if (node.kind !== 'at-rule') return
 
@@ -20,7 +23,7 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
     }
 
     if (node.name !== '@apply') return
-    usesAtApply = true
+    featuresRef.current |= Features.AtApply
 
     let candidates = node.params.split(/\s+/g)
 
@@ -78,6 +81,4 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
       replaceWith(newNodes)
     }
   })
-
-  return usesAtApply
 }

packages/tailwindcss/src/at-import.ts

@@ -1,3 +1,4 @@
+import { Features, type FeaturesRef } from '.'
 import { atRule, context, walk, WalkAction, type AstNode } from './ast'
 import * as CSS from './css-parser'
 import * as ValueParser from './value-parser'
@@ -8,18 +9,18 @@ export async function substituteAtImports(
   ast: AstNode[],
   base: string,
   loadStylesheet: LoadStylesheet,
+  featuresRef: FeaturesRef,
   recurseCount = 0,
 ) {
-  let usesAtImport = false
   let promises: Promise<void>[] = []
 
   walk(ast, (node, { replaceWith }) => {
     if (node.kind === 'at-rule' && node.name === '@import') {
-      usesAtImport = true
-
       let parsed = parseImportParams(ValueParser.parse(node.params))
       if (parsed === null) return
 
+      featuresRef.current |= Features.AtImport
+
       let { uri, layer, media, supports } = parsed
 
       // Skip importing data or remote URIs
@@ -42,7 +43,7 @@ export async function substituteAtImports(
 
           let loaded = await loadStylesheet(uri, base)
           let ast = CSS.parse(loaded.content)
-          await substituteAtImports(ast, loaded.base, loadStylesheet, recurseCount + 1)
+          await substituteAtImports(ast, loaded.base, loadStylesheet, featuresRef, recurseCount + 1)
 
           contextNode.nodes = buildImportNodes(
             [context({ base: loaded.base }, ast)],
@@ -64,8 +65,6 @@ export async function substituteAtImports(
   if (promises.length > 0) {
     await Promise.all(promises)
   }
-
-  return usesAtImport
 }
 
 // Modified and inlined version of `parse-statements` from

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

@@ -1,3 +1,4 @@
+import { Features, type FeaturesRef } from '..'
 import { styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
 import type { DesignSystem } from '../design-system'
 import { segment } from '../utils/segment'
@@ -21,6 +22,7 @@ export async function applyCompatibilityHooks({
   ast,
   loadModule,
   globs,
+  featuresRef,
 }: {
   designSystem: DesignSystem
   base: string
@@ -31,8 +33,8 @@ export async function applyCompatibilityHooks({
     resourceHint: 'plugin' | 'config',
   ) => Promise<{ module: any; base: string }>
   globs: { origin?: string; pattern: string }[]
+  featuresRef: FeaturesRef
 }) {
-  let usesStatic = false
   let pluginPaths: [{ id: string; base: string }, CssPluginOptions | null][] = []
   let configPaths: { id: string; base: string }[] = []
 
@@ -99,7 +101,7 @@ export async function applyCompatibilityHooks({
       ])
 
       replaceWith([])
-      usesStatic = true
+      featuresRef.current |= Features.JsPluginCompat
       return
     }
 
@@ -115,7 +117,7 @@ export async function applyCompatibilityHooks({
 
       configPaths.push({ id: node.params.slice(1, -1), base: context.base })
       replaceWith([])
-      usesStatic = true
+      featuresRef.current |= Features.JsPluginCompat
       return
     }
   })
@@ -142,6 +144,7 @@ export async function applyCompatibilityHooks({
       globs,
       configs: [],
       pluginDetails: [],
+      featuresRef,
     })
     return designSystem.resolveThemeValue(path)
   }
@@ -181,9 +184,8 @@ export async function applyCompatibilityHooks({
     globs,
     configs,
     pluginDetails,
+    featuresRef,
   })
-
-  return usesStatic
 }
 
 function upgradeToFullPluginSupport({
@@ -193,6 +195,7 @@ function upgradeToFullPluginSupport({
   globs,
   configs,
   pluginDetails,
+  featuresRef,
 }: {
   designSystem: DesignSystem
   base: string
@@ -209,6 +212,7 @@ function upgradeToFullPluginSupport({
     plugin: Plugin
     options: CssPluginOptions | null
   }[]
+  featuresRef: FeaturesRef
 }) {
   let pluginConfigs = pluginDetails.map((detail) => {
     if (!detail.options) {
@@ -234,7 +238,7 @@ function upgradeToFullPluginSupport({
     userConfig,
   )
 
-  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
+  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig, featuresRef)
 
   for (let { handler } of resolvedConfig.plugins) {
     handler(pluginApi)

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

@@ -1,3 +1,4 @@
+import type { FeaturesRef } from '..'
 import { substituteAtApply } from '../apply'
 import { atRule, decl, rule, walk, type AstNode } from '../ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from '../candidate'
@@ -83,11 +84,12 @@ export function buildPluginApi(
   designSystem: DesignSystem,
   ast: AstNode[],
   resolvedConfig: ResolvedConfig,
+  featuresRef: FeaturesRef,
 ): PluginAPI {
   let api: PluginAPI = {
     addBase(css) {
       let baseNodes = objectToAst(css)
-      substituteFunctions(baseNodes, api.theme)
+      substituteFunctions(baseNodes, api.theme, featuresRef)
       ast.push(atRule('@layer', 'base', baseNodes))
     },
 
@@ -260,7 +262,7 @@ export function buildPluginApi(
 
         designSystem.utilities.static(className, () => {
           let clonedAst = structuredClone(ast)
-          substituteAtApply(clonedAst, designSystem)
+          substituteAtApply(clonedAst, designSystem, featuresRef)
           return clonedAst
         })
       }
@@ -382,7 +384,7 @@ export function buildPluginApi(
             }
 
             let ast = objectToAst(fn(value, { modifier }))
-            substituteAtApply(ast, designSystem)
+            substituteAtApply(ast, designSystem, featuresRef)
             return ast
           }
         }

packages/tailwindcss/src/compile.ts

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

packages/tailwindcss/src/css-functions.ts

@@ -1,3 +1,4 @@
+import { Features, type FeaturesRef } from '.'
 import { walk, type AstNode } from './ast'
 import * as ValueParser from './value-parser'
 import { type ValueAstNode } from './value-parser'
@@ -6,12 +7,15 @@ export const THEME_FUNCTION_INVOCATION = 'theme('
 
 type ResolveThemeValue = (path: string) => string | undefined
 
-export function substituteFunctions(ast: AstNode[], resolveThemeValue: ResolveThemeValue) {
-  let usesFunctions = false
+export function substituteFunctions(
+  ast: AstNode[],
+  resolveThemeValue: ResolveThemeValue,
+  featuresRef: FeaturesRef,
+) {
   walk(ast, (node) => {
     // Find all declaration values
     if (node.kind === 'declaration' && node.value?.includes(THEME_FUNCTION_INVOCATION)) {
-      usesFunctions = true
+      featuresRef.current |= Features.ThemeFunction
       node.value = substituteFunctionsInValue(node.value, resolveThemeValue)
       return
     }
@@ -25,12 +29,11 @@ export function substituteFunctions(ast: AstNode[], resolveThemeValue: ResolveTh
           node.name === '@supports') &&
         node.params.includes(THEME_FUNCTION_INVOCATION)
       ) {
-        usesFunctions = true
+        featuresRef.current |= Features.ThemeFunction
         node.params = substituteFunctionsInValue(node.params, resolveThemeValue)
       }
     }
   })
-  return usesFunctions
 }
 
 export function substituteFunctionsInValue(