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

Installation

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

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

Usage

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

const esbuild = require('esbuild');
const { stylifyEsbuild } = require('@stylify/unplugin');

esbuild.build({
	entryPoints: ['./index.js'],
	bundle: true,
	outfile: './output.js',
	plugins: [
		stylifyEsbuild({
			bundles: [{ files: ['./index.html'], outputFile: './index.css' }],
			// Optional
			// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
			compiler: {
				// https://stylifycss.com/en/docs/stylify/compiler#variables
				variables: {},
				// https://stylifycss.com/en/docs/stylify/compiler#macros
				macros: {},
				// https://stylifycss.com/en/docs/stylify/compiler#components
				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.