- 1.0.0-beta.58Latest
- 1.0.0-beta.57
- v1.0.0-beta.56
- v1.0.0-beta.55
- v1.0.0-beta.54
- v1.0.0-beta.53
- v1.0.0-beta.52
- v1.0.0-beta.51
- v1.0.0-beta.50
- v1.0.0-beta.49
- v1.0.0-beta.48
- v1.0.0-beta.47
- v1.0.0-beta.46
- v1.0.0-beta.45
- v1.0.0-beta.44
- v1.0.0-beta.43
- v1.0.0-beta.42
- v1.0.0-beta.41
- v1.0.0-beta.40
- v1.0.0-beta.39
- v1.0.0-beta.38
- v1.0.0-beta.37
- v1.0.0-beta.36
- v1.0.0-beta.35
- v1.0.0-beta.34
- v1.0.0-beta.33
- v1.0.0-beta.32
- v1.0.0-beta.31
- v1.0.0-beta.30
- v1.0.0-beta.29
- v1.0.0-beta.28
- v1.0.0-beta.27
- v1.0.0-beta.25
- v1.0.0-beta.24
- v1.0.0-beta.23
- v1.0.0-beta.22
- v1.0.0-beta.21
- v1.0.0-beta.20
- v1.0.0-beta.19
- v1.0.0-beta.18
- v1.0.0-beta.17
- v1.0.0-beta.16
- v1.0.0-beta.15
- v1.0.0-beta.14
- v1.0.0-beta.13
- v1.0.0-beta.12
- v1.0.0-beta.11
- v1.0.0-beta.10
- v1.0.0-beta.9
- v1.0.0-beta.8
- v1.0.0-beta.7
- v1.0.0-beta.6
- v1.0.0-beta.5
- v1.0.0-beta.4
- v1.0.0-beta.3
- v1.0.0-beta.2
- v1.0.0-beta.1
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.
The essence of mapcss is a mapping of CSS to a JavaScript Object (often referred
to as CSS in JS. We’ll call it JSS
for simplicity).
The mapping can be defined as a hierarchy of Objects, and is a generic data structure that allows the use of regular expressions.
If the mapped JSS is hit, the JSS will be converted to CSS AST. Currently, conversion to postcss AST is performed.
After that, the free world of AST will expand.
It is strongly influenced by tailwindcss and unocss, but with the following differences.
- Mapping is free. And you can define a very flexible mapping syntax.
- Deno is fully supported.
Usage
mapcss provides several preset.
tailwind classes
import {
generateStyleSheet,
presetTw,
} from "https://deno.land/x/mapcss@$VERSION/mod.ts";
const code = `<div className="relative flex">
<p className="text-red-500/20"></p>
</div>
`;
const result = generateStyleSheet({ preset: [presetTw()] }, code);
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