Is there a way to prepend plugins?

[Titou325]

Hey!

We are looking into inlining some of our resources at react-print-pdf where we use tsup to bundle the resources. However, it seems that we can only append esbuild plugins and not prepend. In our case, we want to use https://github.com/claviska/esbuild-plugin-inline-import but it needs to be passed first as the syntax can't be resolved by other plugins.

An example way we would use it is

import css from "inline:./index.css"

This causes an error as the file path matches the conditions for some of the earlier plugins, which should just be bypassed because of the inline: keyword.

We have also tried patching the esbuild config manually, using both esbuildOptions and a tsup plugin

import { defineConfig } from "tsup";
import { Plugin } from "esbuild";

const plugin: Plugin = {
  name: "inline",
  setup(build) {
    console.log("Setting up inline plugin");
  },
};

export default defineConfig({
  entry: ["src/index.ts", "src/mdx.ts"],
  splitting: false,
  sourcemap: true,
  clean: true,
  format: ["cjs", "esm"],
  dts: true,
  plugins: [
    {
      name: "inline",
      esbuildOptions(options) {
        options.plugins = [plugin, ...(options.plugins as Plugin[])];

        console.log(options);
      },
    },
  ],
});

But it seems that the plugins are being overwritten or not taken into account at a later stage.

What would be a way to deal with that? Thanks!

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.