esbuild override application.css from sass when css is imported in javascript.

[james-em]

Build script

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }

Issue

When importing CSS in a js file, esbuild generates an application.css. Sass also generates the same file and gets overridden by esbuild.

Result

Without CSS in a js file, my CSS is working fine.
With CSS in a js file, only the CSS imported in the js file is present in builds/application.css

If it's the expected behavior, is there a way to just merge them or avoid having to use multiple stylesheet_link_tag and multiple output file?

[dhh]

Known conflict. You need to name one of the outputs differently by hand.

[mkhairi]

I use custom plugin for esbuild to skip css

#!/usr/bin/env node

const path = require('path')
const { build } = require('esbuild')

const noStyle = {
  name: 'empty-css-imports',
  setup(build) {
    build.onLoad({ filter: /\.css$/ }, () => ({ contents: '' }))
  },
}

build({
  entryPoints: ['application.js'],
  bundle: true,
  sourcemap: process.argv.includes('--sourcemap'),
  minify: false,
  logLevel: 'info',
  outdir: path.join(process.cwd(), 'app/assets/builds'),
  absWorkingDir: path.join(process.cwd(), 'app/assets/javascripts'),
  watch: process.argv.includes('--watch'),
  plugins: [ 
    noStyle
  ]
}).then(() => console.log("⚡ Build complete! ⚡")
).catch((error) => {
  console.error(error)
  process.exit(1)
})

"scripts": {
    "build": "node esbuild.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}