WIP

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

@@ -225,12 +225,6 @@ function upgradeToFullPluginSupport({
     userConfig,
   )
 
-  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
-
-  for (let { handler } of resolvedConfig.plugins) {
-    handler(pluginApi)
-  }
-
   // Merge the user-configured theme keys into the design system. The compat
   // config would otherwise expand into namespaces like `background-color` which
   // core utilities already read from.
@@ -240,6 +234,11 @@ function upgradeToFullPluginSupport({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
 
+  let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
+  for (let { handler } of resolvedConfig.plugins) {
+    handler(pluginApi)
+  }
+
   // If a prefix has already been set in CSS don't override it
   if (!designSystem.theme.prefix && resolvedConfig.prefix) {
     if (resolvedConfig.prefix.endsWith('-')) {

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -82,9 +82,9 @@ test('config values can be merged into the theme', () => {
     'Potato Mono',
     { '--font-variation-settings': '"XHGT" 0.7' },
   ])
-  expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
-  expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
-  expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([
+  expect(theme.resolve('sm', ['--text'])).toEqual('0.875rem')
+  expect(theme.resolve('base', ['--text'])).toEqual('1rem')
+  expect(theme.resolveWith('base', ['--text'], ['--line-height'])).toEqual([
     '1rem',
     { '--line-height': '1.5' },
   ])

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -128,6 +128,8 @@ export function themeableValues(config: ResolvedConfig['theme']): [string[], unk
 const IS_VALID_KEY = /^[a-zA-Z0-9-_%/\.]+$/
 
 export function keyPathToCssProperty(path: string[]) {
+  path = structuredClone(path)
+
   if (path[0] === 'colors') path[0] = 'color'
   if (path[0] === 'screens') path[0] = 'breakpoint'
   if (path[0] === 'borderRadius') path[0] = 'radius'

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

@@ -250,7 +250,7 @@ test('Variants in CSS overwrite variants from plugins', async () => {
 })
 
 describe('theme callbacks', () => {
-  test.only('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
+  test('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
     expect,
   }) => {
     let input = css`
@@ -290,7 +290,6 @@ describe('theme callbacks', () => {
 
               // Tuple access
               typography: ({ theme }) => {
-                console.log(theme('fontSize'))
                 return {
                   '[class~=lead-base]': {
                     fontSize: theme('fontSize.base')[0],
@@ -452,6 +451,8 @@ describe('theme overrides order', () => {
         } else {
           return {
             module: plugin(({ matchUtilities, theme }) => {
+              console.log('input', theme('colors'))
+              console.log('flattened', flattenColorPalette(theme('colors')))
               matchUtilities(
                 {
                   'hover-bg': (value) => {

packages/tailwindcss/src/compat/flatten-color-palette.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from 'vitest'
+import { flattenColorPalette } from './flatten-color-palette'
+
+test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
+  expect(
+    flattenColorPalette({
+      'slate-100': '#000100',
+      'slate-200': '#000200',
+      'slate-300': '#000300',
+      'slate-400': '#100400',
+      'slate-500': '#100500',
+      __CSS_VALUES__: {
+        'slate-100': 4,
+        'slate-200': 4,
+        'slate-300': 4,
+        'slate-400': 0,
+        'slate-500': 0,
+      } as any,
+      slate: { '200': '#200200', '400': '#200400', '600': '#200600' },
+      'slate-600': '#200600',
+    }),
+  ).toMatchInlineSnapshot(`
+    {
+      "slate-100": "#000100",
+      "slate-200": "#200200",
+      "slate-300": "#000300",
+      "slate-400": "#100400",
+      "slate-500": "#100500",
+      "slate-600": "#200600",
+    }
+  `)
+})

packages/tailwindcss/src/compat/flatten-color-palette.ts

@@ -1,3 +1,5 @@
+import { ThemeOptions } from '../theme'
+
 type Colors = {
   [key: string | number]: string | Colors
 }
@@ -6,6 +8,7 @@ export function flattenColorPalette(colors: Colors) {
   let result: Record<string, string> = {}
 
   for (let [root, children] of Object.entries(colors ?? {})) {
+    if (root === '__CSS_VALUES__') continue
     if (typeof children === 'object' && children !== null) {
       for (let [parent, value] of Object.entries(flattenColorPalette(children))) {
         result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value
@@ -15,5 +18,13 @@ export function flattenColorPalette(colors: Colors) {
     }
   }
 
+  if ('__CSS_VALUES__' in colors) {
+    for (let [key, value] of Object.entries(colors.__CSS_VALUES__) as any as [string, number][]) {
+      if ((value & ThemeOptions.DEFAULT) === 0) {
+        result[key] = colors[key] as string
+      }
+    }
+  }
+
   return result
 }

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

@@ -884,8 +884,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme {
-        --transition-timing-function-in: ease-in;
-        --transition-timing-function-out: ease-out;
+        --ease-in: ease-in;
+        --ease-out: ease-out;
       }
     `
 

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

@@ -4,6 +4,7 @@ import { withAlpha } from '../utilities'
 import { DefaultMap } from '../utils/default-map'
 import { unescape } from '../utils/escape'
 import { toKeyPath } from '../utils/to-key-path'
+import { keyPathToCssProperty } from './apply-config-to-theme'
 import { deepMerge } from './config/deep-merge'
 import type { UserConfig } from './config/types'
 
@@ -72,7 +73,7 @@ export function createThemeFn(
           // CSS values from `@theme` win over values from the config
           configValueCopy[unescape(key)] = cssValue[key]
         }
-
+        // console.log(configValueCopy)
         return configValueCopy
       }
 
@@ -127,21 +128,7 @@ function readFromCss(
     // A nested tuple with additional data
     | [main: string, extra: Record<string, string>]
 
-  let themeKey = path
-    // [1] should move into the nested object tuple. To create the CSS variable
-    // name for this, we replace it with an empty string that will result in two
-    // subsequent dashes when joined.
-    .map((path) => (path === '1' ? '' : path))
-
-    // Resolve the key path to a CSS variable segment
-    .map((part) =>
-      part.replaceAll('.', '_').replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`),
-    )
-
-    // Remove the `DEFAULT` key at the end of a path
-    // We're reading from CSS anyway so it'll be a string
-    .filter((part, index) => part !== 'DEFAULT' || index !== path.length - 1)
-    .join('-')
+  let themeKey = keyPathToCssProperty(path)
 
   let map = new Map<string | null, ThemeValue>()
   let nested = new DefaultMap<string | null, Map<string, [value: string, options: number]>>(

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

@@ -352,8 +352,8 @@ describe('theme function', () => {
           expect(
             await compileCss(css`
               @theme {
-                --font-size-xs: 1337.75rem;
-                --font-size-xs--line-height: 1337rem;
+                --text-xs: 1337.75rem;
+                --text-xs--line-height: 1337rem;
               }
               .text {
                 font-size: theme(fontSize.xs);
@@ -362,8 +362,8 @@ describe('theme function', () => {
             `),
           ).toMatchInlineSnapshot(`
             ":root {
-              --font-size-xs: 1337.75rem;
-              --font-size-xs--line-height: 1337rem;
+              --text-xs: 1337.75rem;
+              --text-xs--line-height: 1337rem;
             }
 
             .text {