Unify implementations of compile and __unstable__loadDesignSystem (#14150)

Right now there's some minor duplication and a ton of missing stuff in
`__unstable__loadDesignSystem` — this PR makes sure the functionality is
unified between it and `compile()`

Author: thecrypticace

packages/tailwindcss/src/index.ts

@@ -35,25 +35,9 @@ function parseThemeOptions(selector: string) {
   return { isReference, isInline }
 }
 
-export async function compile(
-  css: string,
-  { loadPlugin = throwOnPlugin }: CompileOptions = {},
-): Promise<{
-  globs: string[]
-  build(candidates: string[]): string
-}> {
+async function parseCss(css: string, { loadPlugin = throwOnPlugin }: CompileOptions = {}) {
   let ast = CSS.parse(css)
 
-  if (process.env.NODE_ENV !== 'test') {
-    ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `))
-  }
-
-  // Track all invalid candidates
-  let invalidCandidates = new Set<string>()
-  function onInvalidCandidate(candidate: string) {
-    invalidCandidates.add(candidate)
-  }
-
   // Find all `@theme` declarations
   let theme = new Theme()
   let pluginLoaders: Promise<Plugin>[] = []
@@ -301,21 +285,6 @@ export async function compile(
 
   await Promise.all(pluginLoaders.map((loader) => loader.then((plugin) => plugin(pluginApi))))
 
-  let tailwindUtilitiesNode: Rule | null = null
-
-  // Find `@tailwind utilities` so that we can later replace it with the actual
-  // generated utility class CSS.
-  walk(ast, (node) => {
-    if (node.kind === 'rule' && node.selector === '@tailwind utilities') {
-      tailwindUtilitiesNode = node
-
-      // Stop walking after finding `@tailwind utilities` to avoid walking all
-      // of the generated CSS. This means `@tailwind utilities` can only appear
-      // once per file but that's the intended usage at this point in time.
-      return WalkAction.Stop
-    }
-  })
-
   // Replace `@apply` rules with the actual utility classes.
   if (css.includes('@apply')) {
     substituteAtApply(ast, designSystem)
@@ -335,6 +304,47 @@ export async function compile(
     return WalkAction.Skip
   })
 
+  return {
+    designSystem,
+    ast,
+    globs,
+  }
+}
+
+export async function compile(
+  css: string,
+  opts: CompileOptions = {},
+): Promise<{
+  globs: string[]
+  build(candidates: string[]): string
+}> {
+  let { designSystem, ast, globs } = await parseCss(css, opts)
+
+  let tailwindUtilitiesNode: Rule | null = null
+
+  // Find `@tailwind utilities` so that we can later replace it with the actual
+  // generated utility class CSS.
+  walk(ast, (node) => {
+    if (node.kind === 'rule' && node.selector === '@tailwind utilities') {
+      tailwindUtilitiesNode = node
+
+      // Stop walking after finding `@tailwind utilities` to avoid walking all
+      // of the generated CSS. This means `@tailwind utilities` can only appear
+      // once per file but that's the intended usage at this point in time.
+      return WalkAction.Stop
+    }
+  })
+
+  if (process.env.NODE_ENV !== 'test') {
+    ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `))
+  }
+
+  // Track all invalid candidates
+  let invalidCandidates = new Set<string>()
+  function onInvalidCandidate(candidate: string) {
+    invalidCandidates.add(candidate)
+  }
+
   // Track all valid candidates, these are the incoming `rawCandidate` that
   // resulted in a generated AST Node. All the other `rawCandidates` are invalid
   // and should be ignored.
@@ -385,24 +395,7 @@ export async function compile(
   }
 }
 
-export function __unstable__loadDesignSystem(css: string) {
-  // Find all `@theme` declarations
-  let theme = new Theme()
-  let ast = CSS.parse(css)
-
-  walk(ast, (node) => {
-    if (node.kind !== 'rule') return
-    if (node.selector !== '@theme' && !node.selector.startsWith('@theme ')) return
-    let { isReference, isInline } = parseThemeOptions(node.selector)
-
-    // Record all custom properties in the `@theme` declaration
-    walk([node], (node) => {
-      if (node.kind !== 'declaration') return
-      if (!node.property.startsWith('--')) return
-
-      theme.add(node.property, node.value, { isReference, isInline })
-    })
-  })
-
-  return buildDesignSystem(theme)
+export async function __unstable__loadDesignSystem(css: string, opts: CompileOptions = {}) {
+  let result = await parseCss(css, opts)
+  return result.designSystem
 }

packages/tailwindcss/src/sort.test.ts

@@ -35,16 +35,16 @@ const table = [
   // ['dark a underline', 'a dark underline'],
 ] as const
 
-test.each(table)('sorts classes: "%s" -> "%s"', (input, expected) => {
-  expect(sortClasses(input, loadDesign())).toEqual(expected)
+test.each(table)('sorts classes: "%s" -> "%s"', async (input, expected) => {
+  expect(sortClasses(input, await loadDesign())).toEqual(expected)
 })
 
-test.skip('group, peer, and dark have their own order', () => {
+test.skip('group, peer, and dark have their own order', async () => {
   let input = shuffle(['group', 'peer', 'dark']).join(' ')
-  expect(sortClasses(input, loadDesign())).toEqual('dark group peer')
+  expect(sortClasses(input, await loadDesign())).toEqual('dark group peer')
 })
 
-test('can sort classes deterministically across multiple class lists', () => {
+test('can sort classes deterministically across multiple class lists', async () => {
   let classes = [
     [
       'a-class px-3 p-1 b-class py-3 bg-red-500 bg-blue-500',
@@ -57,32 +57,32 @@ test('can sort classes deterministically across multiple class lists', () => {
   ]
 
   // Shared design
-  let design = loadDesign()
+  let design = await loadDesign()
   for (const [input, output] of classes) {
     expect(sortClasses(input, design)).toEqual(output)
   }
 
   // Fresh design
   for (const [input, output] of classes) {
-    expect(sortClasses(input, loadDesign())).toEqual(output)
+    expect(sortClasses(input, await loadDesign())).toEqual(output)
   }
 })
 
-test('sorts arbitrary values across one or more class lists consistently', () => {
+test('sorts arbitrary values across one or more class lists consistently', async () => {
   let classes = [
     ['[--fg:#fff]', '[--fg:#fff]'],
     ['[--bg:#111] [--bg_hover:#000] [--fg:#fff]', '[--bg:#111] [--bg_hover:#000] [--fg:#fff]'],
   ]
 
   // Shared design
-  let design = loadDesign()
+  let design = await loadDesign()
   for (const [input, output] of classes) {
     expect(sortClasses(input, design)).toEqual(output)
   }
 
   // Fresh design
   for (const [input, output] of classes) {
-    expect(sortClasses(input, loadDesign())).toEqual(output)
+    expect(sortClasses(input, await loadDesign())).toEqual(output)
   }
 })