kristentr · kristentr · Sep 3, 2024
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -41,3 +41,67 @@ test('Config values can be merged into the theme', ({ expect }) => {
     { '--line-height': '1.5' },
   ])
 })
+
+test.only('default weird shit', ({ expect }) => {
+  let theme = new Theme()
+  let design = buildDesignSystem(theme)
+
+  applyConfigToTheme(design, [
+    {
+      config: {
+        theme: {
+          fontFamily: {
+            sans: 'Potato Sans',
+          },
+        },
+      },
+    },
+  ])
+
+  expect(theme.resolve('font-family', ['--default'])).toEqual('Potato Sans')
+})
+
+test.only('default weird shit 2', ({ expect }) => {
+  let theme = new Theme()
+  let design = buildDesignSystem(theme)
+
+  applyConfigToTheme(design, [
+    {
+      config: {
+        theme: {
+          fontFamily: {
+            sans: ['Potato Sans', 'Banana Sans', 'sans-serif'],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(theme.resolve('font-family', ['--default'])).toEqual(
+    'Potato Sans, Banana Sans, sans-serif',
+  )
+})
+
+test.only('default weird shit 3', ({ expect }) => {
+  let theme = new Theme()
+  let design = buildDesignSystem(theme)
+
+  applyConfigToTheme(design, [
+    {
+      config: {
+        theme: {
+          fontFamily: {
+            sans: [
+              'Potato Sans',
+              { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
+            ],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(theme.resolve('font-family', ['--default'])).toEqual('Potato Sans')
+  expect(theme.resolve('font-feature-settings', ['--default'])).toEqual('"cv06"')
+  expect(theme.resolve('font-variation-settings', ['--default'])).toEqual('"XHGT" 0.7')
+})
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -14,6 +14,122 @@ export function applyConfigToTheme(designSystem: DesignSystem, configs: ConfigFi
     })
   }
 
+  // if theme has fontFamily.sans, set --default-font-family to that inline value
+
+  if (Object.hasOwn(theme, 'fontFamily')) {
+    if (Object.hasOwn(theme.fontFamily, 'sans')) {
+      // TODO: Add an empty `@theme` to the AST
+
+      designSystem.theme.add('--default-font-family', 'theme(fontFamily.sans)', {
+        isInline: true,
+        isReference: false,
+      })
+
+      designSystem.theme.add(
+        '--default-font-feature-settings',
+        'theme(fontFamily.sans[1].fontFeatureSettings)',
+        {
+          isInline: true,
+          isReference: false,
+        },
+      )
+
+      designSystem.theme.add(
+        '--default-font-variation-settings',
+        'theme(fontFamily.sans[1].fontVariationSettings)',
+        {
+          isInline: true,
+          isReference: false,
+        },
+      )
+
+      // if (Array.isArray(defaultFontFamily)) {
+      //   if (typeof defaultFontFamily[1] === 'object') {
+      //     defaultFontFeatureSettings = defaultFontFamily[1]?.fontFeatureSettings
+      //     defaultFontVariationSettings = defaultFontFamily[1]?.fontVariationSettings
+      //     defaultFontFamily = defaultFontFamily[0]
+      //   } else {
+      //     defaultFontFamily = defaultFontFamily.join(', ')
+      //   }
+      // }
+
+      // designSystem.theme.add(`--default-font-family`, defaultFontFamily as string, {
+      //   isInline: true,
+      //   isReference: false,
+      // })
+
+      // if (defaultFontFeatureSettings) {
+      //   designSystem.theme.add(
+      //     `--default-font-feature-settings`,
+      //     defaultFontFeatureSettings as string,
+      //     {
+      //       isInline: true,
+      //       isReference: false,
+      //     },
+      //   )
+      // }
+
+      // if (defaultFontVariationSettings) {
+      //   designSystem.theme.add(
+      //     `--default-font-variation-settings`,
+      //     defaultFontVariationSettings as string,
+      //     {
+      //       isInline: true,
+      //       isReference: false,
+      //     },
+      //   )
+      // }
+    }
+
+    // if (Object.hasOwn(theme.fontFamily, 'mono')) {
+    //   // let defaultMonoFontFamily = theme.fontFamily.sans
+    //   // let defaultMonoFontFeatureSettings = null
+    //   // let defaultMonoFontVariationSettings = null
+
+    //   // designSystem.theme.add('--default-font-family', 'theme(fontFamily.sans)', {
+    //   //   isInline: true,
+    //   //   isReference: false,
+    //   // })
+
+    //   if (Array.isArray(defaultMonoFontFamily)) {
+    //     if (typeof defaultMonoFontFamily[1] === 'object') {
+    //       defaultMonoFontFeatureSettings = defaultMonoFontFamily[1]?.fontFeatureSettings
+    //       defaultMonoFontVariationSettings = defaultMonoFontFamily[1]?.fontVariationSettings
+    //       defaultMonoFontFamily = defaultMonoFontFamily[0]
+    //     } else {
+    //       defaultMonoFontFamily = defaultMonoFontFamily.join(', ')
+    //     }
+    //   }
+
+    //   designSystem.theme.add(`--default-font-family`, defaultMonoFontFamily as string, {
+    //     isInline: true,
+    //     isReference: false,
+    //   })
+
+    //   if (defaultMonoFontFeatureSettings) {
+    //     designSystem.theme.add(
+    //       `--default-font-feature-settings`,
+    //       defaultMonoFontFeatureSettings as string,
+    //       {
+    //         isInline: true,
+    //         isReference: false,
+    //       },
+    //     )
+    //   }
+
+    //   if (defaultMonoFontVariationSettings) {
+    //     designSystem.theme.add(
+    //       `--default-font-variation-settings`,
+    //       defaultMonoFontVariationSettings as string,
+    //       {
+    //         isInline: true,
+    //         isReference: false,
+    //       },
+    //     )
+    //   }
+    // }
+  }
+
   return theme
 }
 

diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
@@ -229,3 +229,44 @@ test('Variants in CSS overwrite variants from plugins', async ({ expect }) => {
     "
   `)
 })
+
+test.only('i dont even know yet', async ({ expect }) => {
+  let input = css`
+    @config "./config.js";
+    @theme {
+      --color-banana: yellow;
+    }
+    @tailwind utilities;
+  `
+
+  let compiler = await compile(input, {
+    loadConfig: async () => ({
+      theme: {
+        fontFamily: {
+          sans: [
+            'Potato Sans',
+            { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
+          ],
+        },
+      },
+    }),
+  })
+
+  expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
+    ":root {
+      --color-banana: yellow;
+      --font-family-sans: Potato Sans;
+      --font-family-sans--font-feature-settings: "cv06";
+      --font-family-sans--font-variation-settings: "XHGT" 0.7;
+      --default-font-family: Potato Sans;
+      --default-font-feature-settings: "cv06";
+      --default-font-variation-settings: "XHGT" 0.7;
+    }
+    .font-sans {
+      font-family: Potato Sans;
+      font-feature-settings: "cv06";
+      font-variation-settings: "XHGT" 0.7;
+    }
+    "
+  `)
+})
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
@@ -302,9 +302,38 @@ async function parseCss(
     return WalkAction.Skip
   })
 
+  let designSystem = buildDesignSystem(theme)
+
+  let configs = await Promise.all(
+    configPaths.map(async (configPath) => ({
+      path: configPath,
+      config: await loadConfig(configPath),
+    })),
+  )
+
+  let plugins = await Promise.all(
+    pluginPaths.map(async ([pluginPath, pluginOptions]) => ({
+      path: pluginPath,
+      plugin: await loadPlugin(pluginPath),
+      options: pluginOptions,
+    })),
+  )
+
+  let { pluginApi, resolvedConfig } = registerPlugins(plugins, designSystem, ast, configs)
+
+  for (let customVariant of customVariants) {
+    customVariant(designSystem)
+  }
+
+  for (let customUtility of customUtilities) {
+    customUtility(designSystem)
+  }
+
   // Output final set of theme variables at the position of the first `@theme`
   // rule.
-  if (firstThemeRule) {
+  if (
+    firstThemeRule /* TODO: The JS config should add a theme rule to the AST actually, if needed */
+  ) {
     firstThemeRule = firstThemeRule as Rule
     firstThemeRule.selector = ':root'
 
@@ -340,40 +369,13 @@ async function parseCss(
     firstThemeRule.nodes = nodes
   }
 
-  let designSystem = buildDesignSystem(theme)
-
-  let configs = await Promise.all(
-    configPaths.map(async (configPath) => ({
-      path: configPath,
-      config: await loadConfig(configPath),
-    })),
-  )
-
-  let plugins = await Promise.all(
-    pluginPaths.map(async ([pluginPath, pluginOptions]) => ({
-      path: pluginPath,
-      plugin: await loadPlugin(pluginPath),
-      options: pluginOptions,
-    })),
-  )
-
-  let { pluginApi, resolvedConfig } = registerPlugins(plugins, designSystem, ast, configs)
-
-  for (let customVariant of customVariants) {
-    customVariant(designSystem)
-  }
-
-  for (let customUtility of customUtilities) {
-    customUtility(designSystem)
-  }
-
   // Replace `@apply` rules with the actual utility classes.
   if (css.includes('@apply')) {
     substituteAtApply(ast, designSystem)
   }
 
   // Replace `theme()` function calls with the actual theme variables.
-  if (css.includes(THEME_FUNCTION_INVOCATION)) {
+  if (css.includes(THEME_FUNCTION_INVOCATION) /* TODO: or has any plugins or has a JS config */) {
     substituteFunctions(ast, pluginApi)
   }
 

diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts
@@ -270,7 +270,7 @@ export type ThemeKey =
   | '--translate'
   | '--width'
   | '--z-index'
-  | `--default-${string}`
+  | `--default`
 
 export type ColorThemeKey =
   | '--color'