- 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
:construction: This project is currently in beta release. All interfaces are subject to change.
Features
⚗️ Flexibility
Mapping is free. And you can define a very flexible mapping syntax.
🌐 Universal
It works with Browser, Deno, and Node.js (package name wanted) without polyfill.
The bundle size has been taken into consideration, and the code base is created with pure functions.
🔝 Orderless(experiment)
User does not need to care about the order of the CSS Statement at all. Therefore, there is no concept of
order
orlayer
.The RuleSet will be sorted by the number of properties in the Declaration Block.
Usage
mapcss provides several preset.
-
TailwindCSS utility classes and modifier syntax.
-
Typography utility like tailwindcss-typography or @unocss/preset-typography.
-
SVG markup as CSS. By using the iconifyJSON converter, you can use
iconify.json
as a pure CSS icon.
For example, using presetTw
, you can use the utility class of
TailwindCSS.
import { generate, 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 = generate({ preset: [presetTw()] }, code);
console.log(result.css);
/*
.relative{position:relative;}
.flex{display:flex;}
.text-red-500\/20{color:rgb(239 68 68/.2);}
*/
You may need --unstable
and --allow-read
flag to Deno.
What
mapcss is an Atomic-oriented CSS generator.
It is strongly influenced by TailwindCSS and UnocCSS, but with the following differences.
identifier to CSS-in-JS
The essence of mapcss is to map an identifier to a CSS Statement with JavaScript Object notation (CSS-in-JS).
A Map is a Plain Object with a hierarchical structure, which can be expressed concisely with Object literals.
For example, the following CSS Statement can be mapped as follows:
.inline-block{display: inline;}
import type { CSSMap } from "https://deno.land/x/mapcss@$VERSION/mod.ts";
const cssMap: CSSMap = {
inline: {
block: { display: "inline" },
},
};
It is also possible to express dynamic identifiers using regular expressions.
.z-123{z-index: 123;}
import type { CSSMap } from "https://deno.land/x/mapcss@$VERSION/mod.ts";
const rePositiveNumber = /^(\d+)$/;
const cssMap: CSSMap = {
z: [
// It actually checks the validity of the numbers
[rePositiveNumber, ([, number]) => ({ zIndex: Number(number) })],
],
};
We support the first class because it is the most frequent mapping to CSS declaration block.
For the definition of any CSS Statement, CSS-in-JS representation is also supported.
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
.container{width: 100%;}
import type { CSSMap } from "https://deno.land/x/mapcss@$VERSION/mod.ts";
const cssMap: CSSMap = {
// className: .container
container: (_, { className }) => ({
type: "css",
value: {
"@media (min-width: 640px)": {
[className]: {
maxWidth: "640px",
},
},
[className]: {
width: "100%",
},
},
}),
};
The Object search model
Explore the object hierarchy based on identifier. Hierarchy traversal is much more performant than flat traversal.
For example, the computational complexity of regular expression matching from a flat structure is O(N).
If the search finds CSS-in-JS, it will be converted to AST. The AST currently uses the postcss AST.
This will benefit from the postcss ecosystem.
Finally, we show the conversion transition.
token -> DeepMap { identifier -> CSS-in-JS } -> AST -> Style Sheet
License
Copyright © 2021-present TomokiMiyauci.
Released under the MIT license