Load Tailwind CSS through require() when using Yarn PnP

It does not intercept calls to `await import()`. Manually registering the ESM hook also results in failed fs.stat calls.

Author: thecrypticace

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

@@ -442,16 +442,24 @@ export async function createProjectService(
     let applyComplexClasses: any
 
     try {
-      let tailwindcssPath = await resolver.resolveJsId('tailwindcss', configDir)
-      let tailwindcssPkgPath = await resolver.resolveJsId('tailwindcss/package.json', configDir)
+      let tailwindcssPkgPath = await resolver.resolveCjsId('tailwindcss/package.json', configDir)
       let tailwindDir = path.dirname(tailwindcssPkgPath)
       tailwindcssVersion = require(tailwindcssPkgPath).version
 
       let features = supportedFeatures(tailwindcssVersion)
       log(`supported features: ${JSON.stringify(features)}`)
 
-      tailwindcssPath = pathToFileURL(tailwindcssPath).href
-      tailwindcss = await import(tailwindcssPath)
+      // Loading via `await import(…)` with the Yarn PnP API is not possible
+      if (await resolver.hasPnP()) {
+        let tailwindcssPath = await resolver.resolveCjsId('tailwindcss', configDir)
+
+        tailwindcss = require(tailwindcssPath)
+      } else {
+        let tailwindcssPath = await resolver.resolveJsId('tailwindcss', configDir)
+        let tailwindcssURL = pathToFileURL(tailwindcssPath).href
+
+        tailwindcss = await import(tailwindcssURL)
+      }
 
       if (!features.includes('css-at-theme')) {
         tailwindcss = tailwindcss.default ?? tailwindcss

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

@@ -55,6 +55,16 @@ export interface Resolver {
    */
   resolveJsId(id: string, base: string): Promise<string>
 
+  /**
+   * Resolves a CJS module to a file path.
+   *
+   * Assumes ESM-captable mechanisms are not available.
+   *
+   * @param id The module or file to resolve
+   * @param base The base directory to resolve the module from
+   */
+  resolveCjsId(id: string, base: string): Promise<string>
+
   /**
    * Resolves a CSS module to a file path.
    *
@@ -204,6 +214,10 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
     }
   }
 
+  async function resolveCjsId(id: string, base: string): Promise<string> {
+    return (await resolveId(cjsResolver, id, base)) || id
+  }
+
   async function resolveCssId(id: string, base: string): Promise<string> {
     return (await resolveId(cssResolver, id, base)) || id
   }
@@ -230,6 +244,7 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
 
   return {
     resolveJsId,
+    resolveCjsId,
     resolveCssId,
     substituteId,
     refresh,

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

@@ -36,7 +36,6 @@ import normalizePath from 'normalize-path'
 import * as path from 'node:path'
 import type * as chokidar from 'chokidar'
 import picomatch from 'picomatch'
-import { resolveFrom } from './util/resolveFrom'
 import * as parcel from './watcher/index.js'
 import { equal } from '@tailwindcss/language-service/src/util/array'
 import { CONFIG_GLOB, CSS_GLOB, PACKAGE_LOCK_GLOB, TSCONFIG_GLOB } from './lib/constants'
@@ -321,9 +320,9 @@ export class TW {
             let twVersion = require('tailwindcss/package.json').version
             try {
               let v = require(
-                resolveFrom(
-                  path.dirname(project.projectConfig.configPath),
+                await resolver.resolveCjsId(
                   'tailwindcss/package.json',
+                  path.dirname(project.projectConfig.configPath),
                 ),
               ).version
               if (typeof v === 'string') {