feat: add support for async injectStyle (#1193)

egoist · Sep 17, 2024 · f25a9db · f25a9db
1 parent fc72d45
commit f25a9db
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/src/esbuild/postcss.ts b/src/esbuild/postcss.ts
@@ -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,

diff --git a/src/index.ts b/src/index.ts
@@ -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,

diff --git a/src/options.ts b/src/options.ts
@@ -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

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -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'`,