Skip to content

Commit c8efeca

Browse files
authoredFeb 27, 2025··
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.
1 parent 34660f8 commit c8efeca

File tree

4 files changed

+68
-1
lines changed

4 files changed

+68
-1
lines changed
 

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

+23
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Resolver } from '../../resolver'
99
import { pathToFileURL } from '../../utils'
1010
import type { Jiti } from 'jiti/lib/types'
1111
import { assets } from './assets'
12+
import { plugins } from './plugins'
1213

1314
const HAS_V4_IMPORT = /@import\s*(?:'tailwindcss'|"tailwindcss")/
1415
const HAS_V4_THEME = /@theme\s*\{/
@@ -58,6 +59,28 @@ function createLoader<T>({
5859

5960
return await jiti.import(url.href, { default: true })
6061
} catch (err) {
62+
// If the request was to load a first-party plugin and we can't resolve it
63+
// locally, then fall back to the built-in plugins that we know about.
64+
if (resourceType === 'plugin' && id in plugins) {
65+
console.log('Loading bundled plugin for: ', id)
66+
return await plugins[id]()
67+
}
68+
69+
// This checks for an error thrown by enhanced-resolve
70+
if (err && typeof err.details === 'string') {
71+
let details: string = err.details
72+
let pattern = /^resolve '([^']+)'/
73+
let match = details.match(pattern)
74+
if (match) {
75+
let [_, importee] = match
76+
if (importee in plugins) {
77+
console.log(
78+
`[error] Cannot load '${id}' plugins inside configs or plugins is not currently supported`,
79+
)
80+
}
81+
}
82+
}
83+
6184
return onError(id, err, resourceType)
6285
}
6386
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const plugins = {
2+
'@tailwindcss/forms': () => import('@tailwindcss/forms').then((m) => m.default),
3+
'@tailwindcss/aspect-ratio': () => import('@tailwindcss/aspect-ratio').then((m) => m.default),
4+
'@tailwindcss/typography': () => import('@tailwindcss/typography').then((m) => m.default),
5+
}

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

+39
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,45 @@ defineTest({
5353
},
5454
})
5555

56+
defineTest({
57+
name: 'v4, no npm, bundled plugins',
58+
fs: {
59+
'app.css': css`
60+
@import 'tailwindcss';
61+
@plugin "@tailwindcss/aspect-ratio";
62+
@plugin "@tailwindcss/forms";
63+
@plugin "@tailwindcss/typography";
64+
`,
65+
},
66+
67+
// Note this test MUST run in spawn mode because Vitest hooks into import,
68+
// require, etc… already and we need to test that any hooks are working
69+
// without outside interference.
70+
prepare: async ({ root }) => ({ client: await createClient({ root }) }),
71+
72+
handle: async ({ client }) => {
73+
let doc = await client.open({
74+
lang: 'html',
75+
text: '<div class="prose-slate form-select aspect-w-2"></div>',
76+
})
77+
78+
// <div class="prose-slate form-select aspect-w-2"></div>
79+
// ^
80+
let hover = await doc.hover({ line: 0, character: 13 })
81+
expect(hover).not.toEqual(null)
82+
83+
// <div class="prose-slate form-select aspect-w-2"></div>
84+
// ^
85+
hover = await doc.hover({ line: 0, character: 25 })
86+
expect(hover).not.toEqual(null)
87+
88+
// <div class="prose-slate form-select aspect-w-2"></div>
89+
// ^
90+
hover = await doc.hover({ line: 0, character: 37 })
91+
expect(hover).not.toEqual(null)
92+
},
93+
})
94+
5695
defineTest({
5796
/**
5897
* Plugins and configs that import stuff from the `tailwindcss` package do

‎packages/vscode-tailwindcss/CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Prerelease
44

5-
- Nothing yet!
5+
- v4: Support loading bundled versions of some first-party plugins ([#1240](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1240))
66

77
# 0.14.8
88

0 commit comments

Comments
 (0)
Please sign in to comment.