archive-gh-me/tsup
1
0
Fork 0
mirror of https://github.com/egoist/tsup.git synced 2025-12-08 20:35:58 +00:00
Code Issues Projects Releases Wiki Activity

feat: add support for async injectStyle (#1193)

Browse Source
This commit is contained in:
Ariel Weinberger 2024-09-17 04:46:39 +02:00 committed by GitHub
parent fc72d45fbe
commit f25a9db77d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/esbuild/postcss.ts
View File

@ -9,7 +9,7 @@ export const postcssPlugin = ({
cssLoader,
}: {
css?: Map<string, string>
inject?: boolean | ((css: string, fileId: string) => string)
inject?: boolean | ((css: string, fileId: string) => string | Promise<string>)
cssLoader?: Loader
}): Plugin => {
return {
@ -122,12 +122,11 @@ export const postcssPlugin = ({
})
).code
contents =
typeof inject === 'function'
? inject(JSON.stringify(contents), args.path)
: `import styleInject from '#style-inject';styleInject(${JSON.stringify(
contents,
)})`
contents = typeof inject === 'function'
? await Promise.resolve(inject(JSON.stringify(contents), args.path))
: `import styleInject from '#style-inject';styleInject(${JSON.stringify(
contents,
)})`
return {
contents,

1
src/index.ts
View File

@ -236,6 +236,7 @@ export async function build(_options: Options) {
configName: item?.name,
options: {
...options, // functions cannot be cloned
injectStyle: typeof options.injectStyle === 'function' ? undefined : options.injectStyle,
banner: undefined,
footer: undefined,
esbuildPlugins: undefined,

2
src/options.ts
View File

@ -211,7 +211,7 @@ export type Options = {
* Inject CSS as style tags to document head
* @default {false}
*/
injectStyle?: boolean | ((css: string, fileId: string) => string)
injectStyle?: boolean | ((css: string, fileId: string) => string | Promise<string>)
/**
* Inject cjs and esm shims if needed
* @default false

26
test/index.test.ts
View File

@ -806,7 +806,7 @@ test(`should generate export {} when there are no exports in source file`, async
expect(await getFileContent('dist/input.d.mts')).toMatch(/export {\s*}/)
})
test('custom inject style function', async () => {
test('custom inject style function - sync', async () => {
const { outFiles, getFileContent } = await run(getTestName(), {
'input.ts': `import './style.css'`,
'style.css': `.hello { color: red }`,
@ -829,6 +829,30 @@ test('custom inject style function', async () => {
)
})
test('custom inject style function - async', async () => {
const { outFiles, getFileContent } = await run(getTestName(), {
'input.ts': `import './style.css'`,
'style.css': `.hello { color: red }`,
'tsup.config.ts': `
export default {
entry: ['src/input.ts'],
minify: true,
format: ['esm', 'cjs'],
injectStyle: async (css) => {
await new Promise(resolve => setTimeout(resolve, 100));
return "__custom_async_inject_style__(" + css +")";
}
}`,
})
expect(outFiles).toEqual(['input.js', 'input.mjs'])
expect(await getFileContent('dist/input.mjs')).toContain(
'__custom_async_inject_style__(`.hello{color:red}\n`)',
)
expect(await getFileContent('dist/input.js')).toContain(
'__custom_async_inject_style__(`.hello{color:red}\n`)',
)
})
test('preserve top-level variable for IIFE format', async () => {
const { outFiles, getFileContent } = await run(getTestName(), {
'input.ts': `export default 'foo'`,