reddit-frontend VS emotion

Old Reddit Official instance: https://old.reddit.com/ Notes: The only remaining official lightweight UI. Admins claim it will be maintained long term, but who knows. Works fine on desktop. Bad user experience on mobile. /u/palenerd's Compact Reddit Script for Old Reddit Official instance: https://raw.githubusercontent.com/dlmarquis/reddit-compact-tm/main/main.js Notes: Work in progress. Must be installed into an extension-enabled browser (see your options here). Must install the Greasemonkey, Tampermonkey, or Violentmonkey extension into the browser first. Teddit Official instance: https://teddit.net/ Public instances: https://github.com/teddit-net/teddit#instances Libreddit Official instance: https://libreddit.spike.codes Public instances: https://github.com/spikecodes/libreddit#instances Xeddit Official instance: https://www.xeddit.com/ RedditSharp Official instance: https://redditsharp-b7de3.firebaseapp.com/ Updoot Official instance: https://updoot.app/ eddrit Official instance: https://eddrit.com/ Reddit Frontend by junipf Official instance: https://jpf-reddit.netlify.com/ kddit Official instance: https://kddit.kalli.st/ Troddit Official instance: https://www.troddit.com Redditery Official instance: https://www.redditery.com/ RDD Deck Official instance: https://rdddeck.com/ Reddup Official instance: https://www.reddup.co/ Reddit Web Client by premii Official instance: https://reddit.premii.com/ Uforio Official instance: http://web.uforio.com/ Notes: HTTPS doesn't work. Logging in is not recommended. Works fine on desktop. Bad user experience on mobile. Reddium Official instance: https://reddium.vercel.app/

emotion [ https://emotion.sh ]

dang, I never thought about this implication, and I googled the emotionjs repo there's a currently-active open issue regarding this https://github.com/emotion-js/emotion/issues/2928

Over my years of working with React, I’ve loved using CSS-in-JS libraries like Emotion and Styled-components. However, their inherent performance overhead from injecting CSS at runtime and their incompatibility with the latest Next.js features such as App Router and React Server Components (RSC) have always been a nagging issue for me.

An early difficulty I encountered was using UI component libraries like Mantine and Material UI in the new architecture. After looking through some GitHub issues, the culprit is Emotion, a package many component libraries rely on that does not support server rendering.

In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.

I ran into this problem as well. The root cause as I understand it is emotion: https://github.com/emotion-js/emotion/issues/2928

While integrating component libraries, they may not give you full control over the order in which styles are inserted. (Example issue).

Vanilla Extract (CSS Framework) (Alternative: Emotion)