Set output file name?

[nathonius]

Perhaps this should be obvious, but I'm not seeing it; I had an existing esbuild config and was trying to add the sass plugin to the pipeline (slightly simplified):

import builtins from 'builtin-modules';
import esbuild from 'esbuild';
import process from 'process';
import { sassPlugin } from 'esbuild-sass-plugin';

const banner = `/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
`;

const prod = process.argv[2] === 'production';

const context = await esbuild.context({
  banner: {
    js: banner
  },
  entryPoints: ['main.ts'],
  bundle: true,
  external: [
    'electron',
    ...builtins
  ],
  format: 'cjs',
  target: 'es2018',
  logLevel: 'info',
  sourcemap: prod ? false : 'inline',
  treeShaking: true,
  plugins: [sassPlugin()],
  outfile: 'main.js'
});

if (prod) {
  await context.rebuild();
  process.exit(0);
} else {
  await context.watch();
}

This does exactly what I want and produces a single css file with all my sass! Except it outputs main.css. I know I can just add a small script to rename the file, but how would I change the name of the output file using the plugin? It seems like this should be possible? For my project the file name has to be styles.css. 🤷

[glromeo]

This really is an esbuild configuration question and I am afraid the answer is that there's no way to change that name
You don't really need a small script though just add this

plugins: [
  sassPlugin()
  {
    name: "renamer",
    setup({onEnd}) {
      onEnd(result => { ... })
    }
  }
],

like explained here https://esbuild.github.io/plugins/#on-end

There you can do your post-build actions