Overwrite core utilities to ensure we have a consistent order

Author: philipp-spiess

packages/tailwindcss/src/compat/config.test.ts

@@ -979,7 +979,7 @@ describe('default font family compatibility', () => {
   })
 })
 
-test('creates variants for `data`, `supports`, and `aria` theme options', async () => {
+test('creates variants for `data`, `supports`, and `aria` theme options at the same level as the core utility ', async () => {
   let input = css`
     @tailwind utilities;
     @config "./config.js";
@@ -1008,23 +1008,51 @@ test('creates variants for `data`, `supports`, and `aria` theme options', async
       'aria-polite:underline',
       'supports-child-combinator:underline',
       'data-checked:underline',
+
+      // Ensure core utility still works
+      'aria-hidden:flex',
+      'supports-grid:flex',
+      'data-foo:flex',
+
+      // print variants should be at the end, like it is in the core utility
+      'print:flex',
     ]),
   ).toMatchInlineSnapshot(`
     ".aria-polite\\:underline {
       &[aria-live="polite"] {
         text-decoration-line: underline;
       }
     }
-    .supports-child-combinator\\:underline {
-      @supports (h2 > p) {
-        text-decoration-line: underline;
+    .aria-hidden\\:flex {
+      &[aria-hidden="true"] {
+        display: flex;
       }
     }
     .data-checked\\:underline {
       &[data-ui~="checked"] {
         text-decoration-line: underline;
       }
     }
+    .data-foo\\:flex {
+      &[data-foo] {
+        display: flex;
+      }
+    }
+    .supports-child-combinator\\:underline {
+      @supports (h2 > p) {
+        text-decoration-line: underline;
+      }
+    }
+    .supports-grid\\:flex {
+      @supports (grid: var(--tw)) {
+        display: flex;
+      }
+    }
+    .print\\:flex {
+      @media print {
+        display: flex;
+      }
+    }
     "
   `)
 })

packages/tailwindcss/src/compat/theme-variants.ts

@@ -1,33 +1,79 @@
-import type { PluginAPI } from '../plugin-api'
+import { rule } from '../ast'
+import type { DesignSystem } from '../design-system'
+import type { ResolvedConfig } from './config/types'
 import DefaultTheme from './default-theme'
 
-export function themeVariantsPlugin({ addVariant, config }: PluginAPI) {
-  let ariaVariants = config('theme.aria', {})
-  let supportsVariants = config('theme.supports', {})
-  let dataVariants = config('theme.data', {})
+export function registerThemeVariantOverrides(config: ResolvedConfig, designSystem: DesignSystem) {
+  let ariaVariants = config.theme.aria || {}
+  let supportsVariants = config.theme.supports || {}
+  let dataVariants = config.theme.data || {}
 
   for (let [name, rule] of Object.entries(DefaultTheme.aria)) {
     // `theme.aria` contains values from the default theme. We don't
     // want to create variants for these values as these are already
     // handled by the core utility.
-    if (Object.hasOwn(DefaultTheme.aria, name) && ariaVariants[name] === rule) {
-      continue
+    if (ariaVariants[name] === rule) {
+      delete ariaVariants[name]
     }
+  }
 
+  for (let [name, rule] of Object.entries(DefaultTheme.aria)) {
     if (ariaVariants[name] === rule) {
       delete ariaVariants[name]
     }
   }
 
-  for (let [name, rule] of Object.entries(ariaVariants)) {
-    addVariant(`aria-${name}`, `&[aria-${rule}]`)
+  if (Object.keys(ariaVariants).length > 0) {
+    let coreAria = designSystem.variants.get('aria')
+    let coreApplyFn = coreAria?.applyFn
+    let coreCompounds = coreAria?.compounds
+    designSystem.variants.functional(
+      'aria',
+      (ruleNode, variant) => {
+        let value = variant.value
+        if (value && value.kind === 'named' && value.value in ariaVariants) {
+          ruleNode.nodes = [rule(`&[aria-${ariaVariants[value.value]}]`, ruleNode.nodes)]
+          return
+        }
+        return coreApplyFn?.(ruleNode, variant)
+      },
+      { compounds: coreCompounds },
+    )
   }
 
-  for (let [name, rule] of Object.entries(supportsVariants)) {
-    addVariant(`supports-${name}`, `@supports (${rule})`)
+  if (Object.keys(supportsVariants).length > 0) {
+    let coreSupports = designSystem.variants.get('supports')
+    let coreApplyFn = coreSupports?.applyFn
+    let coreCompounds = coreSupports?.compounds
+    designSystem.variants.functional(
+      'supports',
+      (ruleNode, variant) => {
+        let value = variant.value
+        if (value && value.kind === 'named' && value.value in supportsVariants) {
+          ruleNode.nodes = [rule(`@supports (${supportsVariants[value.value]})`, ruleNode.nodes)]
+          return
+        }
+        return coreApplyFn?.(ruleNode, variant)
+      },
+      { compounds: coreCompounds },
+    )
   }
 
-  for (let [name, rule] of Object.entries(dataVariants)) {
-    addVariant(`data-${name}`, `&[data-${rule}]`)
+  if (Object.keys(dataVariants).length > 0) {
+    let coreData = designSystem.variants.get('data')
+    let coreApplyFn = coreData?.applyFn
+    let coreCompounds = coreData?.compounds
+    designSystem.variants.functional(
+      'data',
+      (ruleNode, variant) => {
+        let value = variant.value
+        if (value && value.kind === 'named' && value.value in dataVariants) {
+          ruleNode.nodes = [rule(`&[data-${dataVariants[value.value]}]`, ruleNode.nodes)]
+          return
+        }
+        return coreApplyFn?.(ruleNode, variant)
+      },
+      { compounds: coreCompounds },
+    )
   }
 }

packages/tailwindcss/src/plugin-api.ts

@@ -7,7 +7,7 @@ import { resolveConfig } from './compat/config/resolve-config'
 import type { ResolvedConfig, UserConfig } from './compat/config/types'
 import { darkModePlugin } from './compat/dark-mode'
 import { createThemeFn } from './compat/plugin-functions'
-import { themeVariantsPlugin } from './compat/theme-variants'
+import { registerThemeVariantOverrides } from './compat/theme-variants'
 import { substituteFunctions } from './css-functions'
 import * as CSS from './css-parser'
 import type { DesignSystem } from './design-system'
@@ -522,7 +522,7 @@ export async function applyCompatibilityHooks({
   let resolvedConfig = resolveConfig(designSystem, [
     { config: createCompatConfig(designSystem.theme) },
     ...userConfig,
-    { config: { plugins: [darkModePlugin, themeVariantsPlugin] } },
+    { config: { plugins: [darkModePlugin] } },
   ])
 
   let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
@@ -536,6 +536,8 @@ export async function applyCompatibilityHooks({
   // core utilities already read from.
   applyConfigToTheme(designSystem, userConfig)
 
+  registerThemeVariantOverrides(resolvedConfig, designSystem)
+
   // 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