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/docs/stylify/compiler#configuration
            compiler: {
                // https://stylifycss.com/docs/stylify/compiler#variables
                variables: {},
                // https://stylifycss.com/docs/stylify/compiler#macros
                macros: {},
                // https://stylifycss.com/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.

Where to go next?

🚀 Learn how to get started
🔌 Check out @stylify/unplugin configuration
⚙️ Or configure Stylify right away: