atomizer-plugins

1.2.1 verified Fri May 01 auth: no javascript

A set of plugins for esbuild, Rollup, Vite, and Webpack that integrate Atomizer, an atomic CSS generator. Current stable version is 1.2.1. The library uses the unplugin system for unified plugin API across all build tools. Released under the MIT license. Key differentiator: single API for multiple bundlers, TypeScript definitions included. Release cadence is irregular; latest version published 6 months ago.

Common errors

error Error: Cannot find module 'atomizer-plugins' ↓

cause Package not installed or not in node_modules

fix

Run 'npm install atomizer-plugins' and ensure package is present.

error SyntaxError: The requested module 'atomizer-plugins' does not provide an export named 'default' ↓

cause Default import used instead of named import

fix

Use 'import { rollup } from 'atomizer-plugins';' instead of 'import atomizer from 'atomizer-plugins';'

error Error: Plugin 'atomizer-plugins' is using unplugin v0.x which is not compatible with unplugin v1.x ↓

cause Conflicting unplugin versions

fix

Pin unplugin to version ^0.x in your project's package.json.

error TypeError: atomizer is not a function ↓

cause Wrong import or incorrect usage of plugin

fix

Ensure you import the correct named export (e.g., { vite } ) and call it as a function inside plugins array.

Warnings

breaking Package version 1.x uses unplugin v0.x; unplugin v1.x changed plugin API (object vs function) ↓

fix Ensure unplugin is pinned to compatible version (^0.x) or upgrade atomizer-plugins when v2 is released.

gotcha Plugin must be placed after JS/TS processing plugins (e.g., react) to generate correct atomic classes ↓

fix Ensure atomizer-plugins is the last plugin in the array.

gotcha ESM-only package; using require() in CommonJS context works only if package is imported after Node's ESM resolution ↓

fix Use dynamic import: const { rollup } = await import('atomizer-plugins'); or set project to type: 'module'.

deprecated deprecated: The 'config' option does not accept a file path string; must pass an object ↓

fix Provide config object directly, not a path string. Use require() or import as shown in docs.

Install

npm install atomizer-plugins

yarn add atomizer-plugins

pnpm add atomizer-plugins

Imports

esbuild
wrong
```
const esbuild = require('atomizer-plugins').esbuild
```
correct
```
import { esbuild } from 'atomizer-plugins'
```
ESM-only package; named export matches build tool name. Cannot use default import.
rollup
wrong
```
const { atomizer } = require('atomizer-plugins')
```
correct
```
import { rollup } from 'atomizer-plugins'
```
Export name is 'rollup', not 'atomizer'. CJS require works but named export is correct.
vite
wrong
```
import vite from 'atomizer-plugins'
```
correct
```
import { vite } from 'atomizer-plugins'
```
Named export, not default. Provides explicit TypeScript types when imported this way.
webpack
wrong
```
import { atomizerWebpack } from 'atomizer-plugins'
```
correct
```
import { webpack } from 'atomizer-plugins'
```
Export name is exactly 'webpack'. There is no alternative naming like 'atomizerWebpack'.

Quickstart

Shows how to configure the Vite plugin with Atomizer rules for atomic CSS classes.

// vite.config.ts
import { defineConfig } from 'vite';
import { vite as atomizer } from 'atomizer-plugins';

export default defineConfig({
  plugins: [
    atomizer({
      config: {
        rules: [
          { '.D(b)': { display: 'block' } },
          { '.C(#fff)': { color: '#fff' } },
        ],
      },
    }),
  ],
});