Sort files that import Tailwind CSS before ones that don’t

Author: thecrypticace

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

@@ -499,6 +499,38 @@ testLocator({
   ],
 })
 
+testLocator({
+  name: 'Stylesheets that import Tailwind CSS are picked over ones that dont',
+  fs: {
+    'a/foo.css': css`
+      @import './bar.css';
+      .a {
+        color: red;
+      }
+    `,
+    'a/bar.css': css`
+      .b {
+        color: red;
+      }
+    `,
+    'src/app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  expected: [
+    {
+      version: '4.1.1 (bundled)',
+      config: '/src/app.css',
+      content: [],
+    },
+    {
+      version: '4.1.1 (bundled)',
+      config: '/a/foo.css',
+      content: [],
+    },
+  ],
+})
+
 // ---
 
 function testLocator({

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

@@ -350,6 +350,9 @@ export class ProjectLocator {
     for (let file of imports) byRealPath[file.realpath] = file
     for (let file of imports) file.deps = file.deps.map((dep) => byRealPath[dep.realpath] ?? dep)
 
+    // Check if each file has a direct or indirect tailwind import
+    await Promise.all(imports.map((file) => file.resolveImportsTailwind()))
+
     // Create a graph of all the CSS files that might (indirectly) use Tailwind
     let graph = new Graph<FileEntry>()
 
@@ -391,11 +394,13 @@ export class ProjectLocator {
 
     roots.sort((a, b) => {
       return (
-    // Sort the graph so potential "roots" appear first
-    // The entire concept of roots needs to be rethought because it's not always
-    // clear what the root of a project is. Even when imports are present a file
-    // may import a file that is the actual "root" of the project.
+        // Sort the graph so potential "roots" appear first
+        // The entire concept of roots needs to be rethought because it's not always
+        // clear what the root of a project is. Even when imports are present a file
+        // may import a file that is the actual "root" of the project.
         Number(b.meta.root) - Number(a.meta.root) ||
+        // Move stylesheets with an explicit tailwindcss import before others
+        Number(b.importsTailwind) - Number(a.importsTailwind) ||
         // Otherwise stylesheets are kept in discovery order
         0
       )
@@ -737,6 +742,28 @@ class FileEntry {
     this.meta ??= this.content ? analyzeStylesheet(this.content) : null
   }
 
+  /**
+   * Determine if this entry or any of its dependencies import a Tailwind CSS
+   * stylesheet
+   */
+  importsTailwind: boolean | null = null
+
+  resolveImportsTailwind() {
+    // Already calculated so nothing to do
+    if (this.importsTailwind !== null) return
+
+    // We import it directly
+    if (this.meta?.explicitImport) {
+      this.importsTailwind = true
+      return
+    }
+
+    // Maybe one of our deps does
+    for (let dep of this.deps) dep.resolveImportsTailwind()
+
+    this.importsTailwind = this.deps.some((dep) => dep.importsTailwind)
+  }
+
   /**
    * Look for `@config` directives in a CSS file and return the path to the config
    * file that it points to. This path is (possibly) relative to the CSS file so

packages/tailwindcss-language-server/src/version-guesser.ts

@@ -10,6 +10,11 @@ export interface TailwindStylesheet {
    * The likely Tailwind version used by the given file
    */
   versions: TailwindVersion[]
+
+  /**
+   * Whether or not this stylesheet explicitly imports Tailwind CSS
+   */
+  explicitImport: boolean
 }
 
 // It's likely this is a v4 file if it has a v4 import:
@@ -60,6 +65,7 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
     return {
       root: true,
       versions: ['4'],
+      explicitImport: true,
     }
   }
 
@@ -71,13 +77,15 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
       return {
         root: true,
         versions: ['4'],
+        explicitImport: false,
       }
     }
 
     return {
       // This file MUST be imported by another file to be a valid root
       root: false,
       versions: ['4'],
+      explicitImport: false,
     }
   }
 
@@ -87,6 +95,7 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
       // This file MUST be imported by another file to be a valid root
       root: false,
       versions: ['4'],
+      explicitImport: false,
     }
   }
 
@@ -96,6 +105,7 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
       // Roots are only a valid concept in v4
       root: false,
       versions: ['3'],
+      explicitImport: false,
     }
   }
 
@@ -104,6 +114,7 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
     return {
       root: true,
       versions: ['4', '3'],
+      explicitImport: false,
     }
   }
 
@@ -112,6 +123,7 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
     return {
       root: false,
       versions: ['4', '3'],
+      explicitImport: false,
     }
   }
 
@@ -120,12 +132,14 @@ export function analyzeStylesheet(content: string): TailwindStylesheet {
     return {
       root: true,
       versions: ['4', '3'],
+      explicitImport: false,
     }
   }
 
   // Pretty sure it's not related to Tailwind at all
   return {
     root: false,
     versions: [],
+    explicitImport: false,
   }
 }