wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Make JS APIs available to plugins and configs in the Standalone CLI (#15934)

Browse source 
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 #15235

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This commit is contained in:
Jordan Pittman 2025-02-25 07:21:46 -05:00 • committed by GitHub
parent ef57e6ea4d
commit 662c6862ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 214 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

109
integrations/cli/standalone.test.ts
View file

@ -1,6 +1,6 @@
import os from 'node:os'
import path from 'node:path'
import { candidate, css, html, json, test } from '../utils'
import { candidate, css, html, js, json, test } from '../utils'
const STANDALONE_BINARY = (() => {
switch (os.platform()) {
@ -56,3 +56,110 @@ test(
])
},
)
test(
'includes js APIs for plugins',
{
fs: {
'package.json': json`
{
"dependencies": {}
}
`,
'index.html': html`
<div class="underline example1 example2 example3"></div>
`,
'src/index.css': css`
@import 'tailwindcss/theme' theme(reference);
@import 'tailwindcss/utilities';
@plugin './plugin.js';
@plugin './plugin.cjs';
@plugin './plugin.ts';
`,
'src/plugin.js': js`
import plugin from 'tailwindcss/plugin'
// Make sure all available JS APIs can be imported and used
import * as tw from 'tailwindcss'
import colors from 'tailwindcss/colors'
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
import defaultTheme from 'tailwindcss/defaultTheme'
import * as pkg from 'tailwindcss/package.json'
export default plugin(function ({ addUtilities }) {
addUtilities({
'.example1': {
'--version': pkg.version,
'--default-theme': typeof defaultTheme,
'--flatten-color-palette': typeof flattenColorPalette,
'--colors': typeof colors,
'--core': typeof tw,
color: 'red',
},
})
})
`,
'src/plugin.cjs': js`
const plugin = require('tailwindcss/plugin')
// Make sure all available JS APIs can be imported and used
const tw = require('tailwindcss')
const colors = require('tailwindcss/colors')
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
const defaultTheme = require('tailwindcss/defaultTheme')
const pkg = require('tailwindcss/package.json')
module.exports = plugin(function ({ addUtilities }) {
addUtilities({
'.example2': {
'--version': pkg.version,
'--default-theme': typeof defaultTheme,
'--flatten-color-palette': typeof flattenColorPalette,
'--colors': typeof colors,
'--core': typeof tw,
color: 'red',
},
})
})
`,
'src/plugin.ts': js`
import plugin from 'tailwindcss/plugin'
// Make sure all available JS APIs can be imported and used
import * as tw from 'tailwindcss'
import colors from 'tailwindcss/colors'
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
import defaultTheme from 'tailwindcss/defaultTheme'
import * as pkg from 'tailwindcss/package.json'
export interface PluginOptions {
}
export default plugin(function ({ addUtilities }) {
addUtilities({
'.example3': {
'--version': pkg.version,
'--default-theme': typeof defaultTheme,
'--flatten-color-palette': typeof flattenColorPalette,
'--colors': typeof colors,
'--core': typeof tw,
color: 'red',
},
})
})
`,
},
},
async ({ fs, exec }) => {
await exec(
`${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
)
await fs.expectFileToContain('dist/out.css', [
candidate`underline`,
candidate`example1`,
candidate`example2`,
candidate`example3`,
])
},
)