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?