macaron
navita
macaron | navita | |
---|---|---|
1 | 1 | |
714 | 46 | |
0.7% | - | |
6.6 | 8.0 | |
21 days ago | 21 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.
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
navita
What are some alternatives?
rainbow-sprinkles - Dynamic, theme-driven, style props for vanilla-extract.
tss-react - โจ Dynamic CSS-in-TS solution, based on Emotion
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 ๐
css-to-vanilla-extract - Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.
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.
compiled - A familiar and performant compile time CSS-in-JS library for React.
compiled-css-in-js - A familiar and performant compile time CSS-in-JS library for React. [Moved to: https://github.com/atlassian-labs/compiled]
y - y app that help you create a todos using nextjs
packages - ๐ Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write ๐.