Add support for new loadModule and loadStylesheet APIs from v4 (#317

)

* Refactor

* Use `enhanced-resolve` to load files

* Add support for new loadModule and loadStylesheet APIs

package.json

@@ -43,6 +43,7 @@
  "ast-types": "^0.14.2",
  "clear-module": "^4.1.2",
  "cpy-cli": "^5.0.0",
+ "enhanced-resolve": "^5.17.1",
  "esbuild": "^0.19.8",
  "escalade": "^3.1.1",
  "import-sort-style-module": "^6.0.0",

src/config.ts

@@ -1,6 +1,5 @@
 // @ts-check
 import * as fs from 'fs/promises'
-import { createRequire } from 'module'
 import * as path from 'path'
 import { pathToFileURL } from 'url'
 import clearModule from 'clear-module'
@@ -18,11 +17,9 @@ import loadConfigFallback from 'tailwindcss/loadConfig'
 import resolveConfigFallback from 'tailwindcss/resolveConfig'
 import type { RequiredConfig } from 'tailwindcss/types/config.js'
 import { expiringMap } from './expiring-map.js'
-import { resolveFrom, resolveIn } from './resolve'
+import { resolveCssFrom, resolveJsFrom } from './resolve'
 import type { ContextContainer } from './types'
 
-let localRequire = createRequire(import.meta.url)
-
 let sourceToPathMap = new Map<string, string | null>()
 let sourceToEntryMap = new Map<string, string | null>()
 let pathToContextMap = expiringMap<string | null, ContextContainer>(10_000)
@@ -107,7 +104,7 @@ async function loadTailwindConfig(
  let tailwindConfig: RequiredConfig = { content: [] }
 
  try {
- let pkgFile = resolveIn('tailwindcss/package.json', [baseDir])
+ let pkgFile = resolveJsFrom(baseDir, 'tailwindcss/package.json')
  let pkgDir = path.dirname(pkgFile)
 
  try {
@@ -151,29 +148,40 @@ async function loadTailwindConfig(
  * Create a loader function that can load plugins and config files relative to
  * the CSS file that uses them. However, we don't want missing files to prevent
  * everything from working so we'll let the error handler decide how to proceed.
- *
- * @param {object} param0
- * @returns
  */
 function createLoader<T>({
+ legacy,
  filepath,
  onError,
 }: {
+ legacy: boolean
  filepath: string
- onError: (id: string, error: unknown) => T
+ onError: (id: string, error: unknown, resourceType: string) => T
 }) {
- let baseDir = path.dirname(filepath)
  let cacheKey = `${+Date.now()}`
 
- return async function loadFile(id: string) {
+ async function loadFile(id: string, base: string, resourceType: string) {
  try {
- let resolved = resolveFrom(baseDir, id)
+ let resolved = resolveJsFrom(base, id)
+
  let url = pathToFileURL(resolved)
  url.searchParams.append('t', cacheKey)
 
  return await import(url.href).then((m) => m.default ?? m)
  } catch (err) {
- return onError(id, err)
+ return onError(id, err, resourceType)
+ }
+ }
+
+ if (legacy) {
+ let baseDir = path.dirname(filepath)
+ return (id: string) => loadFile(id, baseDir, 'module')
+ }
+
+ return async (id: string, base: string, resourceType: string) => {
+ return {
+ base,
+ module: await loadFile(id, base, resourceType),
  }
  }
 }
@@ -184,7 +192,8 @@ async function loadV4(
  entryPoint: string | null,
 ) {
  // Import Tailwind — if this is v4 it'll have APIs we can use directly
- let pkgPath = resolveIn('tailwindcss', [baseDir])
+ let pkgPath = resolveJsFrom(baseDir, 'tailwindcss')
+
  let tw = await import(pathToFileURL(pkgPath).toString())
 
  // This is not Tailwind v4
@@ -195,15 +204,63 @@ async function loadV4(
  // If the user doesn't define an entrypoint then we use the default theme
  entryPoint = entryPoint ?? `${pkgDir}/theme.css`
 
+ let importBasePath = path.dirname(entryPoint)
+
  // Resolve imports in the entrypoint to a flat CSS tree
  let css = await fs.readFile(entryPoint, 'utf-8')
- let resolveImports = postcss([postcssImport()])
- let result = await resolveImports.process(css, { from: entryPoint })
+
+ // Determine if the v4 API supports resolving `@import`
+ let supportsImports = false
+ try {
+ await tw.__unstable__loadDesignSystem('@import "./empty";', {
+ loadStylesheet: () => {
+ supportsImports = true
+ return {
+ base: importBasePath,
+ content: '',
+ }
+ },
+ })
+ } catch {}
+
+ if (!supportsImports) {
+ let resolveImports = postcss([postcssImport()])
+ let result = await resolveImports.process(css, { from: entryPoint })
+ css = result.css
+ }
 
  // Load the design system and set up a compatible context object that is
  // usable by the rest of the plugin
- let design = await tw.__unstable__loadDesignSystem(result.css, {
+ let design = await tw.__unstable__loadDesignSystem(css, {
+ base: importBasePath,
+
+ // v4.0.0-alpha.25+
+ loadModule: createLoader({
+ legacy: false,
+ filepath: entryPoint,
+ onError: (id, err, resourceType) => {
+ console.error(`Unable to load ${resourceType}: ${id}`, err)
+
+ if (resourceType === 'config') {
+ return {}
+ } else if (resourceType === 'plugin') {
+ return () => {}
+ }
+ },
+ }),
+
+ loadStylesheet: async (id: string, base: string) => {
+ let resolved = resolveCssFrom(base, id)
+
+ return {
+ base: path.dirname(resolved),
+ content: await fs.readFile(resolved, 'utf-8'),
+ }
+ },
+
+ // v4.0.0-alpha.24 and below
  loadPlugin: createLoader({
+ legacy: true,
  filepath: entryPoint,
  onError(id, err) {
  console.error(`Unable to load plugin: ${id}`, err)
@@ -213,6 +270,7 @@ async function loadV4(
  }),
 
  loadConfig: createLoader({
+ legacy: true,
  filepath: entryPoint,
  onError(id, err) {
  console.error(`Unable to load config: ${id}`, err)

src/resolve.ts

@@ -1,8 +1,33 @@
-import { createRequire as req } from 'node:module'
-import resolveFrom from 'resolve-from'
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve'
 import { expiringMap } from './expiring-map'
 
-const localRequire = req(import.meta.url)
+const fileSystem = new CachedInputFileSystem(fs, 30_000)
+
+const esmResolver = ResolverFactory.createResolver({
+ fileSystem,
+ useSyncFileSystemCalls: true,
+ extensions: ['.mjs', '.js'],
+ mainFields: ['module'],
+ conditionNames: ['node', 'import'],
+})
+
+const cjsResolver = ResolverFactory.createResolver({
+ fileSystem,
+ useSyncFileSystemCalls: true,
+ extensions: ['.js', '.cjs'],
+ mainFields: ['main'],
+ conditionNames: ['node', 'require'],
+})
+
+const cssResolver = ResolverFactory.createResolver({
+ fileSystem,
+ useSyncFileSystemCalls: true,
+ extensions: ['.css'],
+ mainFields: ['style'],
+ conditionNames: ['style'],
+})
 
 // This is a long-lived cache for resolved modules whether they exist or not
 // Because we're compatible with a large number of plugins, we need to check
@@ -11,17 +36,11 @@ const localRequire = req(import.meta.url)
 // failed module resolutions making repeated checks very expensive.
 const resolveCache = expiringMap<string, string | null>(30_000)
 
-export function resolveIn(id: string, paths: string[]) {
- return localRequire.resolve(id, {
- paths,
- })
-}
-
 export function maybeResolve(name: string) {
  let modpath = resolveCache.get(name)
 
  if (modpath === undefined) {
- modpath = freshMaybeResolve(name)
+ modpath = resolveJsFrom(fileURLToPath(import.meta.url), name)
  resolveCache.set(name, modpath)
  }
 
@@ -39,12 +58,14 @@ export async function loadIfExists<T>(name: string): Promise<T | null> {
  return null
 }
 
-function freshMaybeResolve(name: string) {
+export function resolveJsFrom(base: string, id: string): string {
  try {
- return localRequire.resolve(name)
+ return esmResolver.resolveSync({}, base, id) || id
  } catch (err) {
- return null
+ return cjsResolver.resolveSync({}, base, id) || id
  }
 }
 
-export { resolveFrom }
+export function resolveCssFrom(base: string, id: string) {
+ return cssResolver.resolveSync({}, base, id) || id
+}