Uso de Stylify CSS con Esbuild

Esbuild es un bundler de módulos para JavaScript que compila pequeños trozos de código en algo más grande y complejo, como una librería o una aplicación. El objetivo principal del proyecto Esbuild bundler es traer una nueva era de rendimiento de la herramienta de compilación, y crear un bundler moderno fácil de usar en el camino.

Cómo integrar Stylify CSS en Esbuild

Instalación

Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:

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

Uso

A continuación, añadir crear un archivo de configuración 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' }],
			// Opcional
			// Información de configuración del compilador 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: {},
				// ...
			}
		})
	]
});

Ahora puede ejecutar el comando node esbuild.config.js. Esto generará el output.js y index.css y mangle selectores en los archivos, si está configurado.