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.

Integration example for the Webpack can be found in integrations examples repository.

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.

Where to go next?