Vite

A simple guide to setup Atomizer with Vite.

Create a new project

If you do not have a project setup already, you can create a new one using Vite’s Getting Started page.

npm create vite@latest my-app
cd my-app
npm install

Install the plugin

A vite plugin is available as part of the atomizer-plugins package.

First, install the dependency:

npm i atomizer-plugins -D

Create your Atomizer config

Create the ./atomizer.config.js config file so that Atomizer can find your source files.

export default {
    content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
    ],
}

Update the Vite config

Add the Atomizer plugin to your ./vite.config.js config file.

import { defineConfig } from 'vite';
import { vite } from 'atomizer-plugins';
import atomizerConfig from './atomizer.config.js';

const atomizerPlugin = vite({
    config: atomizerConfig,
    outfile: 'dist/atomizer.css',
});

export default defineConfig(() => {
    return {
        plugins: [atomizerPlugin],
    };
});

Add the Atomizer CSS

Make sure your ./dist/atomizer.css file is built by Vite by adding it to your ./index.html file.

<link href="/dist/atomizer.css" />

Start your build process

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

npm run dev

Begin using Atomizer

Start adding Atomizer classes to your code base, an example index.html file.

<h1 class="Fw(b) Fz(2rem) C(red)">Welcome!</h1>