@stylify/unplugin

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

Installation

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

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

Usage

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

• Webpack
• Vite.js
• Rollup.js

Configuration

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/en/docs/bundler#configuration
	// Part Array of bundles
	bundles: [],

	// --- Optional
	// Path to config file. If this option is not specified
	// unplugin will try to find the config in process.cwd() dir
	// which is mostly the root of the project.
	// By default it searches for stylify.config.(js|mjs|cjs).
	configFile: '',
	// true | false
	// Default is null. If null value is detected
	// the plugin tries to detect the environment
	dev: null,
	// 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: {},
		// ...
	},
	// See https://stylifycss.com/en/docs/bundler#configuration
	bundler: {
		bundles: []
	}
});

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

External Config File

If you want to move the configuration outside of the project config, use the configFile option mentioned above. By default, unplugin searches for stylify.config.(js|mjs|cjs) files. If any of them is found, it is processed.

Example of config exports is shown below. Define config method is optional. It’s just a helper that provides better Typescript experience.

Common JS (CJS):

const { defineConfig } = require('@stylify/unplugin');

// With defineConfig
module.exports = defineConfig(() => ({
	bundles: [
		{ outputFile: './index.css', files: ['./index.html'] }
	]
}));

// Without defineConfig
module.exports = {
	// ...
}

Modules (ESM):

import { defineConfig } from '@stylify/unplugin';

// With defineConfig
export default defineConfig(() => ({
	bundles: [
		{ outputFile: './index.css', files: ['./index.html'] }
	]
}));

// Without defineConfig
export default {
	// ...
}