Minify css template literals in production build

[timolins]

Problem

Most of the css is written within template literals, which is not minified in the build step at the moment. This adds a lot of unnecessary whitespace and bytes, which can be reduced by improving minification at build time.

Screenshot of sub-optimal built output:

Goals

• Remove whitespace from tagged string literals
• Minify CSS properly (width: 0px; → width:0;)
• Source Maps should still work

Research

react-hot-toast is using tsup for building, which uses esbuild internally .

Resources I found while experimenting, with little success:

• esbuild-minify-templates - Works for minifying whitespace within literals, but not for the css itself.
• babel-plugin-styled-components - Achieves what we want, but is made for styled-components & babel
• minify-html-literals & esbuild-plugin-minify-html-literals - Looks like it does what we need, but broke my build

Any help would be appreciated

[farishan]

tsup new url: https://tsup.egoist.dev/