Web Awesome + Bundled CSS + Autoloader support + Rails + Rollup

application.html.erb

<%= javascript_include_tag "webawesome", type: :module, defer: true, data: {webawesome: '/assets/webawesome-dist'} %>

bundle.config.mjs

// This is just a snapship of the build file, with the functions specific to this approach

port * as esbuild from 'esbuild';

const webAwesomePublicDirectory = path.join(process.cwd(), "public/assets/webawesome-dist")

function copyFiles(from, to, overwrite = false) {
  return {
    name: 'copy-files',
    generateBundle() {
      const resolvedFrom = path.resolve(from)
      const resolvedTo = path.resolve(to)
      console.log(`copy files: ${resolvedFrom} → ${resolvedTo}`)
      fs.mkdirSync(resolvedTo, { recursive: true })
      fs.cpSync(resolvedFrom, resolvedTo, {recursive: true})
    }
  }
}

const buildEntrypoints = async () => {
  ///
  const webawesomeCSSPath = path.join(process.cwd(), "app/assets/stylesheets/", "webawesome.esbuild.css")
  await esbuild.build({
    entryPoints: [webawesomeCSSPath],
    bundle: true,
    outfile: "app/assets/builds/webawesome.css",
  })
  
  var outputPlugins = [
    //...
    copyFiles("./node_modules/webawesome/dist", webAwesomePublicDirectory),
  ]
}

package.json

// Adding `webawesome` as a depencency via a vendorized package

"webawesome": "file:./vendor/webawesome-zip"

webawesome.esbuild.css

@import url('webawesome/dist/styles/webawesome.css') layer(framework.wa);
@import url('webawesome/dist/styles/themes/glossy.css') layer(framework.wa);