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

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?

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