Compute correct document selectors when a project is initialized (#1335)

thecrypticace · web-flow · commit ab0bef53160c · 2025-05-14T13:08:21.000-04:00
Fixes #1302 Possibly helps #1322 Possibly helps #1323 This PR fixes a problem where files may fail to match against the appropriate project in a given workspace — and in some cases this behavior could be "fixed" by opening multiple files until all projects in a workspace had their selectors recomputed. (A selector is a file pattern/path paired with a "priority" that tells us how files match different projects in a workspace) The problem here is caused by a few things: - We fixed a bug where auto source detection in v4 silently failed in IntelliSense. After fixing this a file could get matched against one of the globs or file paths detected by Oxide. - A workspace with lots of CSS files may end up creating more than one "project" - Upon project initialization we would recompute these selectors **based on the resolved JS config** (necessary for v3 projects because we compile ESM or TS configs during intiialization and not discovery). Obviously, v4 projects do not have JS configs (even if you're using `@config` or `@plugin` it's not actually the config file we care about. It's the design system created from the CSS file that matters.) so we were then throwing away these document selectors. In a workspace with multiple detected projects (could be because of multiple CSS "roots", some v3 and some v4 files, etc…) we would check the file against the selectors of each project, pick out the most specific match, then initialize the project. The problem is that, when we re-computed these selectors during initialization they changed. This has the side effect of dropping the patterns that we picked up from Oxide for a v4 project. This would then cause any subsequent requests for a file to match a *different* project. So for example, a request to compute the document colors would cause a project to be matched then initialized. Then a hover in the same file would end up matching a completely different project. This PR addresses this by doing two things: 1. Using the same codepath for computing a projects document selectors during discovery and initalization 2. Normalize Windows drive letters in source paths picked up by Oxide. This would have the effect of some content paths not matching a project when it otherwise should on Windows. In the future it'd probably be a good idea to make documents "sticky" while they are open such that an open document picks a project and "sticks" to it. We'd still want to recompute this stickiness if the config a file is attached to changed but this is a future task as there might be side effects from doing this.
diff --git a/packages/tailwindcss-language-server/src/project-locator.ts b/packages/tailwindcss-language-server/src/project-locator.ts
@@ -206,62 +206,7 @@ export class ProjectLocator {
     // Look for the package root for the config
     config.packageRoot = await getPackageRoot(path.dirname(config.path), this.base)
 
-    let selectors: DocumentSelector[] = []
-
-    // selectors:
-    // - CSS files
-    for (let entry of config.entries) {
-      if (entry.type !== 'css') continue
-      selectors.push({
-        pattern: entry.path,
-        priority: DocumentSelectorPriority.CSS_FILE,
-      })
-    }
-
-    // - Config File
-    selectors.push({
-      pattern: config.path,
-      priority: DocumentSelectorPriority.CONFIG_FILE,
-    })
-
-    // - Content patterns from config
-    for await (let selector of contentSelectorsFromConfig(
-      config,
-      tailwind.features,
-      this.resolver,
-    )) {
-      selectors.push(selector)
-    }
-
-    // - Directories containing the CSS files
-    for (let entry of config.entries) {
-      if (entry.type !== 'css') continue
-      selectors.push({
-        pattern: normalizePath(path.join(path.dirname(entry.path), '**')),
-        priority: DocumentSelectorPriority.CSS_DIRECTORY,
-      })
-    }
-
-    // - Directory containing the config
-    selectors.push({
-      pattern: normalizePath(path.join(path.dirname(config.path), '**')),
-      priority: DocumentSelectorPriority.CONFIG_DIRECTORY,
-    })
-
-    // - Root of package that contains the config
-    selectors.push({
-      pattern: normalizePath(path.join(config.packageRoot, '**')),
-      priority: DocumentSelectorPriority.PACKAGE_DIRECTORY,
-    })
-
-    // Reorder selectors from most specific to least specific
-    selectors.sort((a, z) => a.priority - z.priority)
-
-    // Eliminate duplicate selector patterns
-    selectors = selectors.filter(
-      ({ pattern }, index, documentSelectors) =>
-        documentSelectors.findIndex(({ pattern: p }) => p === pattern) === index,
-    )
+    let selectors = await calculateDocumentSelectors(config, tailwind.features, this.resolver)
 
     return {
       config,
@@ -545,13 +490,14 @@ function contentSelectorsFromConfig(
   entry: ConfigEntry,
   features: Feature[],
   resolver: Resolver,
+  actualConfig?: any,
 ): AsyncIterable<DocumentSelector> {
   if (entry.type === 'css') {
     return contentSelectorsFromCssConfig(entry, resolver)
   }
 
   if (entry.type === 'js') {
-    return contentSelectorsFromJsConfig(entry, features)
+    return contentSelectorsFromJsConfig(entry, features, actualConfig)
   }
 }
 
@@ -586,11 +532,18 @@ async function* contentSelectorsFromJsConfig(
     if (typeof item !== 'string') continue
 
     let filepath = item.startsWith('!')
-      ? `!${path.resolve(contentBase, item.slice(1))}`
+      ? path.resolve(contentBase, item.slice(1))
       : path.resolve(contentBase, item)
 
+    filepath = normalizePath(filepath)
+    filepath = normalizeDriveLetter(filepath)
+
+    if (item.startsWith('!')) {
+      filepath = `!${filepath}`
+    }
+
     yield {
-      pattern: normalizePath(filepath),
+      pattern: filepath,
       priority: DocumentSelectorPriority.CONTENT_FILE,
     }
   }
@@ -603,8 +556,11 @@ async function* contentSelectorsFromCssConfig(
   let auto = false
   for (let item of entry.content) {
     if (item.kind === 'file') {
+      let filepath = item.file
+      filepath = normalizePath(filepath)
+      filepath = normalizeDriveLetter(filepath)
       yield {
-        pattern: normalizePath(item.file),
+        pattern: filepath,
         priority: DocumentSelectorPriority.CONTENT_FILE,
       }
     } else if (item.kind === 'auto' && !auto) {
@@ -657,12 +613,16 @@ async function* detectContentFiles(
     if (!result) return
 
     for (let file of result.files) {
-      yield normalizePath(file)
+      file = normalizePath(file)
+      file = normalizeDriveLetter(file)
+      yield file
     }
 
     for (let { base, pattern } of result.globs) {
       // Do not normalize the glob itself as it may contain escape sequences
-      yield normalizePath(base) + '/' + pattern
+      base = normalizePath(base)
+      base = normalizeDriveLetter(base)
+      yield `${base}/${pattern}`
     }
   } catch {
     //
@@ -793,3 +753,67 @@ function requiresPreprocessor(filepath: string) {
 
   return ext === '.scss' || ext === '.sass' || ext === '.less' || ext === '.styl' || ext === '.pcss'
 }
+
+export async function calculateDocumentSelectors(
+  config: ConfigEntry,
+  features: Feature[],
+  resolver: Resolver,
+  actualConfig?: any,
+) {
+  let selectors: DocumentSelector[] = []
+
+  // selectors:
+  // - CSS files
+  for (let entry of config.entries) {
+    if (entry.type !== 'css') continue
+
+    selectors.push({
+      pattern: normalizeDriveLetter(normalizePath(entry.path)),
+      priority: DocumentSelectorPriority.CSS_FILE,
+    })
+  }
+
+  // - Config File
+  selectors.push({
+    pattern: normalizeDriveLetter(normalizePath(config.path)),
+    priority: DocumentSelectorPriority.CONFIG_FILE,
+  })
+
+  // - Content patterns from config
+  for await (let selector of contentSelectorsFromConfig(config, features, resolver, actualConfig)) {
+    selectors.push(selector)
+  }
+
+  // - Directories containing the CSS files
+  for (let entry of config.entries) {
+    if (entry.type !== 'css') continue
+
+    selectors.push({
+      pattern: normalizeDriveLetter(normalizePath(path.join(path.dirname(entry.path), '**'))),
+      priority: DocumentSelectorPriority.CSS_DIRECTORY,
+    })
+  }
+
+  // - Directory containing the config
+  selectors.push({
+    pattern: normalizeDriveLetter(normalizePath(path.join(path.dirname(config.path), '**'))),
+    priority: DocumentSelectorPriority.CONFIG_DIRECTORY,
+  })
+
+  // - Root of package that contains the config
+  selectors.push({
+    pattern: normalizeDriveLetter(normalizePath(path.join(config.packageRoot, '**'))),
+    priority: DocumentSelectorPriority.PACKAGE_DIRECTORY,
+  })
+
+  // Reorder selectors from most specific to least specific
+  selectors.sort((a, z) => a.priority - z.priority)
+
+  // Eliminate duplicate selector patterns
+  selectors = selectors.filter(
+    ({ pattern }, index, documentSelectors) =>
+      documentSelectors.findIndex(({ pattern: p }) => p === pattern) === index,
+  )
+
+  return selectors
+}
diff --git a/packages/tailwindcss-language-server/src/projects.ts b/packages/tailwindcss-language-server/src/projects.ts
@@ -80,7 +80,7 @@ import {
   normalizeDriveLetter,
 } from './utils'
 import type { DocumentService } from './documents'
-import type { ProjectConfig } from './project-locator'
+import { calculateDocumentSelectors, type ProjectConfig } from './project-locator'
 import { supportedFeatures } from '@tailwindcss/language-service/src/features'
 import { loadDesignSystem } from './util/v4'
 import { readCssFile } from './util/css'
@@ -286,7 +286,9 @@ export async function createProjectService(
     )
   }
 
-  function onFileEvents(changes: Array<{ file: string; type: FileChangeType }>): void {
+  async function onFileEvents(
+    changes: Array<{ file: string; type: FileChangeType }>,
+  ): Promise<void> {
     let needsInit = false
     let needsRebuild = false
 
@@ -307,16 +309,11 @@ export async function createProjectService(
           projectConfig.configPath &&
           (isConfigFile || isDependency)
         ) {
-          documentSelector = [
-            ...documentSelector.filter(
-              ({ priority }) => priority !== DocumentSelectorPriority.CONTENT_FILE,
-            ),
-            ...getContentDocumentSelectorFromConfigFile(
-              projectConfig.configPath,
-              initialTailwindVersion,
-              projectConfig.folder,
-            ),
-          ]
+          documentSelector = await calculateDocumentSelectors(
+            projectConfig.config,
+            state.features,
+            resolver,
+          )
 
           checkOpenDocuments()
         }
@@ -963,17 +960,12 @@ export async function createProjectService(
 
     /////////////////////
     if (!projectConfig.isUserConfigured) {
-      documentSelector = [
-        ...documentSelector.filter(
-          ({ priority }) => priority !== DocumentSelectorPriority.CONTENT_FILE,
-        ),
-        ...getContentDocumentSelectorFromConfigFile(
-          state.configPath,
-          tailwindcss.version,
-          projectConfig.folder,
-          originalConfig,
-        ),
-      ]
+      documentSelector = await calculateDocumentSelectors(
+        projectConfig.config,
+        state.features,
+        resolver,
+        originalConfig,
+      )
     }
     //////////////////////
 
diff --git a/packages/tailwindcss-language-server/tests/env/multi-config-content.test.js b/packages/tailwindcss-language-server/tests/env/multi-config-content.test.js
@@ -1,38 +1,85 @@
-import { test } from 'vitest'
-import { withFixture } from '../common'
+import { expect } from 'vitest'
+import { css, defineTest, html, js, json, symlinkTo } from '../../src/testing'
+import dedent from 'dedent'
+import { createClient } from '../utils/client'
 
-withFixture('multi-config-content', (c) => {
-  test.concurrent('multi-config with content config - 1', async ({ expect }) => {
-    let textDocument = await c.openDocument({ text: '<div class="bg-foo">', dir: 'one' })
-    let res = await c.sendRequest('textDocument/hover', {
-      textDocument,
-      position: { line: 0, character: 13 },
+defineTest({
+  name: 'multi-config with content config',
+  fs: {
+    'tailwind.config.one.js': js`
+      module.exports = {
+        content: ['./one/**/*'],
+        theme: {
+          extend: {
+            colors: {
+              foo: 'red',
+            },
+          },
+        },
+      }
+    `,
+    'tailwind.config.two.js': js`
+      module.exports = {
+        content: ['./two/**/*'],
+        theme: {
+          extend: {
+            colors: {
+              foo: 'blue',
+            },
+          },
+        },
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let one = await client.open({
+      lang: 'html',
+      name: 'one/index.html',
+      text: '<div class="bg-foo">',
     })
 
-    expect(res).toEqual({
+    let two = await client.open({
+      lang: 'html',
+      name: 'two/index.html',
+      text: '<div class="bg-foo">',
+    })
+
+    // <div class="bg-foo">
+    //             ^
+    let hoverOne = await one.hover({ line: 0, character: 13 })
+    let hoverTwo = await two.hover({ line: 0, character: 13 })
+
+    expect(hoverOne).toEqual({
       contents: {
         language: 'css',
-        value:
-          '.bg-foo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)) /* #ff0000 */;\n}',
+        value: dedent`
+          .bg-foo {
+            --tw-bg-opacity: 1;
+            background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)) /* #ff0000 */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 18 },
       },
-      range: { start: { line: 0, character: 12 }, end: { line: 0, character: 18 } },
-    })
-  })
-
-  test.concurrent('multi-config with content config - 2', async ({ expect }) => {
-    let textDocument = await c.openDocument({ text: '<div class="bg-foo">', dir: 'two' })
-    let res = await c.sendRequest('textDocument/hover', {
-      textDocument,
-      position: { line: 0, character: 13 },
     })
 
-    expect(res).toEqual({
+    expect(hoverTwo).toEqual({
       contents: {
         language: 'css',
-        value:
-          '.bg-foo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 255 / var(--tw-bg-opacity, 1)) /* #0000ff */;\n}',
+        value: dedent`
+          .bg-foo {
+            --tw-bg-opacity: 1;
+            background-color: rgb(0 0 255 / var(--tw-bg-opacity, 1)) /* #0000ff */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 18 },
       },
-      range: { start: { line: 0, character: 12 }, end: { line: 0, character: 18 } },
     })
-  })
+  },
 })
diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -13,6 +13,8 @@
 - Handle helper function lookups in nested parens ([#1354](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1354))
 - Hide `@property` declarations from completion details ([#1356](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1356))
 - Hide variant-provided declarations from completion details for a utility ([#1356](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1356))
+- Compute correct document selectors when a project is initialized ([#1335](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1335))
+- Fix matching of some content file paths on Windows ([#1335](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1335))
 
 # 0.14.16
 
