Refactor module resolution

Author: thecrypticace

packages/tailwindcss-language-server/src/css/resolve-css-imports.ts

@@ -1,21 +1,25 @@
 import * as fs from 'node:fs/promises'
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
-import { createResolver } from '../util/resolve'
 import { fixRelativePaths } from './fix-relative-paths'
+import { createResolver, Resolver } from '../resolver'
 
-const resolver = createResolver({
-  extensions: ['.css'],
-  mainFields: ['style'],
-  conditionNames: ['style'],
-})
+let _resolver: Awaited<ReturnType<typeof createResolver>>
 
-export function resolveCssImports() {
+export function resolveCssImports(resolver?: Resolver) {
   return postcss([
     postcssImport({
       async resolve(id, base) {
+        if (!resolver) {
+          _resolver ??= await createResolver({
+            root: process.cwd(),
+          })
+
+          resolver = _resolver
+        }
+
         try {
-          return await resolveCssFrom(base, id)
+          return await resolver.resolveCssId(id, base)
         } catch (e) {
           // TODO: Need to test this on windows
           return `/virtual:missing/${id}`
@@ -33,7 +37,3 @@ export function resolveCssImports() {
     fixRelativePaths(),
   ])
 }
-
-export async function resolveCssFrom(base: string, id: string) {
-  return resolver.resolveSync({}, base, id) || id
-}

packages/tailwindcss-language-server/src/project-locator.ts

@@ -7,11 +7,10 @@ import type { Settings } from '@tailwindcss/language-service/src/util/state'
 import { CONFIG_GLOB, CSS_GLOB } from './lib/constants'
 import { readCssFile } from './util/css'
 import { Graph } from './graph'
-import type { AtRule, Message } from 'postcss'
 import { type DocumentSelector, DocumentSelectorPriority } from './projects'
 import { CacheMap } from './cache-map'
 import { getPackageRoot } from './util/get-package-root'
-import { resolveFrom } from './util/resolveFrom'
+import { createResolver, Resolver } from './resolver'
 import { type Feature, supportedFeatures } from '@tailwindcss/language-service/src/features'
 import { extractSourceDirectives, resolveCssImports } from './css'
 import { normalizeDriveLetter, normalizePath, pathToFileURL } from './utils'
@@ -43,6 +42,8 @@ export interface ProjectConfig {
 }
 
 export class ProjectLocator {
+  private resolver: Resolver | null = null
+
   constructor(
     private base: string,
     private settings: Settings,
@@ -191,7 +192,11 @@ export class ProjectLocator {
     })
 
     // - Content patterns from config
-    for await (let selector of contentSelectorsFromConfig(config, tailwind.features)) {
+    for await (let selector of contentSelectorsFromConfig(
+      config,
+      tailwind.features,
+      await this.getResolver(),
+    )) {
       selectors.push(selector)
     }
 
@@ -418,7 +423,11 @@ export class ProjectLocator {
 
   private async detectTailwindVersion(config: ConfigEntry) {
     try {
-      let metadataPath = resolveFrom(path.dirname(config.path), 'tailwindcss/package.json')
+      let resolver = await this.getResolver()
+      let metadataPath = await resolver.resolveJsId(
+        'tailwindcss/package.json',
+        path.dirname(config.path),
+      )
       let { version } = require(metadataPath)
       let features = supportedFeatures(version)
 
@@ -440,19 +449,28 @@ export class ProjectLocator {
       isDefaultVersion: true,
     }
   }
+
+  private async getResolver() {
+    this.resolver ??= await createResolver({
+      root: process.cwd(),
+      pnp: true,
+    })
+
+    return this.resolver
+  }
 }
 
 function contentSelectorsFromConfig(
   entry: ConfigEntry,
   features: Feature[],
-  actualConfig?: any,
+  resolver: Resolver,
 ): AsyncIterable<DocumentSelector> {
   if (entry.type === 'css') {
-    return contentSelectorsFromCssConfig(entry)
+    return contentSelectorsFromCssConfig(entry, resolver)
   }
 
   if (entry.type === 'js') {
-    return contentSelectorsFromJsConfig(entry, features, actualConfig)
+    return contentSelectorsFromJsConfig(entry, features)
   }
 }
 
@@ -497,7 +515,10 @@ async function* contentSelectorsFromJsConfig(
   }
 }
 
-async function* contentSelectorsFromCssConfig(entry: ConfigEntry): AsyncIterable<DocumentSelector> {
+async function* contentSelectorsFromCssConfig(
+  entry: ConfigEntry,
+  resolver: Resolver,
+): AsyncIterable<DocumentSelector> {
   let auto = false
   for (let item of entry.content) {
     if (item.kind === 'file') {
@@ -513,7 +534,12 @@ async function* contentSelectorsFromCssConfig(entry: ConfigEntry): AsyncIterable
       // other entries should have sources.
       let sources = entry.entries.flatMap((entry) => entry.sources)
 
-      for await (let pattern of detectContentFiles(entry.packageRoot, entry.path, sources)) {
+      for await (let pattern of detectContentFiles(
+        entry.packageRoot,
+        entry.path,
+        sources,
+        resolver,
+      )) {
         yield {
           pattern,
           priority: DocumentSelectorPriority.CONTENT_FILE,
@@ -527,11 +553,15 @@ async function* detectContentFiles(
   base: string,
   inputFile: string,
   sources: string[],
+  resolver: Resolver,
 ): AsyncIterable<string> {
   try {
-    let oxidePath = resolveFrom(path.dirname(base), '@tailwindcss/oxide')
+    let oxidePath = await resolver.resolveJsId('@tailwindcss/oxide', path.dirname(base))
     oxidePath = pathToFileURL(oxidePath).href
-    let oxidePackageJsonPath = resolveFrom(path.dirname(base), '@tailwindcss/oxide/package.json')
+    let oxidePackageJsonPath = await resolver.resolveJsId(
+      '@tailwindcss/oxide/package.json',
+      path.dirname(base),
+    )
     let oxidePackageJson = JSON.parse(await fs.readFile(oxidePackageJsonPath, 'utf8'))
 
     let result = await oxide.scan({

packages/tailwindcss-language-server/src/projects.ts

@@ -35,6 +35,7 @@ import stackTrace from 'stack-trace'
 import extractClassNames from './lib/extractClassNames'
 import { klona } from 'klona/full'
 import { doHover } from '@tailwindcss/language-service/src/hoverProvider'
+import { createResolver, Resolver } from './resolver'
 import {
   doComplete,
   resolveCompletionItem,
@@ -259,6 +260,17 @@ export async function createProjectService(
     ])
   }
 
+  let resolver!: Resolver
+
+  async function getResolver() {
+    resolver ??= await createResolver({
+      root: projectConfig.folder,
+      pnp: true,
+    })
+
+    return resolver
+  }
+
   function log(...args: string[]): void {
     console.log(
       `[${path.relative(projectConfig.folder, projectConfig.configPath)}] ${args.join(' ')}`,
@@ -748,8 +760,10 @@ export async function createProjectService(
 
     if (state.isCssConfig) {
       try {
+        let resolver = await getResolver()
         let css = await readCssFile(state.configPath)
         let designSystem = await loadDesignSystem(
+          resolver,
           state.modules.tailwindcss.module,
           state.configPath,
           css,
@@ -1001,7 +1015,9 @@ export async function createProjectService(
 
       console.log('---- RELOADING DESIGN SYSTEM ----')
       let css = await readCssFile(state.configPath)
+      let resolver = await getResolver()
       let designSystem = await loadDesignSystem(
+        resolver,
         state.modules.tailwindcss.module,
         state.configPath,
         css,

packages/tailwindcss-language-server/src/resolver/index.ts

@@ -0,0 +1,128 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { CachedInputFileSystem, ResolverFactory, Resolver as BaseResolver } from 'enhanced-resolve'
+import { loadPnPApi } from './pnp'
+
+export interface ResolverOptions {
+  /**
+   * The root directory for the resolver
+   */
+  root: string
+
+  /**
+   * Whether or not the resolver should attempt to use PnP resolution
+   */
+  pnp?: boolean
+}
+
+export interface Resolver {
+  /**
+   * Sets up the PnP API if it is available such that globals like `require`
+   * have been monkey-patched to use PnP resolution.
+   *
+   * This function does nothing if PnP resolution is not enabled or if the PnP
+   * API is not available.
+   */
+  setupPnP(): Promise<void>
+
+  /**
+   * Resolves a JavaScript module to a file path.
+   *
+   * Assumes dynamic imports or some other ESM-captable mechanism will be used
+   * to load the module. Tries to resolve the ESM module first, then falls back
+   * to the CommonJS module if the ESM module is not found.
+   *
+   * @param id The module or file to resolve
+   * @param base The base directory to resolve the module from
+   */
+  resolveJsId(id: string, base: string): Promise<string>
+
+  /**
+   * Resolves a CSS module to a file path.
+   *
+   * @param id The module or file to resolve
+   * @param base The base directory to resolve the module from
+   */
+  resolveCssId(id: string, base: string): Promise<string>
+}
+
+export async function createResolver(opts: ResolverOptions) {
+  let fileSystem = new CachedInputFileSystem(fs, 4000)
+
+  // Load PnP API if requested
+  let pnpApi = opts.pnp ? await loadPnPApi(opts.root) : null
+
+  let esmResolver = ResolverFactory.createResolver({
+    fileSystem,
+    extensions: ['.mjs', '.js'],
+    mainFields: ['module'],
+    conditionNames: ['node', 'import'],
+    pnpApi,
+  })
+
+  let cjsResolver = ResolverFactory.createResolver({
+    fileSystem,
+    extensions: ['.cjs', '.js'],
+    mainFields: ['main'],
+    conditionNames: ['node', 'require'],
+    pnpApi,
+  })
+
+  let cssResolver = ResolverFactory.createResolver({
+    fileSystem,
+    extensions: ['.css'],
+    mainFields: ['style'],
+    conditionNames: ['style'],
+    pnpApi,
+  })
+
+  async function resolveId(
+    resolver: BaseResolver,
+    base: string,
+    id: string,
+  ): Promise<string | false> {
+    // Windows-specific path tweaks
+    if (path.sep === '\\') {
+      // Absolute path on Network Share
+      if (id.startsWith('\\\\')) return id
+
+      // Absolute path on Network Share (normalized)
+      if (id.startsWith('//')) return id
+
+      // Relative to Network Share (normalized)
+      if (base.startsWith('//')) base = `\\\\${base.slice(2)}`
+    }
+
+    return new Promise((resolve, reject) => {
+      resolver.resolve({}, base, id, {}, (err, res) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(res)
+        }
+      })
+    })
+  }
+
+  async function resolveJsId(id: string, base: string): Promise<string> {
+    try {
+      return (await resolveId(esmResolver, base, id)) || id
+    } catch {
+      return (await resolveId(cjsResolver, base, id)) || id
+    }
+  }
+
+  async function resolveCssId(id: string, base: string): Promise<string> {
+    return (await resolveId(cssResolver, base, id)) || id
+  }
+
+  async function setupPnP() {
+    pnpApi?.setup()
+  }
+
+  return {
+    setupPnP,
+    resolveJsId,
+    resolveCssId,
+  }
+}

packages/tailwindcss-language-server/src/resolver/pnp.ts

@@ -0,0 +1,49 @@
+import findUp from 'find-up'
+import * as path from 'node:path'
+
+export interface PnpApi {
+  setup(): void
+  resolveToUnqualified: (arg0: string, arg1: string, arg2: object) => null | string
+}
+
+const cache = new Map<string, PnpApi | null>()
+
+/**
+ * Loads the PnP API from the given directory if found.
+ * We intentionally do not call `setup` to monkey patch global APIs
+ * TODO: Verify that we can get by without doing this
+ */
+export async function loadPnPApi(root: string): Promise<PnpApi | null> {
+  let existing = cache.get(root)
+  if (existing !== undefined) {
+    return existing
+  }
+
+  let pnpPath = await findPnPApi(path.normalize(root))
+  if (!pnpPath) {
+    cache.set(root, null)
+    return null
+  }
+
+  let mod = await import(pnpPath)
+  let api = mod.default
+  cache.set(root, api)
+  return api
+}
+
+/**
+ * Locates the PnP API file for a given directory
+ */
+async function findPnPApi(root: string): Promise<string | null> {
+  let names = ['.pnp.js', '.pnp.cjs']
+
+  for (let name of names) {
+    let filepath = path.join(root, name)
+
+    if (await findUp.exists(filepath)) {
+      return filepath
+    }
+  }
+
+  return null
+}