Using Stylify CSS with Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling and etc.

How to integrate the Stylify CSS into the Webpack

First, install the @stylify/unplugin package using NPM or Yarn:

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

Next, add the following configuration into the webpack.config.js file:

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

const mode = 'development';
const stylifyPlugin = stylifyWebpack({
	bundles: [{
		outputFile: './index.css',
		files: ['./**/*.html'],
		rewriteSelectorsInFiles: mode === 'production'
	}],
	// 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: {},
		// ...
	}
});

module.exports = {
	entry: './input.js',
	mode: mode,
	plugins: [ stylifyPlugin ],
	module: {
		rules: [{
			test: /\.css$/i,
			use: ["style-loader", "css-loader", "postcss-loader"]
		}],
	},
	output: {
		path: path.resolve(__dirname),
		filename: 'index.js',
		libraryTarget: 'umd'
	}
};

Now add the generated index.css file into the index.js entry file.