Can we target the generated css file (generated from css module imports)

[maxmezzomo]

Hi, esbuild is lit 🔥 . Currently using it to bundle css for simple server that returns html response. It works well, I would only like to figure out how, if possible, to target the css file that gets generated from all imported css module files.

Basically would like to output it to some folder that's used as public for server to server assets. But I would like the output server to stay in the outfile path or outputdir, not in public.

Here is an example esbuild try link

For the above example I would like to have 2 outputs

server.cjs
public/server.css

I tried with entryNames but then both cjs and css file will be targeted. assetNames and chunkNames I think are not relevant. So in the link those were just to test I'm not using any of those 3 options in my current setup.

So am looking if there is a way to somehow target just the generated css file. I tried something with plugins like

const css: Plugin = {
	name: "example",
	setup(build) {
		build.onResolve({ filter: /.\.css$/ }, (args) => {
			console.log(args);
			return { path: path.join(args.resolveDir, "public", args.path) };
		});
	},
};

But I think I was only getting the input css file

{
...
path: './styles.module.css'
...
}

which makes sense for what I understand onResolve to do. I was looking at the other plugin callbacks for something like onBeforeEmit where we could configure changes to a file before it gets emitted, like changing the path.

Is there anything like this, or maybe would just be better to do something like copying public assets to whichever folder after esbuild is done.

Thanks

[evanw]

maybe would just be better to do something like copying public assets to whichever folder after esbuild is done.

This is likely the most straightforward solution. If you need to, you can look in the metafile for the cssBundle property on the JavaScript entry point to get the path to the CSS entry point.

[maxmezzomo]

okay nice thanks, in case anyone looking for something similar, this works for my case and think there's some flexibility with build onEnd res callback arg providing metafile also

const moveCss: Plugin = {
  name: "move css",
  setup(build) {
    build.onEnd((res) => {
      fs.renameSync("server.css", "public/server.css");
    });
  }};

[maxmezzomo]

I don't know what you wanna do for the issue, for me its fine to close as can be outside scope.