rainbow-sprinkles
macaron
| rainbow-sprinkles | macaron | |
|---|---|---|
| 1 | 1 | |
| 195 | 711 | |
| 1.0% | 0.3% | |
| 6.4 | 5.4 | |
| 5 days ago | 17 days ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
rainbow-sprinkles
macaron
-
Show HN: I made Macaron – Type-safe CSS-in-JS with zero-runtime and colocation
Hey HN, my name is Mokshit and I'm really interested in web-performance and web-development. At the time of writing this, I'm a junior in high school.
Macaron is a typesafe CSS-in-JS library with zero runtime, colocation, maximum safety and productivity.
The motivation behind it is that runtime CSS-in-JS libraries, that is most of the CSS-in-JS libs, add alot of bloat to web apps and have a considerable performance drop with a bundle size increase. Alot of them also don't support more performant ways of building web apps like streaming markup. Most of the current compile-time CSS-in-JS libraries try to fix this, but have some or the other drawback like not offering colocation, or not being type-safe.
Today, Macaron does all this with a compiler that extracts all the style declarations at compile-time and converts them to static css files while also letting you author the type-safe styles in the same file as your application code. It supports both - a vanilla styling API and a styled-component API with support for multiple frameworks like SolidJS and React and build tools like Vite and Esbuild. Macaron is currently missing a webpack plugin, but that will also be published soon, making it compatible with almost all bundlers.
There's a ton of room for improvement in this space, and I feel like macaron is a step in that direction.
Github - https://github.com/macaron-css/macaron
What are some alternatives?
css-to-vanilla-extract - Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.
navita - Atomic CSS-in-JS with zero runtime
panda - 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
bayukurnia.com - My personal website built with Astro, Turbo, and Vanilla Extract
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
design-system - Open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.
twin.macro - 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
create-react-ds - React Design System Boilerplate
design-system - Priceline.com Design System