evanw / esbuild

An extremely fast bundler for the web
https://esbuild.github.io/
MIT License
38.09k stars 1.14k forks source link

[Feature] Minify content in template literal tags css and html #721

Closed Avocher closed 3 years ago

Avocher commented 3 years ago

It would be really nice if esbuild could minify the content inside the template literal tags css and html. Or perhaps even allow configuring a mapping between tag and content type. Here's an example:

const myCss = css`.modal { background: white; }`;
const getHtml = (name) => html`<div>Welcome ${name}</div>`;

These tags are used by libraries like lit-html, preact, hyperhtml and a few others.

Thank you for this amazing bundler!

evanw commented 3 years ago

Sorry, doing specific AST transforms that are special-cased to individual libraries like this is outside of the scope of esbuild. I want esbuild to stay more of a general-purpose tool. Think of esbuild as more of a "linker for the web". It takes normal JavaScript and bundles it together. If you want to pre-process the JavaScript in custom ways, you'll have to do that part yourself.

It's possible to do something like this and still use esbuild by doing this syntax transform outside of esbuild using another library and then passing the transformed JavaScript to esbuild. This workflow can even be integrated into esbuild using an esbuild on-load plugin. But you will either need to write or find another library to do this.