Add compat layer for theme.content config

Author: thecrypticace

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

@@ -10,6 +10,7 @@ import { createCompatConfig } from './config/create-compat-config'
 import { resolveConfig } from './config/resolve-config'
 import type { UserConfig } from './config/types'
 import { registerContainerCompat } from './container'
+import { registerContentCompat } from './content-compat'
 import { darkModePlugin } from './dark-mode'
 import { registerLegacyUtilities } from './legacy-utilities'
 import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
@@ -358,6 +359,7 @@ function upgradeToFullPluginSupport({
   registerThemeVariantOverrides(resolvedUserConfig, designSystem)
   registerScreensConfig(resolvedUserConfig, designSystem)
   registerContainerCompat(resolvedUserConfig, designSystem)
+  registerContentCompat(resolvedUserConfig, designSystem)
 
   // If a prefix has already been set in CSS don't override it
   if (!designSystem.theme.prefix && resolvedConfig.prefix) {

packages/tailwindcss/src/compat/content-compat.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from 'vitest'
+import { compile } from '..'
+
+const css = String.raw
+
+test('creates custom utilities to represent content keys', async () => {
+  let input = css`
+    @config "./config.js";
+    @tailwind utilities;
+  `
+
+  let compiler = await compile(input, {
+    loadModule: async () => ({
+      base: '/root',
+      path: '',
+      module: {
+        theme: {
+          content: {
+            slash: '"/"',
+          },
+        },
+      },
+    }),
+  })
+
+  expect(compiler.build(['content-slash'])).toMatchInlineSnapshot(`
+    ".content-slash {
+      --tw-content: "/";
+      content: var(--tw-content);
+    }
+    "
+  `)
+})

packages/tailwindcss/src/compat/content-compat.ts

@@ -0,0 +1,18 @@
+import { decl } from '../ast'
+import type { DesignSystem } from '../design-system'
+import type { ResolvedConfig } from './config/types'
+
+export function registerContentCompat(userConfig: ResolvedConfig, designSystem: DesignSystem) {
+  let content = userConfig.theme.content || {}
+
+  if (typeof content !== 'object' || content === null) return
+
+  for (let [key, value] of Object.entries(content)) {
+    if (typeof value !== 'string') continue
+
+    designSystem.utilities.static(`content-${key}`, () => [
+      decl('--tw-content', value),
+      decl('content', 'var(--tw-content)'),
+    ])
+  }
+}