Improve insiders version detection (#1123)

This is to allow IntelliSense to detect v4 insiders builds while continuing to work with v3 insiders builds.

Author: thecrypticace

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

@@ -425,12 +425,25 @@ export class ProjectLocator {
 
   private async detectTailwindVersion(config: ConfigEntry) {
     try {
-      let metadataPath = await this.resolver.resolveJsId(
+      let metadataPath = await this.resolver.resolveCjsId(
         'tailwindcss/package.json',
         path.dirname(config.path),
       )
+
       let { version } = require(metadataPath)
-      let features = supportedFeatures(version)
+
+      let mod: unknown = undefined
+
+      if (this.resolver.hasPnP()) {
+        let modPath = await this.resolver.resolveCjsId('tailwindcss', path.dirname(config.path))
+        mod = require(modPath)
+      } else {
+        let modPath = await this.resolver.resolveJsId('tailwindcss', path.dirname(config.path))
+        let modURL = pathToFileURL(modPath).href
+        mod = await import(modURL)
+      }
+
+      let features = supportedFeatures(version, mod)
 
       if (typeof version === 'string') {
         return {
@@ -442,7 +455,8 @@ export class ProjectLocator {
     } catch {}
 
     let { version } = require('tailwindcss/package.json')
-    let features = supportedFeatures(version)
+    let mod = require('tailwindcss')
+    let features = supportedFeatures(version, mod)
 
     return {
       version,

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

@@ -446,9 +446,6 @@ export async function createProjectService(
       let tailwindDir = path.dirname(tailwindcssPkgPath)
       tailwindcssVersion = require(tailwindcssPkgPath).version
 
-      let features = supportedFeatures(tailwindcssVersion)
-      log(`supported features: ${JSON.stringify(features)}`)
-
       // Loading via `await import(…)` with the Yarn PnP API is not possible
       if (await resolver.hasPnP()) {
         let tailwindcssPath = await resolver.resolveCjsId('tailwindcss', configDir)
@@ -461,6 +458,11 @@ export async function createProjectService(
         tailwindcss = await import(tailwindcssURL)
       }
 
+      // TODO: The module should be loaded in the project locator
+      // and this should be determined there and passed in instead
+      let features = supportedFeatures(tailwindcssVersion, tailwindcss)
+      log(`supported features: ${JSON.stringify(features)}`)
+
       if (!features.includes('css-at-theme')) {
         tailwindcss = tailwindcss.default ?? tailwindcss
       }

packages/tailwindcss-language-service/src/features.ts

@@ -19,10 +19,28 @@ export type Feature =
 /**
  * Determine a list of features that are supported by the given Tailwind CSS version
  */
-export function supportedFeatures(version: string): Feature[] {
+export function supportedFeatures(version: string, mod?: unknown): Feature[] {
   let features: Feature[] = []
 
-  let isInsidersV3 = version.startsWith('0.0.0-insiders')
+  let isInsiders = version.startsWith('0.0.0-insiders')
+  let isInsidersV3 = false
+  let isInsidersV4 = false
+
+  if (isInsiders) {
+    if (mod && typeof mod === 'object' && 'compile' in mod) {
+      // ESM version for normal installations
+      isInsidersV4 = true
+    } else if (mod && typeof mod === 'function' && 'compile' in mod) {
+      // Common JS version for Yarn PnP support
+      isInsidersV4 = true
+    } else {
+      isInsidersV3 = true
+    }
+  }
+
+  if (isInsidersV4) {
+    return ['css-at-theme', 'layer:base', 'content-list']
+  }
 
   if (!isInsidersV3 && semver.gte(version, '4.0.0-alpha.1')) {
     return ['css-at-theme', 'layer:base', 'content-list']

packages/tailwindcss-language-service/src/util/docsUrl.ts

@@ -9,6 +9,14 @@ export function docsUrl(version: string, paths: string | string[]): string {
   }
   if (semver.gte(version, '1.99.0')) {
     major = 2
+    url = 'https://v2.tailwindcss.com/docs/'
+  }
+  if (semver.gte(version, '2.99.0')) {
+    major = 3
+    url = 'https://v3.tailwindcss.com/docs/'
+  }
+  if (semver.gte(version, '3.99.0')) {
+    major = 4
     url = 'https://tailwindcss.com/docs/'
   }
   const path = Array.isArray(paths) ? paths[major] || paths[paths.length - 1] : paths

packages/vscode-tailwindcss/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Don't suggest `--font-size-*` theme keys in v4.0 ([#1150](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1150))
 - Fix detection of Tailwind CSS version when using Yarn PnP ([#1151](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1151))
+- Add support for v4.x insiders builds ([#1123](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1123))
 
 ## 0.14.1
 

packages/vscode-tailwindcss/src/extension.ts

@@ -157,6 +157,7 @@ async function activeTextEditorSupportsClassSorting(): Promise<boolean> {
   if (!project) {
     return false
   }
+  // TODO: Use feature detection instead of version checking
   return semver.gte(project.version, '3.0.0')
 }
 
@@ -573,7 +574,7 @@ export async function activate(context: ExtensionContext) {
       return
     }
 
-    if (!await anyFolderNeedsLanguageServer(Workspace.workspaceFolders ?? [])) {
+    if (!(await anyFolderNeedsLanguageServer(Workspace.workspaceFolders ?? []))) {
       return
     }