atom css engine inspired by antfu

Features

• ⚡️ It's FAST
• 🧩 On-demand CSS utilities
• 🔥 Hot module replacement (HMR)
• 🎳 Support Variant Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
• 🌑 Support Dark mode
• 📱 Support Screen BreackPoints

Documentation

Read the documentation for more details.

install

npm install @jackiew/atomcss

Quick Start

In vite.config.ts

import { AtomCss } from "./packages/index";

export default defineConfig({
  plugins: [AtomCss({})],
});

Custom Rules

css rules

...
plugins: [
    AtomCss({
      rules: [
        [/^text-big$/, [["font-size", "48px"]]],
        // ignore first parameter
        [/^(?:width|w)-(\d+)%$/, ([, val])=>[["width", `${val}%`]]],
      ],
      // etc..
    }),
  ],
...

Browser Support

| Edge | Chrome | Safari | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | | Edge | Last two versions | Last two versions |

License

MIT License © 2022 JackieWong

Looking forward to your suggestion!!