Skip to main content
Deno 2 is finally here 🎉️
Learn more

mapcss

Tiny, composable atomic CSS engine

:construction: This project is currently in beta release. All interfaces are subject to change.

What

mapcss is an Atomic-oriented CSS generator.

It is strongly influenced by tailwindcss and unocss, but with the following differences.

  • There are no dependencies like postcss.
  • There are no large classes, and it is written with functional types in mind. As a result, there are no unnecessary bundles, and the browser can be used comfortably.
  • Deno is fully supported.

Usage

mapcss provides several preset.

tailwind classes

import { generate, presetTw } from "https://deno.land/x/mapcss@$VERSION/mod.ts";

const classes = "relative flex text-red-500/20";
const tokens = new Set(classes.trim().split(/\s+/g));

const result = generate({ presets: [presetTw()] }, tokens);
console.log(result.css);
/*
  .relative{position:relative;}
  .flex{display:flex;}
  .text-red-500\/20{color:rgba(239,68,68,0.2);}
*/

License

Copyright © 2021-present TomokiMiyauci.

Released under the MIT license