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>