CSS in JS ​

UnoCSS & macaron are nice. I personally prefer using Vanilla Extract.

Links ​

• Linaria - Zero-runtime CSS in JS library.
• Tachyons React App - Tachyons implemented with emotion and styled-system. Sits on create-react-app.
• xstyled - Consistent theme based CSS for styled-components. (Web)
• Treat - Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
• reshadow - Markup and styles that feel right.
• Goober - Less than 1KB css-in-js solution.
• styled-jsx - Full CSS support for JSX without compromises.
• CSS-Zero - Zero-runtime CSS-in-JS.
• The unseen performance costs of modern CSS-in-JS libraries in React apps (2019)
• Max Stoiber - CSS in JS evolution (2019)
• Styled Components, Styled Systems and How They Work (2019)
• styled-breakpoints - Simple and powerful tool for creating breakpoints in styled components and emotion.
• @compiled/css-in-js - Typescript first CSS in JS library that compiles away to nothing.
• Every Layout - React + styled-components implementations of the layouts from every-layout.dev
• Glaze - CSS-in-JS framework for building approachable design systems.
• Nyan CSS - Write plain CSS while reaping benefits of CSS-in-JS.
• Stitches - CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. (Web) (Twitter) (Tweet)
• Performance comparison of css approaches
• Introducing stitches - atomic CSS-IN-JS inspired by Tailwind CSS (2020)
• mystical - Small CSS-in-JS library for atomised constraint based design.
• otion - Atomic CSS-in-JS with a featherweight runtime.
• CSS to JS - Transform between CSS, JS Objects and JSX props.
• cxs - Fast af css-in-js in 0.7kb.
• Stiches - Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience. (Web) (Talk)
• Fela - State-Driven Styling in JavaScript. (Docs)
• Reverse Engineering Styled Components (2020)
• clsx - Tiny utility for constructing className strings conditionally.
• Stylewars - Tiny CSS in JS library that requires no tooling.
• Rosebox - CSS in Typescript. (Web)
• System Props - Inspired by styled-system, a responsive, theme-based style props for building design systems with React. (Web)
• The styled-components happy path (2021)
• CSS-in-TS research analysis
• theme-in-css - Type-safe CSS custom properties (CSS variables) for theming purpose.
• vanilla-extract - Zero-runtime Stylesheets-in-TypeScript. (Talk) (Theming a React Application with Vanilla Extract)
• Stitches Zigzag - Tailwind inspired tools to build fast with Stitches.
• Stylin - Build-time CSS library that offers an elegant way to style React components.
• Sprinkles - Zero-runtime atomic CSS framework for vanilla-extract.
• Fower - Utility-first CSS in JS library for rapid UI development.
• Demystifying styled-components (2021)
• Tagged Template Literals - The Magic Behind Styled Components (2021)
• taddy - Compile-time Atomic CSS-in-JS.
• CSS Modules-in-CSS Module Scripts (2021)
• UnoCSS - Instant on-demand atomic CSS engine. (Web) (Reimagine Atomic CSS) (unocss-preset-typography)
• UnoCSS Interactive Docs
• tss-react - makeStyles is dead, long live makeStyles.
• Griffel - CSS-in-JS with ahead-of-time compilation.
• vanilla-classnames - Better classnames utility for vanilla-extract.
• freestyler - 5th generation CSS-in-JS library.
• Stitches Mixins - Shorthand utils for Stitches.
• Token CSS
• split-classnames - Splits long className attributes to make them more readable.
• TypeScript language service plugin for CSS Modules
• Rainbow Sprinkles - Dynamic, theme-driven, style props for vanilla-extract.
• Comptime CSS
• CSS(SCSS/SASS) to vanilla-extract - Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.
• Airbnb's Trip to Linaria (2022)
• CSS Out JS - Author styles collocated in JS, pull them out into static CSS on build. No runtime dependency.
• Why We're Breaking Up with CSS-in-JS (2022) (Tweet)
• Style performance and concurrent rendering (2022)
• En Vogue - Zero-runtime CSS-in-JS with static CSS extraction.
• Writing Performant CSS with vanilla-extract (2022) (Reddit)
• ecsstatic - Predefinite CSS-in-JS library for Vite.
• box-extractor - Static code extraction. Zero-runtime CSS-in-TS Box.
• Kuma UI - Ultra Fast, Zero Runtime, Utility-First CSS-in-JS.
• Style Variants - Solution for creating dynamic and reusable styles.
• Panda - Universal CSS Framework for Design Systems. (Web)
• excss - Small, simple, zero-runtime CSS-in-JS library with just two APIs.