Show HN: I made Macaron – Type-safe CSS-in-JS with zero-runtime and colocation

• macaron

  1 714 6.6 TypeScript

  Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity (by macaron-css)

  

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

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project