The CSS Odyssey: Why I Turned back to CSS After Trying Everything Else

1. pigment-css

   1 2 1,119 5.4 TypeScript

   ⚠️ 𝐀𝐥𝐩𝐡𝐚 𝐩𝐡𝐚𝐬𝐞, currently, on hold. Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.

   

   I wasn't alone facing this issue. Zero-runtime CSS-in-JS promised to solve it. Solutions like Linaria and Pigment-CSS (MUI's Emotion successor) extract CSS at build time, generating static stylesheets while preserving the CSS-in-JS developer experience.

2. AppSignal

   www.appsignal.com sponsored

   AppSignal knows why the f*#k it crashed. Stop vibe-debugging. Every exception, every backtrace, grouped so you see patterns, not noise.

   

3. postcss-plugins

   2 19 1,052 9.8 CSS

   PostCSS Tools and Plugins

   

   Media query has limitations. @media(min-width: var(--breakpoint-lg)) won't work. PostCSS plugins support custom media query @custom-media --small-viewport (max-width: 30rem);, then @media (--small-viewport). Still duplications, but at least I can have breakpoints all defined in one file.

4. unified

   3 18 5,028 6.5 JavaScript

   Parse, inspect, transform, and serialize content with syntax trees

   

   The breaking point came when integrating with the unifiedjs ecosystem. After 8 hours of removing code piece by piece to isolate a build error—with completely non-descriptive error messages—I gave up.

5. shadcn/ui

   4 375 123,042 9.8 TypeScript

   A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

   

   Tailwind is likely the most popular CSS solution library. There are massive utilities and plugins built around it. Popular UI component libraries like shadcn/ui use Tailwind by default, making it even more popular. With so many good words, why not give it a try?

6. styled-components

   5 250 41,122 9.4 TypeScript

   Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.

   

   Diving into CSS-in-JS wasn't really a technical choice. My wife, as a UX designer, had good words about Material Design, so I headed to MUI without thinking too much. At that time, Emotion was the first-class citizen there. Meanwhile, my company's UI component library chose styled-components for styling. Both are widely used CSS-in-JS libraries.

7. material-ui-docs

   6 168 338 9.9 JavaScript

   ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository: http://github.com/mui/material-ui.

   

   Diving into CSS-in-JS wasn't really a technical choice. My wife, as a UX designer, had good words about Material Design, so I headed to MUI without thinking too much. At that time, Emotion was the first-class citizen there. Meanwhile, my company's UI component library chose styled-components for styling. Both are widely used CSS-in-JS libraries.

8. linaria

   7 53 12,350 8.1 TypeScript

   Zero-runtime CSS in JS library

   

   I wasn't alone facing this issue. Zero-runtime CSS-in-JS promised to solve it. Solutions like Linaria and Pigment-CSS (MUI's Emotion successor) extract CSS at build time, generating static stylesheets while preserving the CSS-in-JS developer experience.

9. Kargo

   akuity.io sponsored

   Stop Scripting Promotions. Start Shipping with Kargo. Kargo automates promotion across dev, staging, and prod with approval gates and verification. Open source, built by the team behind Argo CD. Download now.

   

Suggest a related project