v4: Support loading bundled versions of some first-party plugins (#1240)

see
#1224 (comment)

This adds support for loading these three plugins in v4 **only when
using `@plugin`** if we can't find them:
- `@tailwindcss/typography`
- `@tailwindcss/forms`
- `@tailwindcss/aspect-ratio`

This coincides with behavior of the Standalone CLI where these are
bundled instead of available as an NPM package.

I've additionally logs when trying to import one of these plugins inside
a JS file. This does not work right now and may take some effort to
support because it will at least require the use of Node's experimental
loader's API and potentially additional work as well.

Author: thecrypticace

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

@@ -9,6 +9,7 @@ import { Resolver } from '../../resolver'
 import { pathToFileURL } from '../../utils'
 import type { Jiti } from 'jiti/lib/types'
 import { assets } from './assets'
+import { plugins } from './plugins'
 
 const HAS_V4_IMPORT = /@import\s*(?:'tailwindcss'|"tailwindcss")/
 const HAS_V4_THEME = /@theme\s*\{/
@@ -58,6 +59,28 @@ function createLoader<T>({
 
       return await jiti.import(url.href, { default: true })
     } catch (err) {
+      // If the request was to load a first-party plugin and we can't resolve it
+      // locally, then fall back to the built-in plugins that we know about.
+      if (resourceType === 'plugin' && id in plugins) {
+        console.log('Loading bundled plugin for: ', id)
+        return await plugins[id]()
+      }
+
+      // This checks for an error thrown by enhanced-resolve
+      if (err && typeof err.details === 'string') {
+        let details: string = err.details
+        let pattern = /^resolve '([^']+)'/
+        let match = details.match(pattern)
+        if (match) {
+          let [_, importee] = match
+          if (importee in plugins) {
+            console.log(
+              `[error] Cannot load '${id}' plugins inside configs or plugins is not currently supported`,
+            )
+          }
+        }
+      }
+
       return onError(id, err, resourceType)
     }
   }

packages/tailwindcss-language-server/src/util/v4/plugins.ts

@@ -0,0 +1,5 @@
+export const plugins = {
+  '@tailwindcss/forms': () => import('@tailwindcss/forms').then((m) => m.default),
+  '@tailwindcss/aspect-ratio': () => import('@tailwindcss/aspect-ratio').then((m) => m.default),
+  '@tailwindcss/typography': () => import('@tailwindcss/typography').then((m) => m.default),
+}

packages/tailwindcss-language-server/tests/env/v4.test.js

@@ -53,6 +53,45 @@ defineTest({
   },
 })
 
+defineTest({
+  name: 'v4, no npm, bundled plugins',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+      @plugin "@tailwindcss/aspect-ratio";
+      @plugin "@tailwindcss/forms";
+      @plugin "@tailwindcss/typography";
+    `,
+  },
+
+  // Note this test MUST run in spawn mode because Vitest hooks into import,
+  // require, etc… already and we need to test that any hooks are working
+  // without outside interference.
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+
+  handle: async ({ client }) => {
+    let doc = await client.open({
+      lang: 'html',
+      text: '<div class="prose-slate form-select aspect-w-2"></div>',
+    })
+
+    // <div class="prose-slate form-select aspect-w-2"></div>
+    //             ^
+    let hover = await doc.hover({ line: 0, character: 13 })
+    expect(hover).not.toEqual(null)
+
+    // <div class="prose-slate form-select aspect-w-2"></div>
+    //                         ^
+    hover = await doc.hover({ line: 0, character: 25 })
+    expect(hover).not.toEqual(null)
+
+    // <div class="prose-slate form-select aspect-w-2"></div>
+    //                                     ^
+    hover = await doc.hover({ line: 0, character: 37 })
+    expect(hover).not.toEqual(null)
+  },
+})
+
 defineTest({
   /**
    * Plugins and configs that import stuff from the `tailwindcss` package do

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- v4: Support loading bundled versions of some first-party plugins ([#1240](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1240))
 
 # 0.14.8