Unplugin is an universal plugin for Webpack, Vite.js and Rollup.js and Esbuild.
Under the hood it uses unplugin.


Unplugin can be installed only via CLI like NPM or Yarn:

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


Unplugin can be used within Webpack, Vite.js and Rollup.js. Each tool has it's own documentation page:


The configuration for unplugin is always the same for each bundler

import {
    unplugin, defineConfig
    stylifyVite, stylifyRollup, stylifyWebpack, stylifyEsbuild
} from '@stylify/unplugin';

const config = defineConfig({
    // --- Required
    // See https://stylifycss.com/docs/bundler#configuration
    // Part Array of bundles
    bundles: [],

    // --- Optional
    // true | false
    // Default is null. If null value is detected
    // the plugin tries to detect the environment
    dev: null,
    // https://stylifycss.com/docs/stylify/compiler#configuration
    compiler: {}
    // See https://stylifycss.com/docs/bundler#configuration
    bundler: {},
    // Id is a file name
    // Return true, if the file type or name should be processed
    // Example is with html suffix
    // By default Stylify CSS checks if the file is not in node_modules
    // and also checks for a various file types
    // listed here https://github.com/stylify/packages/blob/master/packages/unplugin/src/index.ts
    transformIncludeFilter: (id) => id.endsWith('html')

let webpackPlugin = stylifyWebpack(config);
let vitePlugin = stylifyVite(config);
let rollupPlugin = stylifyRollup(config);
let esbuildPlugin = stylifyEsbuild(config);

Where to go next?