Support loading plugins in CSS

Author: thecrypticace

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -1,7 +1,10 @@
 import type { DesignSystem } from '@tailwindcss/language-service/src/util/v4'
 
 import postcss from 'postcss'
+import * as path from 'node:path'
 import { resolveCssImports } from '../../css'
+import { resolveFrom } from '../resolveFrom'
+import { pathToFileURL } from 'tailwindcss-language-server/src/utils'
 
 const HAS_V4_IMPORT = /@import\s*(?:'tailwindcss'|"tailwindcss")/
 const HAS_V4_THEME = /@theme\s*\{/
@@ -18,6 +21,37 @@ export async function isMaybeV4(css: string): Promise<boolean> {
   return HAS_V4_THEME.test(css) || HAS_V4_IMPORT.test(css)
 }
 
+/**
+ * Create a loader function that can load plugins and config files relative to
+ * the CSS file that uses them. However, we don't want missing files to prevent
+ * everything from working so we'll let the error handler decide how to proceed.
+ *
+ * @param {object} param0
+ * @returns
+ */
+function createLoader<T>({
+  filepath,
+  onError,
+}: {
+  filepath: string
+  onError: (id: string, error: unknown) => T
+}) {
+  let baseDir = path.dirname(filepath)
+  let cacheKey = `${+Date.now()}`
+
+  return async function loadFile(id: string) {
+    try {
+      let resolved = resolveFrom(baseDir, id)
+      let url = pathToFileURL(resolved)
+      url.searchParams.append('t', cacheKey)
+
+      return await import(url.href).then((m) => m.default ?? m)
+    } catch (err) {
+      return onError(id, err)
+    }
+  }
+}
+
 export async function loadDesignSystem(
   tailwindcss: any,
   filepath: string,
@@ -38,9 +72,14 @@ export async function loadDesignSystem(
 
   // Step 3: Take the resolved CSS and pass it to v4's `loadDesignSystem`
   let design: DesignSystem = await tailwindcss.__unstable__loadDesignSystem(resolved.css, {
-    loadPlugin() {
-      return () => {}
-    },
+    loadPlugin: createLoader({
+      filepath,
+      onError(id, err) {
+        console.error(`Unable to load plugin: ${id}`, err)
+
+        return () => {}
+      },
+    }),
   })
 
   // Step 4: Augment the design system with some additional APIs that the LSP needs

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/app.css

@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+
+/* Load ESM versions */
+@plugin './esm/my-plugin.mjs';
+
+/* Load Common JS versions */
+@plugin './cjs/my-plugin.cjs';
+
+/* Load TypeScript versions */
+@plugin './ts/my-plugin.ts';
+
+/* Attempt to load files that do not exist */
+@plugin './missing-plugin.mjs';

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/cjs/my-plugin.cjs

@@ -0,0 +1,16 @@
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin(
+  () => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'cjs-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/esm/my-plugin.mjs

@@ -0,0 +1,16 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  () => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'esm-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "file:tailwindcss.tgz"
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/package.json

@@ -0,0 +1,17 @@
+import type { PluginAPI } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  (api: PluginAPI) => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'ts-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/css-loading-js/tailwindcss.tgz

@@ -242,3 +242,57 @@ withFixture('v4/basic', (c) => {
     },
   })
 })
+
+withFixture('v4/css-loading-js', (c) => {
+  async function testHover(name, { text, lang, position, expected, expectedRange, settings }) {
+    test.concurrent(name, async ({ expect }) => {
+      let textDocument = await c.openDocument({ text, lang, settings })
+      let res = await c.sendRequest('textDocument/hover', {
+        textDocument,
+        position,
+      })
+
+      expect(res).toEqual(
+        expected
+          ? {
+              contents: {
+                language: 'css',
+                value: expected,
+              },
+              range: expectedRange,
+            }
+          : expected,
+      )
+    })
+  }
+
+  testHover('Plugins: ESM', {
+    text: '<div class="bg-esm-from-plugin">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-esm-from-plugin {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 30 },
+    },
+  })
+
+  testHover('Plugins: CJS', {
+    text: '<div class="bg-cjs-from-plugin">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-cjs-from-plugin {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 30 },
+    },
+  })
+
+  testHover('Plugins: TypeScript', {
+    text: '<div class="bg-ts-from-plugin">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-ts-from-plugin {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 29 },
+    },
+  })
+})