Using Stylify CSS with Rollup.js

Rollup.js is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Integration example for the Rollup.js can be found in integrations examples repository.

How to integrate the Stylify CSS into the Rollup.js

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 rollup.config.js:

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

const stylifyPlugin = stylifyRollup({
	bundles: [{ files: ['./index.html'], outputFile: './index.css' }],
	// Optional
	// Compiler config info
	compiler: {
		variables: {},
		macros: {},
		components: {},
		// ...

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

Now you can run build command. This will generate the stylify.css and mangle selectors in files, if configured.

Where to go next?