Atomizer

Rollup

A simple guide to setup Atomizer with Rollup.

On this page

Install the plugin

A Rollup plugin is available as part of the atomizer-plugins package. Install the package in your project first.

npm i atomizer-plugins -D

Create your Atomizer config

Make sure Atomizer can parse your project files in your atomizer.config.js file.

module.exports = {
    content: [
        './src/**/*.{html,js}',
    ],
}

Update the config

Then configure your rollup.config.js to include the plugin.

import { rollup } from 'atomizer-plugins';

const atomizer = rollup({
    /* options */
    config: atomizerConfig,
    outfile: 'dist/atomizer.css',
});

export default {
    // ... rollup config
    plugins: [atomizer],
};

Configuration information and examples are available in the atomizer-plugins repository.

Start your build process

Run your build setup as configured in your project’s package.json.

npm run dev

Begin using Atomizer

Add the generated Atomizer CSS to your template, then start adding Atomizer classes to your markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/dist/atomizer.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>