Hoist @import nodes to the top in the project locator

This ensures project initialization can proceed far enough that Tailwind CSS itself should attempt to initalize. It also means we can reliably detect this case and show an error in the console.

Author: thecrypticace

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

@@ -6,10 +6,39 @@ import { Resolver } from '../resolver'
 
 export function resolveCssImports({
   resolver,
+  loose = false,
 }: {
   resolver: Resolver
+  loose?: boolean
 }) {
   return postcss([
+    // Hoist imports to the top of the file
+    {
+      postcssPlugin: 'hoist-at-import',
+      Once(root, { result }) {
+        if (!loose) return
+
+        let hoist: postcss.AtRule[] = []
+        let seenImportsAfterOtherNodes = false
+
+        for (let node of root.nodes) {
+          if (node.type === 'atrule' && (node.name === 'import' || node.name === 'charset')) {
+            hoist.push(node)
+          } else if (hoist.length > 0 && (node.type === 'atrule' || node.type === 'rule')) {
+            seenImportsAfterOtherNodes = true
+          }
+        }
+
+        root.prepend(hoist)
+
+        if (!seenImportsAfterOtherNodes) return
+
+        console.log(
+          `hoist-at-import: The file '${result.opts.from}' contains @import rules after other at rules. This is invalid CSS and may cause problems with your build.`,
+        )
+      },
+    },
+
     postcssImport({
       async resolve(id, base) {
         try {

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

@@ -219,3 +219,11 @@ testFixture('v4/path-mappings', [
     ],
   },
 ])
+
+testFixture('v4/invalid-import-order', [
+  //
+  {
+    config: 'tailwind.css',
+    content: ['{URL}/package.json'],
+  },
+])

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

@@ -618,7 +618,9 @@ class FileEntry {
 
   async resolveImports(resolver: Resolver) {
     try {
-      let result = await resolveCssImports({ resolver }).process(this.content, { from: this.path })
+      let result = await resolveCssImports({ resolver, loose: true }).process(this.content, {
+        from: this.path,
+      })
       let deps = result.messages.filter((msg) => msg.type === 'dependency')
 
       deps = deps.filter((msg) => {
@@ -630,9 +632,10 @@ class FileEntry {
 
       // Replace the file content with the processed CSS
       this.content = result.css
-    } catch {
-      // TODO: Errors here should be surfaced in tests and possibly the user in
-      // `trace` logs or something like that
+    } catch (err) {
+      console.debug(`Unable to resolve imports for ${this.path}.`)
+      console.debug(`This may result in failure to locate Tailwind CSS projects.`)
+      console.error(err)
     }
   }
 

packages/tailwindcss-language-server/tests/fixtures/v4/invalid-import-order/a.css

@@ -0,0 +1,5 @@
+@layer base {
+  :root {
+    font-family: sans-serif;
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/invalid-import-order/b.css

@@ -0,0 +1,5 @@
+@layer base {
+  :root {
+    --foo: red;
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/invalid-import-order/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "^4.0.0-beta.6"
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/invalid-import-order/package.json

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+
+/*
+ * This is invalid in this position because some `@import`s are not at the top of the file.
+ * We don't want project discovery to fail so we hoist them up and then warn in the console.
+ */
+@variant dark (&:where(.dark, .dark *));
+
+@import './a.css';
+@import './b.css';
+
+@theme {
+  --color-primary: #c0ffee;
+}