Skip to content

Commit f25a9db

Browse files
authoredSep 17, 2024··
feat: add support for async injectStyle (#1193)
1 parent fc72d45 commit f25a9db

File tree

4 files changed

+33
-9
lines changed

4 files changed

+33
-9
lines changed
 

‎src/esbuild/postcss.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const postcssPlugin = ({
99
cssLoader,
1010
}: {
1111
css?: Map<string, string>
12-
inject?: boolean | ((css: string, fileId: string) => string)
12+
inject?: boolean | ((css: string, fileId: string) => string | Promise<string>)
1313
cssLoader?: Loader
1414
}): Plugin => {
1515
return {
@@ -122,12 +122,11 @@ export const postcssPlugin = ({
122122
})
123123
).code
124124

125-
contents =
126-
typeof inject === 'function'
127-
? inject(JSON.stringify(contents), args.path)
128-
: `import styleInject from '#style-inject';styleInject(${JSON.stringify(
129-
contents,
130-
)})`
125+
contents = typeof inject === 'function'
126+
? await Promise.resolve(inject(JSON.stringify(contents), args.path))
127+
: `import styleInject from '#style-inject';styleInject(${JSON.stringify(
128+
contents,
129+
)})`
131130

132131
return {
133132
contents,

‎src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@ export async function build(_options: Options) {
236236
configName: item?.name,
237237
options: {
238238
...options, // functions cannot be cloned
239+
injectStyle: typeof options.injectStyle === 'function' ? undefined : options.injectStyle,
239240
banner: undefined,
240241
footer: undefined,
241242
esbuildPlugins: undefined,

‎src/options.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export type Options = {
211211
* Inject CSS as style tags to document head
212212
* @default {false}
213213
*/
214-
injectStyle?: boolean | ((css: string, fileId: string) => string)
214+
injectStyle?: boolean | ((css: string, fileId: string) => string | Promise<string>)
215215
/**
216216
* Inject cjs and esm shims if needed
217217
* @default false

‎test/index.test.ts

+25-1
Original file line numberDiff line numberDiff line change
@@ -806,7 +806,7 @@ test(`should generate export {} when there are no exports in source file`, async
806806
expect(await getFileContent('dist/input.d.mts')).toMatch(/export {\s*}/)
807807
})
808808

809-
test('custom inject style function', async () => {
809+
test('custom inject style function - sync', async () => {
810810
const { outFiles, getFileContent } = await run(getTestName(), {
811811
'input.ts': `import './style.css'`,
812812
'style.css': `.hello { color: red }`,
@@ -829,6 +829,30 @@ test('custom inject style function', async () => {
829829
)
830830
})
831831

832+
test('custom inject style function - async', async () => {
833+
const { outFiles, getFileContent } = await run(getTestName(), {
834+
'input.ts': `import './style.css'`,
835+
'style.css': `.hello { color: red }`,
836+
'tsup.config.ts': `
837+
export default {
838+
entry: ['src/input.ts'],
839+
minify: true,
840+
format: ['esm', 'cjs'],
841+
injectStyle: async (css) => {
842+
await new Promise(resolve => setTimeout(resolve, 100));
843+
return "__custom_async_inject_style__(" + css +")";
844+
}
845+
}`,
846+
})
847+
expect(outFiles).toEqual(['input.js', 'input.mjs'])
848+
expect(await getFileContent('dist/input.mjs')).toContain(
849+
'__custom_async_inject_style__(`.hello{color:red}\n`)',
850+
)
851+
expect(await getFileContent('dist/input.js')).toContain(
852+
'__custom_async_inject_style__(`.hello{color:red}\n`)',
853+
)
854+
})
855+
832856
test('preserve top-level variable for IIFE format', async () => {
833857
const { outFiles, getFileContent } = await run(getTestName(), {
834858
'input.ts': `export default 'foo'`,

0 commit comments

Comments
 (0)
Please sign in to comment.