InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises. Learn more →
Top 23 TypeScript css-in-j Projects
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅Project mention: The Future of CSS | dev.to | 2023-02-09
Zero-runtime CSS in JS libraryProject mention: What is the best CSS framework to use with React? why? | reddit.com/r/react | 2023-01-20
https://github.com/callstack/linaria is objectively the best. It's 100% styled component compatible, but with zero runtime which not only makes it substantially faster, but also makes it easy to do things like server side rendering, etc.
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.Project mention: CSS Style Guide for Web Dev? | reddit.com/r/learnprogramming | 2023-01-30
Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.
Universal UI kit and style system for React Native + Web - with an optimizing compiler 🚄Project mention: React Native + Expo (NextJS) best approaches | reddit.com/r/reactnative | 2023-02-03
:zap: Toolkit for component-oriented stylingProject mention: A recruiter asked me this. | reddit.com/r/ProgrammerHumor | 2022-03-03
React is pretty much its own language at this point. With J/TSX. Not even CSS is immune to react's approach of "what everything was proprammatically generated divs?", case and point https://www.styletron.org
Making CSS Typesafe 🌹
Inline style system for React and Preact
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
A familiar and performant compile time CSS-in-JS library for React.Project mention: Why is tailwind so hyped? | reddit.com/r/webdev | 2023-01-13
tags inside SFCs are typically injected as native
tags during development to support hot updates. For production they can be extracted and merged into a single CSS file.
There are also 3rd party CSS libs that do the same thing such as linaria, vanilla-extract, and compiled CSS. Which can be used in the event you're stuck with something that doesn't have baked in support via SFC formats (looking at you React).
These are my preferred ways of handing it.
Option 2 is tailwind, which works backwards.
That is, instead of the above with extraction where you write the styles, and the framework or libs extract them and replace them with class names, it's the other way around.
You're writing class names first (which are essentially aggregated CSS property-values) which then generate and/or reference styles.
It has the advantage of being easy to write (assuming you've got editor LSP, linting, etc), but as you've discovered, it's difficult to read / can get really messy really fast.
As far as all the other claims on the Tailwind site, it's all marketing, at least 80% bullshit.
:candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime. (by seek-oss)
Blazing Fast React UI Primitive
React components to add reveal animations using the Intersection Observer API and CSS Animations.Project mention: React Animation Library | reddit.com/r/reactjs | 2022-09-04
Hi! A new major version of React Awesome Reveal, an animation library for React apps for easily adding revealing effects, is now out 🚀 Give it a try!
Priceline.com Design SystemProject mention: How do you guys add Styles to your React project | reddit.com/r/reactjs | 2022-07-13
This one just has a couple variants I've done, but you can add as many as you want. My dev mentor is a Senior who works on the design system at Priceline and showed me how. You can find the docs for it here: https://priceline.github.io/design-system/
A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js (by andreipfeiffer)
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class renderingProject mention: Is using styled components in this way just inline style with extra steps?? | reddit.com/r/webdev | 2022-07-26
If you’re going for shorthand css with styled components, you might want to try Tailwind Styled Components
Starter kit with react-router, react-helmet, redux, redux-saga and styled-componentsProject mention: Why are examples of scaled projects so hard to find? | reddit.com/r/reactjs | 2022-05-21
🛍 A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.
a color parsing and manipulation lib served in roughly 2kB
Typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity (by macaron-css)Project mention: Show HN: I made Macaron – Type-safe CSS-in-JS with zero-runtime and colocation | news.ycombinator.com | 2023-01-13
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.
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! (by aesthetic-suite)
Universal polyfill for match media API using Expo APIs on mobile
Dynamic, theme-driven, style props for vanilla-extract.Project mention: 🌈🧁 Rainbow Sprinkles — Dynamic, theme-driven, style props for Vanilla Extract | reddit.com/r/webdev | 2022-12-17
Minimal CSS-in-JS styled components solution for React.Project mention: react-micro-styled: A small, fast, and simple CSS-in-JS solution for React. | reddit.com/r/react | 2022-11-27
🎓 A CSS-in-TS, framework-agnostic library to rapidly create reusable designs.
TypeScript css-in-js related posts
Day 24: Making autocomplete search accessible for React apps with Downshift
1 project | dev.to | 6 Feb 2023
React Native + Expo (NextJS) best approaches
1 project | reddit.com/r/reactnative | 3 Feb 2023
How To Use Styled-Components In React
1 project | dev.to | 2 Feb 2023
CSS Style Guide for Web Dev?
5 projects | reddit.com/r/learnprogramming | 30 Jan 2023
CSS In JS - The what, why and How's
2 projects | dev.to | 23 Jan 2023
Is CSS in JS best practise?
1 project | reddit.com/r/reactjs | 21 Jan 2023
Heimdall Esports, an app entirely made by myself with React Native, is now available!
1 project | reddit.com/r/reactnative | 20 Jan 2023
A note from our sponsor - InfluxDB
www.influxdata.com | 9 Feb 2023
What are some of the best open-source css-in-j projects in TypeScript? This list will help you: