Not another styling system, but a lightweight utility to compose CSS styles into standard React.JS components.
npm i @phantomstudios/css-componentsCurrently v0.4.0
Variants are a first-class citizen of CSS Components. With multiple variants, compound variants, and default variants, you can design composable component APIs which are typed automatically.
1const Button = styled('button', {
2 // base styles
3 css: 'btn",
4 variants: {
5 color: {
6 gray: "btnGray",
7 teal: "btnTeal",
8 },
9 outline: {
10 true: "btnOutline",
11 },
12 disabled: {
13 true: "btnDisabled",
14 },
15 },
16 compoundVariants: [
17 {
18 color: "gray",
19 outline: true,
20 css: "btnGrayOutline",
21 },
22 {
23 color: "teal",
24 outline: true,
25 css: "btnTealOutline",
26 }
27 ],
28 defaultVariants: {
29 color: "gray",
30 outline: true,
31 },
32 passthrough: ["disabled"],
33 });We bow our heads to the creators of Stitches. CSS Components is a like-for-like port.
Packed full of useful features like variations, explicit DOM shielding, and a fully-typed API.
CSS Components has a fully-typed API, to minimize the learning curve, and provide the best possible developer experience.
CSS Components comes pack with a CLI to automatically generate components from bog-standard CSS files.
2.3kb
961b
Zero
∞