Ridiculously large config loading refactor

Author: thecrypticace

src/config.ts

@@ -1,5 +1,6 @@
 interface ExpiringMap<K, V> {
   get(key: K): V | undefined
+  remember(key: K, factory: () => V): V
   set(key: K, value: V): void
 }
 
@@ -19,6 +20,20 @@ export function expiringMap<K, V>(duration: number): ExpiringMap<K, V> {
       return undefined
     },
 
+    remember(key: K, factory: () => V) {
+      let result = map.get(key)
+
+      if (result && result.expiration > new Date()) {
+        return result.value
+      }
+
+      map.delete(key)
+
+      let value = factory()
+      this.set(key, value)
+      return value
+    },
+
     set(key: K, value: V) {
       let expiration = new Date()
       expiration.setMilliseconds(expiration.getMilliseconds() + duration)

src/expiring-map.ts

@@ -42,7 +42,7 @@ function createParser(
     },
 
     async parse(text: string, options: ParserOptions) {
-      let { context, generateRules } = await getTailwindConfig(options)
+      let context = await getTailwindConfig(options)
 
       let original = base.originalParser(parserFormat, options)
 
@@ -58,7 +58,7 @@ function createParser(
       let changes: any[] = []
 
       transform(ast, {
-        env: { context, customizations, generateRules, parsers: {}, options },
+        env: { context, customizations, parsers: {}, options },
         changes,
       })
 

src/index.ts

@@ -1,57 +1,8 @@
-import type { LegacyTailwindContext, TransformerEnv } from './types'
-import './index'
-
-export function bigSign(bigIntValue: bigint) {
-  return Number(bigIntValue > 0n) - Number(bigIntValue < 0n)
-}
-
-function prefixCandidate(
-  context: LegacyTailwindContext,
-  selector: string,
-): string {
-  let prefix = context.tailwindConfig.prefix
-  return typeof prefix === 'function' ? prefix(selector) : prefix + selector
-}
-
-// Polyfill for older Tailwind CSS versions
-function getClassOrderPolyfill(
-  classes: string[],
-  { env }: { env: TransformerEnv },
-): [string, bigint | null][] {
-  // A list of utilities that are used by certain Tailwind CSS utilities but
-  // that don't exist on their own. This will result in them "not existing" and
-  // sorting could be weird since you still require them in order to make the
-  // host utitlies work properly. (Thanks Biology)
-  let parasiteUtilities = new Set([
-    prefixCandidate(env.context, 'group'),
-    prefixCandidate(env.context, 'peer'),
-  ])
-
-  let classNamesWithOrder: [string, bigint | null][] = []
-
-  for (let className of classes) {
-    let order: bigint | null =
-      env
-        .generateRules(new Set([className]), env.context)
-        .sort(([a], [z]) => bigSign(z - a))[0]?.[0] ?? null
-
-    if (order === null && parasiteUtilities.has(className)) {
-      // This will make sure that it is at the very beginning of the
-      // `components` layer which technically means 'before any
-      // components'.
-      order = env.context.layerOrder.components
-    }
-
-    classNamesWithOrder.push([className, order])
-  }
-
-  return classNamesWithOrder
-}
+import type { TransformerEnv } from './types'
+import { bigSign } from './utils'
 
 function reorderClasses(classList: string[], { env }: { env: TransformerEnv }) {
-  let orderedClasses = env.context.getClassOrder
-    ? env.context.getClassOrder(classList)
-    : getClassOrderPolyfill(classList, { env })
+  let orderedClasses = env.context.getClassOrder(classList)
 
   return orderedClasses.sort(([nameA, a], [nameZ, z]) => {
     // Move `...` to the end of the list

src/sorting.ts

@@ -18,34 +18,17 @@ export interface TransformerContext {
   changes: StringChange[]
 }
 
-export interface LegacyTailwindContext {
-  tailwindConfig: {
-    prefix: string | ((selector: string) => string)
-  }
-
-  getClassOrder?: (classList: string[]) => [string, bigint | null][]
-
-  layerOrder: {
-    components: bigint
-  }
+export interface UnifiedApi {
+  getClassOrder(classList: string[]): [string, bigint | null][]
 }
 
 export interface TransformerEnv {
-  context: LegacyTailwindContext
+  context: UnifiedApi
   customizations: Customizations
-  generateRules: (
-    classes: Iterable<string>,
-    context: LegacyTailwindContext,
-  ) => [bigint][]
   parsers: any
   options: ParserOptions
 }
 
-export interface ContextContainer {
-  context: any
-  generateRules: () => any
-}
-
 export interface StringChange {
   start: number
   end: number

src/types.ts

@@ -134,3 +134,7 @@ export function spliceChangesIntoString(str: string, changes: StringChange[]) {
 
   return result
 }
+
+export function bigSign(bigIntValue: bigint) {
+  return Number(bigIntValue > 0n) - Number(bigIntValue < 0n)
+}

src/utils.ts

@@ -0,0 +1,103 @@
+// @ts-check
+import * as path from 'path'
+import clearModule from 'clear-module'
+// @ts-ignore
+import { generateRules as generateRulesFallback } from 'tailwindcss/lib/lib/generateRules'
+// @ts-ignore
+import { createContext as createContextFallback } from 'tailwindcss/lib/lib/setupContextUtils'
+import loadConfigFallback from 'tailwindcss/loadConfig'
+import resolveConfigFallback from 'tailwindcss/resolveConfig'
+import type { RequiredConfig } from 'tailwindcss/types/config.js'
+import type { UnifiedApi } from '../types'
+import { bigSign } from '../utils'
+
+interface LegacyTailwindContext {
+  tailwindConfig: {
+    prefix: string | ((selector: string) => string)
+  }
+
+  getClassOrder?: (classList: string[]) => [string, bigint | null][]
+
+  layerOrder: {
+    components: bigint
+  }
+}
+
+interface GenerateRules {
+  (classes: Iterable<string>, context: LegacyTailwindContext): [bigint][]
+}
+
+function prefixCandidate(context: LegacyTailwindContext, selector: string): string {
+  let prefix = context.tailwindConfig.prefix
+  return typeof prefix === 'function' ? prefix(selector) : prefix + selector
+}
+
+export async function loadV3(pkgDir: string | null, jsConfig: string | null): Promise<UnifiedApi> {
+  let createContext = createContextFallback
+  let generateRules: GenerateRules = generateRulesFallback
+  let resolveConfig = resolveConfigFallback
+  let loadConfig = loadConfigFallback
+  let tailwindConfig: RequiredConfig = { content: [] }
+
+  try {
+    if (pkgDir) {
+      resolveConfig = require(path.join(pkgDir, 'resolveConfig'))
+      createContext = require(path.join(pkgDir, 'lib/lib/setupContextUtils')).createContext
+      generateRules = require(path.join(pkgDir, 'lib/lib/generateRules')).generateRules
+      // Prior to `[email protected]` this won't exist so we load it last
+      loadConfig = require(path.join(pkgDir, 'loadConfig'))
+    }
+  } catch {}
+
+  try {
+    if (jsConfig) {
+      clearModule(jsConfig)
+      let loadedConfig = loadConfig(jsConfig)
+      tailwindConfig = loadedConfig.default ?? loadedConfig
+    }
+  } catch (err) {
+    console.error(`Unable to load your Tailwind CSS v3 config: ${jsConfig}`)
+    throw err
+  }
+
+  // suppress "empty content" warning
+  tailwindConfig.content = ['no-op']
+
+  // Create the context
+  let context: LegacyTailwindContext = createContext(resolveConfig(tailwindConfig))
+
+  // Polyfill for older Tailwind CSS versions
+  function getClassOrderPolyfill(classes: string[]): [string, bigint | null][] {
+    // A list of utilities that are used by certain Tailwind CSS utilities but
+    // that don't exist on their own. This will result in them "not existing" and
+    // sorting could be weird since you still require them in order to make the
+    // host utitlies work properly. (Thanks Biology)
+    let parasiteUtilities = new Set([prefixCandidate(context, 'group'), prefixCandidate(context, 'peer')])
+
+    let classNamesWithOrder: [string, bigint | null][] = []
+
+    for (let className of classes) {
+      let order: bigint | null =
+        generateRules(new Set([className]), context).sort(([a], [z]) => bigSign(z - a))[0]?.[0] ?? null
+
+      if (order === null && parasiteUtilities.has(className)) {
+        // This will make sure that it is at the very beginning of the
+        // `components` layer which technically means 'before any
+        // components'.
+        order = context.layerOrder.components
+      }
+
+      classNamesWithOrder.push([className, order])
+    }
+
+    return classNamesWithOrder
+  }
+
+  context.getClassOrder ??= getClassOrderPolyfill
+
+  return {
+    getClassOrder: (classList: string[]) => {
+      return context.getClassOrder ? context.getClassOrder(classList) : getClassOrderPolyfill(classList)
+    },
+  }
+}