Using Stylify CSS with Esbuild

Esbuild is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. The main goal of the Esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.

How to integrate the Stylify CSS into the Esbuild


First, install the @stylify/unplugin package using NPM or Yarn:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin


Next, add create a configuration file esbuild.config.js:

const esbuild = require('esbuild');
const { stylifyEsbuild } = require('@stylify/unplugin');{
	entryPoints: ['./index.js'],
	bundle: true,
	outfile: './output.js',
	plugins: [
			bundles: [{ files: ['./index.html'], outputFile: './index.css' }],
			// Optional
			// Compiler config info
			compiler: {
				variables: {},
				macros: {},
				components: {},
				// ...

Now you can run node esbuild.config.js command. This will generate the output.js and index.css and mangle selectors in files, if configured.

Where to go next?