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 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: {},
        // ...
    }
});

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?

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