Install
Beta

Atomic CSS Modules

Write CSS. Ship atoms.

Atomic classes keep stylesheets small. One declaration. One shared class. Reused everywhere. That's the model behind projects like Tailwind CSS and Panda CSS; providing even the most complex apps with bundles that plateau when using a design system. The usual tradeoff is a different authoring strategy.

This package keeps things simple using CSS Modules. At build time, it pulls repeated declarations into a global atomic registry and rewrites your classes to short hashes. Utility-class reuse, without learning a new syntax.

See it in action

.button {
  padding-inline: 0.75rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: oklch(94.892% 0.00288 264.62562);
  font-weight: 600;
}

.input {
  padding-inline: 0.75rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid oklch(31.177% 0.0083 255.56204);
}

Install

npm install @zslabs/atomic-css-modules
vite.config.ts
import { defineConfig } from 'vite'
import { atomicCssModules } from '@zslabs/atomic-css-modules/vite'

export default defineConfig({
  plugins: [
    atomicCssModules({
      include: ['src/**/*.module.css'],
    }),
  ],
})

Stylelint

@zslabs/stylelint-atomic-css-modules flags selectors and declarations that cannot be composed. Combinators, compounds, and a shorthand overlapping a longhand show up in the editor.

.card {
  margin: 0;
  margin-left: 4px;
}

Declaration "margin-left" cannot be composed (shorthand-conflict: shorthand plus an overlapping longhand)atomic-css-modules/no-non-composable