Uso de Stylify CSS con Rollup.js

Rollup.js es un agrupador de módulos para JavaScript que compila pequeños fragmentos de código en algo más grande y complejo, como una biblioteca o una aplicación.

Cómo integrar el CSS de Stylify en el Rollup.js

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

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

A continuación, añadir crear un archivo de configuración rollup.config.js:

const { stylifyRollup } = require('@stylify/unplugin');
const postcss = require('rollup-plugin-postcss');

const stylifyPlugin = stylifyRollup({
	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: {},
		// ...
	}
});

export default {
	input: 'input.js',
	plugins: [stylifyPlugin, postcss()],
	output: { file: 'index.js', format: 'umd' }
};

Ahora puedes ejecutar el comando build. Esto generará el stylify.css y mangle selectores en los archivos, si está configurado.