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
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Styled Components
-
Project 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
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.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.
-
Project mention: React Native + Expo (NextJS) best approaches | reddit.com/r/reactnative | 2023-02-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
-
-
-
InfluxDB
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.
-
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.
- Tailwind
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.
-
-
-
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
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!
-
Project 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/
-
css-in-js
A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js (by andreipfeiffer)
-
Tailwind-Styled-Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Project mention: Is using styled components in this way just inline style with extra steps?? | reddit.com/r/webdev | 2022-07-26If you’re going for shorthand css with styled components, you might want to try Tailwind Styled Components
-
react-redux-saga-boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Project mention: Why are examples of scaled projects so hard to find? | reddit.com/r/reactjs | 2022-05-21 -
next-shopify-storefront
🛍 A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.
-
-
macaron
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-13Hey 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
🎨 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)
-
-
Project mention: 🌈🧁 Rainbow Sprinkles — Dynamic, theme-driven, style props for Vanilla Extract | reddit.com/r/webdev | 2022-12-17
-
Project mention: react-micro-styled: A small, fast, and simple CSS-in-JS solution for React. | reddit.com/r/react | 2022-11-27
-
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
TypeScript css-in-js related posts
- Day 24: Making autocomplete search accessible for React apps with Downshift
- React Native + Expo (NextJS) best approaches
- How To Use Styled-Components In React
- CSS Style Guide for Web Dev?
- CSS In JS - The what, why and How's
- Is CSS in JS best practise?
- Heimdall Esports, an app entirely made by myself with React Native, is now available!
-
A note from our sponsor - InfluxDB
www.influxdata.com | 9 Feb 2023
Index
What are some of the best open-source css-in-j projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | styled-components | 38,203 |
2 | linaria | 10,082 |
3 | twin.macro | 6,903 |
4 | tamagui | 4,670 |
5 | styletron | 3,303 |
6 | typestyle | 3,012 |
7 | jsxstyle | 2,007 |
8 | compiled | 1,802 |
9 | treat | 1,149 |
10 | ui-box | 1,034 |
11 | react-awesome-reveal | 784 |
12 | design-system | 688 |
13 | css-in-js | 684 |
14 | Tailwind-Styled-Component | 634 |
15 | react-redux-saga-boilerplate | 592 |
16 | next-shopify-storefront | 531 |
17 | color2k | 518 |
18 | macaron | 362 |
19 | aesthetic | 198 |
20 | match-media | 124 |
21 | rainbow-sprinkles | 95 |
22 | styled | 58 |
23 | niftycss | 15 |