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.

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 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' }
};

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