Skip to content

Commit 662c686

Browse files
thecrypticacephilipp-spiess
thecrypticace
and
philipp-spiess
authored
Make JS APIs available to plugins and configs in the Standalone CLI (tailwindlabs#15934)
This PR ensures we bundle the relevant JS APIs in the Standalone CLI like `tailwindcss`, `tailwindcss/plugin`, `tailwindcss/colors`, etc… Before, when loading plugins or configs, imports for those resources would fail. Fixes tailwindlabs#15235 --------- Co-authored-by: Philipp Spiess <hello@philippspiess.com>
1 parent ef57e6e commit 662c686

File tree

6 files changed

+214
-166
lines changed

6 files changed

+214
-166
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515

1616
### Fixed
1717

18+
- Make JS APIs available to plugins and configs in the Standalone CLI ([#15934](https://github.com/tailwindlabs/tailwindcss/pull/15934))
1819
- Vite: Don't crash when importing a virtual module in JavaScript that ends in `.css` ([#16780](https://github.com/tailwindlabs/tailwindcss/pull/16780))
1920
- Ensure `@reference "…"` does not emit CSS variables ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
2021
- Fix an issue where `@reference "…"` would sometimes omit keyframe animations ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))

‎integrations/cli/standalone.test.ts

+108-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import os from 'node:os'
22
import path from 'node:path'
3-
import { candidate, css, html, json, test } from '../utils'
3+
import { candidate, css, html, js, json, test } from '../utils'
44

55
const STANDALONE_BINARY = (() => {
66
switch (os.platform()) {
@@ -56,3 +56,110 @@ test(
5656
])
5757
},
5858
)
59+
60+
test(
61+
'includes js APIs for plugins',
62+
{
63+
fs: {
64+
'package.json': json`
65+
{
66+
"dependencies": {}
67+
}
68+
`,
69+
'index.html': html`
70+
<div class="underline example1 example2 example3"></div>
71+
`,
72+
'src/index.css': css`
73+
@import 'tailwindcss/theme' theme(reference);
74+
@import 'tailwindcss/utilities';
75+
@plugin './plugin.js';
76+
@plugin './plugin.cjs';
77+
@plugin './plugin.ts';
78+
`,
79+
'src/plugin.js': js`
80+
import plugin from 'tailwindcss/plugin'
81+
82+
// Make sure all available JS APIs can be imported and used
83+
import * as tw from 'tailwindcss'
84+
import colors from 'tailwindcss/colors'
85+
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
86+
import defaultTheme from 'tailwindcss/defaultTheme'
87+
import * as pkg from 'tailwindcss/package.json'
88+
89+
export default plugin(function ({ addUtilities }) {
90+
addUtilities({
91+
'.example1': {
92+
'--version': pkg.version,
93+
'--default-theme': typeof defaultTheme,
94+
'--flatten-color-palette': typeof flattenColorPalette,
95+
'--colors': typeof colors,
96+
'--core': typeof tw,
97+
color: 'red',
98+
},
99+
})
100+
})
101+
`,
102+
'src/plugin.cjs': js`
103+
const plugin = require('tailwindcss/plugin')
104+
105+
// Make sure all available JS APIs can be imported and used
106+
const tw = require('tailwindcss')
107+
const colors = require('tailwindcss/colors')
108+
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
109+
const defaultTheme = require('tailwindcss/defaultTheme')
110+
const pkg = require('tailwindcss/package.json')
111+
112+
module.exports = plugin(function ({ addUtilities }) {
113+
addUtilities({
114+
'.example2': {
115+
'--version': pkg.version,
116+
'--default-theme': typeof defaultTheme,
117+
'--flatten-color-palette': typeof flattenColorPalette,
118+
'--colors': typeof colors,
119+
'--core': typeof tw,
120+
color: 'red',
121+
},
122+
})
123+
})
124+
`,
125+
'src/plugin.ts': js`
126+
import plugin from 'tailwindcss/plugin'
127+
128+
// Make sure all available JS APIs can be imported and used
129+
import * as tw from 'tailwindcss'
130+
import colors from 'tailwindcss/colors'
131+
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
132+
import defaultTheme from 'tailwindcss/defaultTheme'
133+
import * as pkg from 'tailwindcss/package.json'
134+
135+
export interface PluginOptions {
136+
}
137+
138+
export default plugin(function ({ addUtilities }) {
139+
addUtilities({
140+
'.example3': {
141+
'--version': pkg.version,
142+
'--default-theme': typeof defaultTheme,
143+
'--flatten-color-palette': typeof flattenColorPalette,
144+
'--colors': typeof colors,
145+
'--core': typeof tw,
146+
color: 'red',
147+
},
148+
})
149+
})
150+
`,
151+
},
152+
},
153+
async ({ fs, exec }) => {
154+
await exec(
155+
`${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
156+
)
157+
158+
await fs.expectFileToContain('dist/out.css', [
159+
candidate`underline`,
160+
candidate`example1`,
161+
candidate`example2`,
162+
candidate`example3`,
163+
])
164+
},
165+
)

‎packages/@tailwindcss-standalone/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"@parcel/watcher-linux-x64-glibc": "^2.5.1",
4343
"@parcel/watcher-linux-x64-musl": "^2.5.1",
4444
"@parcel/watcher-win32-x64": "^2.5.1",
45-
"@types/bun": "^1.2.2",
46-
"bun": "1.1.43",
45+
"@types/bun": "^1.2.3",
46+
"bun": "^1.2.3",
4747
"lightningcss-darwin-arm64": "^1.29.1",
4848
"lightningcss-darwin-x64": "^1.29.1",
4949
"lightningcss-linux-arm64-gnu": "^1.29.1",

‎packages/@tailwindcss-standalone/src/index.ts

+36
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,40 @@ globalThis.__tw_readFile = async (path, encoding) => {
7171
return fs.readFileSync(path, encoding)
7272
}
7373

74+
// We use a plugin to make sure that the JS APIs are bundled with the standalone
75+
// CLI and can be imported inside configs and plugins
76+
Bun.plugin({
77+
name: 'bundle-tailwindcss-apis',
78+
target: 'bun',
79+
async setup(build) {
80+
// These imports must be static strings otherwise they won't be bundled
81+
let bundled = {
82+
tailwindcss: await import('tailwindcss'),
83+
'tailwindcss/colors': await import('tailwindcss/colors'),
84+
'tailwindcss/colors.js': await import('tailwindcss/colors'),
85+
'tailwindcss/plugin': await import('tailwindcss/plugin'),
86+
'tailwindcss/plugin.js': await import('tailwindcss/plugin'),
87+
'tailwindcss/package.json': await import('tailwindcss/package.json'),
88+
'tailwindcss/lib/util/flattenColorPalette': await import(
89+
'tailwindcss/lib/util/flattenColorPalette'
90+
),
91+
'tailwindcss/lib/util/flattenColorPalette.js': await import(
92+
'tailwindcss/lib/util/flattenColorPalette'
93+
),
94+
'tailwindcss/defaultTheme': await import('tailwindcss/defaultTheme'),
95+
'tailwindcss/defaultTheme.js': await import('tailwindcss/defaultTheme'),
96+
}
97+
98+
for (let [id, exports] of Object.entries(bundled)) {
99+
build.module(id, () => ({
100+
loader: 'object',
101+
exports: {
102+
...exports,
103+
__esModule: true,
104+
},
105+
}))
106+
}
107+
},
108+
})
109+
74110
await import('../../@tailwindcss-cli/src/index.ts')

‎playgrounds/vite/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"devDependencies": {
1919
"@types/react": "^19.0.10",
2020
"@types/react-dom": "^19.0.4",
21-
"bun": "^1.1.29",
21+
"bun": "^1.2.3",
2222
"vite": "catalog:"
2323
}
2424
}

0 commit comments

Comments
 (0)