CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class DX. A project by @WorkOS.
- Tweets 387
- Following 0
- Followers 4,622
- Likes 852
ALT The following CSS: ``` :scope { color: red; @bp1 { color: black; } @bp2 { color: purple; } } ```
ALT The following CSS: ``` :scope { color: red; @when bp1 { color: black; } @when bp2 { color: purple; } } ```
ALT The following JavaScript: ``` createCss({ color: "red", "@bp1": { color: "black" }, "@bp2": { color: "purple" } }) ```
![The following JavaScript:
```
createCss({
color: "red",
["@when --bp1"]: {
color: "black"
},
["@when --bp2"]: {
color: "purple"
}
})
```](/pic/orig/media%2FEwCZlRMWYAMl0J0.png)
ALT The following JavaScript: ``` createCss({ color: "red", ["@when --bp1"]: { color: "black" }, ["@when --bp2"]: { color: "purple" } }) ```
![The following JavaScript:
```
createCss({
color: "red",
[when.bp1]: {
color: "black"
},
[when.bp2]: {
color: "purple"
}
})
```](/pic/orig/media%2FEwCZl8tXIAEPlT2.png)
ALT The following JavaScript: ``` createCss({ color: "red", [when.bp1]: { color: "black" }, [when.bp2]: { color: "purple" } }) ```
ALT The following JavaScript: ``` createCss({ color: "red", "@bp1": { color: "black" }, "@bp2": { color: "purple" } }) ```
ALT The following JavaScript: ``` createCss({ color: "red", ["@when --bp1"]: { color: "black" }, ["@when --bp2"]: { color: "purple" } }) ```
ALT The following JavaScript: ``` createCss({ color: "red", [when.bp1]: { color: "black" }, [when.bp2]: { color: "purple" } }) ```
ALT The following CSS: ``` @when media(width >= 400px) and media(prefers-color-scheme: dark) and supports(display: flex) { /* all the styles */ } ```
