Split important into two properties in the design system

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

@@ -230,11 +230,12 @@ export async function applyCompatibilityHooks({
   }
 
   // If an important strategy has already been set in CSS don't override it
-  if (!designSystem.important && resolvedConfig.important) {
-    designSystem.important =
-      typeof resolvedConfig.important === 'string'
-        ? `${resolvedConfig.important} &`
-        : resolvedConfig.important
+  if (!designSystem.important && resolvedConfig.important === true) {
+    designSystem.important = true
+  }
+
+  if (!designSystem.wrappingSelector && typeof resolvedConfig.important === 'string') {
+    designSystem.wrappingSelector = `${resolvedConfig.important} &`
   }
 
   // Replace `resolveThemeValue` with a version that is backwards compatible

packages/tailwindcss/src/compile.ts

@@ -135,7 +135,7 @@ export function compileAstNodes(candidate: Candidate, designSystem: DesignSystem
   for (let nodes of asts) {
     let propertySort = getPropertySort(nodes)
 
-    if (candidate.important || designSystem.important === true) {
+    if (candidate.important || designSystem.important) {
       applyImportant(nodes)
     }
 
@@ -154,8 +154,8 @@ export function compileAstNodes(candidate: Candidate, designSystem: DesignSystem
       if (result === null) return []
     }
 
-    if (typeof designSystem.important === 'string') {
-      node.nodes = [rule(designSystem.important, node.nodes)]
+    if (designSystem.wrappingSelector) {
+      node.nodes = [rule(designSystem.wrappingSelector, node.nodes)]
     }
 
     rules.push({

packages/tailwindcss/src/design-system.ts

@@ -13,7 +13,11 @@ export type DesignSystem = {
   utilities: Utilities
   variants: Variants
 
-  important: string | boolean
+  // Whether to mark utility declarations as !important
+  important: boolean
+
+  // Whether to wrap utility declarations in a selector
+  wrappingSelector: string | null
 
   getClassOrder(classes: string[]): [string, bigint | null][]
   getClassList(): ClassEntry[]
@@ -47,11 +51,8 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
     utilities,
     variants,
 
-    // How to mark important utilities
-    // - wrap with a selector (any string)
-    // - add an !important (true)
-    // - do nothing (false)
     important: false,
+    wrappingSelector: null,
 
     candidatesToCss(classes: string[]) {
       let result: (string | null)[] = []

packages/tailwindcss/src/index.ts

@@ -76,7 +76,8 @@ async function parseCss(
   await substituteAtImports(ast, base, loadStylesheet)
 
   // Find all `@theme` declarations
-  let important: string | true | null = null
+  let important: boolean | null = null
+  let wrappingSelector: string | null = null
   let theme = new Theme()
   let customVariants: ((designSystem: DesignSystem) => void)[] = []
   let customUtilities: ((designSystem: DesignSystem) => void)[] = []
@@ -240,7 +241,7 @@ async function parseCss(
     if (node.selector.startsWith('@media selector(')) {
       let themeParams = node.selector.slice(16, -1)
 
-      important = `${themeParams} &`
+      wrappingSelector = `${themeParams} &`
 
       replaceWith(node.nodes)
 
@@ -315,6 +316,10 @@ async function parseCss(
     designSystem.important = important
   }
 
+  if (wrappingSelector) {
+    designSystem.wrappingSelector = wrappingSelector
+  }
+
   // Apply hooks from backwards compatibility layer. This function takes a lot
   // of random arguments because it really just needs access to "the world" to
   // do whatever ungodly things it needs to do to make things backwards