Resolve style exports field in postcss import

Author: thecrypticace

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

@@ -1,7 +1,22 @@
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
+import { createResolver } from './util/resolve'
 
-const resolveImports = postcss([postcssImport()])
+const resolver = createResolver({
+  extensions: ['.css'],
+  conditionNames: ['style'],
+})
+
+const resolveImports = postcss([
+  postcssImport({
+    resolve(id, basedir) {
+      let paths = resolver.resolveSync({}, basedir, id)
+      return paths
+        ? paths
+        : id
+    },
+  }),
+])
 
 export function resolveCssImports() {
   return resolveImports

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -553,3 +553,26 @@ withFixture('v4/basic', (c) => {
     })
   })
 })
+
+withFixture('v4/workspaces', (c) => {
+  let completion = buildCompletion(c)
+
+  test('@import resolution supports exports.style', async ({ expect }) => {
+    let result = await completion({
+      dir: 'packages/web',
+      lang: 'html',
+      text: '<div class=""></div>',
+      position: { line: 0, character: 12 },
+    })
+
+    let item = result.items.find((item) => item.label === 'bg-beet')
+
+    let resolved = await c.sendRequest('completionItem/resolve', item)
+
+    expect(resolved).toEqual({
+      ...item,
+      detail: 'background-color: #8e3b46;',
+      documentation: '#8e3b46',
+    })
+  })
+})

packages/tailwindcss-language-server/tests/fixtures/v4/workspaces/package-lock.json

@@ -0,0 +1,3 @@
+@theme {
+    --color-beet: #8e3b46;
+}

packages/tailwindcss-language-server/tests/fixtures/v4/workspaces/packages/style-export/lib.css

@@ -0,0 +1,8 @@
+{
+  "name": "@private/style-export",
+  "exports": {
+    ".": {
+      "style": "./lib.css"
+    }
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/workspaces/packages/style-export/package.json

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import '@private/shared/ui.css';
+@import '@private/style-export';
+
 @theme {
   --color-potato: #907a70;
 }