css-in-js

Open-source projects categorized as css-in-js | Edit details
Language filter: + JavaScript + TypeScript

Top 23 css-in-j Open-Source Projects

  • GitHub repo styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: 🖋Adding Fonts in Next.js (local fonts along with styled components) | dev.to | 2022-01-07
  • GitHub repo react-native-web

    React Native Components and APIs for the Web

    Project mention: Building a web app + mobile app | reddit.com/r/reactnative | 2022-01-19

    You can write your mobile app with React Native at first and then convert it to web using https://github.com/necolas/react-native-web](react-native-web) which is used by Twitter for example. Native components can be specified in *.native.ts, *.android.ts or *.ios.js, and web components in *.web.ts. Most native APIs are available in react-native-web but you might want to customize them a bit depending on platform UX.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    Project mention: Yet another generic startpage | reddit.com/r/startpages | 2022-01-16

    Emotion as CSS library

  • GitHub repo stylelint

    A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

    Project mention: What does "senior" mean as a React developer? | reddit.com/r/reactjs | 2022-01-08

    This is what I use in my projects: Prettier to format the code. Eslint (for react) and Stylelint (for styles). You can additionally use husky to run the above linters and formaters before committing the code, you can also run some tests automatically before every commit, although depending on the number of tests, this can take some time and can be a bit annoying. In GitHub/GitLab, we also have a set of actions on our pipeline to run all of these linters and tests every time we create a merge request or deploy some new code (CI/CD).

  • GitHub repo linaria

    Zero-runtime CSS in JS library

    Project mention: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11

    Linaria (Most popular, support React and Svelte)

  • GitHub repo styled-system

    ⬢ Style props for rapid UI development

    Project mention: TaskEz: Design to Code - Chapter 1 | dev.to | 2021-11-27

    You can read more about styled system here, https://styled-system.com/.

  • GitHub repo styled-jsx

    Full CSS support for JSX without compromises

    Project mention: How to achieve this in Next.js Built-In CSS/SCSS Support? | reddit.com/r/reactjs | 2021-11-17
  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • GitHub repo JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.

    Project mention: Feel like that studying as a self-taught is taking me further than studying at university | reddit.com/r/webdev | 2021-10-25

    I started writing a long response, but I want to add that a simple CRA + JSS + TS (named exports only) stack solves or abstracts away most of these issues.

  • GitHub repo Aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

    Project mention: The React roadmap for beginners you never knew you needed. | dev.to | 2021-11-23

    Aphrodite

  • GitHub repo twin.macro

    🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

    Project mention: I am running tailwind in vscode in react, but when I try to view my page, no tailwind is working | reddit.com/r/tailwindcss | 2021-12-18
  • GitHub repo stitches

    CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

    Project mention: Debutur | dev.to | 2022-01-13

    Stitches

  • GitHub repo typography

    A powerful toolkit for building websites with beautiful design

    Project mention: Typography.js installation workflow | reddit.com/r/reactjs | 2021-04-16
  • GitHub repo styletron

    :zap: Toolkit for component-oriented styling

    Project mention: Tailwind CSS v3 | news.ycombinator.com | 2021-12-09

    Some technical thoughts as someone who could care less about fanboyism:

    - One point where atomic CSS frameworks are supposed to shine over conventional CSS is bundle size, since they (at least the good ones) compile to only a single rule for any used value, rather than potentially repeating rules for semantically different classes.

    - Another point where atomic CSS frameworks shine is just sheer volume of banging code out. When the bulk of your output is visual, mastering tools based on shorthands like tailwind, emmet, etc can feel very productive.

    - Purely atomic CSS frameworks can make some workflows more difficult, e.g. by having too granular call sites and not allowing "let's see what happens to the overall theme if I do this design change" iterative style of work, or because workflows that edit CSS on the fly via browser devtools can no longer be used to limit impact within semantic lines (e.g. "I want to change padding only on buttons, without breaking everything else that happens to depend on the same padding value"). There are both design-oriented and debugging-oriented workflows that are affected in similar ways.

    - You generally don't get visual regressions at a distance w/ atomic CSS. This matters at organizations where desire for pixel precision and simultaneously fickle design teams are the norm. But conversely, "can we just change the font size to be a bit bigger across the site" can often run into issues of missed spots. On a similar note, designs may become inconsistent across a site over time due to the hyper local nature of atomic CSS oriented development.

    - Custom rules may as well be written in APL[0]; they usually aren't documented and it takes a "you-gotta-know-them-to-know-them" sort of familiarity to be able to work with them (or get back to them after a while).

    - There are some tools that mix and match atomic CSS with other paradigms. For example, styletron[0] can output atomic CSS for the bundling benefits, but looks like React styled components from a devexp perspective, and has rendering modes that output traditional-looking debug classes for chrome devtool oriented workflows.

    The main theme to be aware of: proponents rarely talk of maintenance, so beware of honeymoon effect. Detractors often omit that traditional CSS (especially at scale) also requires a lot of diligence to maintain. So think about maintenance and how AOP[1] vs hyperlocal development workflows interact with your organization's design culture.

    [0] https://www.styletron.org/

    [1] https://en.wikipedia.org/wiki/Aspect-oriented_programming

  • GitHub repo typestyle

    Making CSS Typesafe 🌹

    Project mention: My tech choices for building a modern SPA | dev.to | 2022-01-09

    I like TypeStyle for component-scoped styling. With TypeStyle, I can use the full power of a programming language (TypeScript) to build up my styles and share them among components. And I can nicely co-locate the styles in the same file as my components.

  • GitHub repo goober

    🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API

    Project mention: Zero runtime CSS-in-JS : Is this where great DX meets top-notch Web Performance? (sharing our experience) | reddit.com/r/reactjs | 2021-11-19

    Consider adding Goober too to the mix.

  • GitHub repo Fela

    State-Driven Styling in JavaScript

  • GitHub repo jsxstyle

    Inline style system for React and Preact

  • GitHub repo twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

    Project mention: Twind: Tailwind-in-JS | news.ycombinator.com | 2021-11-24
  • GitHub repo compiled

    A familiar and performant compile time CSS-in-JS library for React.

    Project mention: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11

    Compiled (Compile time CSS-in-JS solution from Atlassian)

  • GitHub repo tamagui

    create much faster design systems that work on react native + react native web thanks to an optimizing compiler.

    Project mention: Tailwind CSS v3 | news.ycombinator.com | 2021-12-09

    Shameless self-plug but if you'd like the same idea but with an optimizing compiler that outputs clean CSS at build-time, try Tamagui (https://tamagui.dev).

  • GitHub repo vue-styled-components

    Visual primitives for the component age. A simple port for Vue of styled-components 💅

    Project mention: Dynamic styling in Vue.js | dev.to | 2021-10-11

    Styled-components is a famous CSS-in-JS library used especially by React developers...and you can use it with Vue.js too 😉. You can find the package here, please note that it's compatible only with Vue 2.x. Install the package (using yarn as the package manager):

  • GitHub repo design-system

    Priceline.com Design System

    Project mention: 5 Underrated React Design Systems for 2021 | dev.to | 2021-02-18

    Github

  • GitHub repo react-awesome-reveal

    React components to add reveal animations using the Intersection Observer API and CSS Animations.

    Project mention: I made Starbucks ! 🚀🔥 | reddit.com/r/reactjs | 2021-01-27

    Here is the GitHub repo if your interested https://github.com/dennismorello/react-awesome-reveal

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-01-19.

css-in-js related posts

Index

What are some of the best open-source css-in-j projects? This list will help you:

Project Stars
1 styled-components 35,734
2 react-native-web 19,644
3 emotion 14,306
4 stylelint 9,416
5 linaria 8,509
6 styled-system 7,144
7 styled-jsx 6,831
8 JSS 6,598
9 Aphrodite 5,259
10 twin.macro 5,255
11 stitches 4,562
12 typography 3,707
13 styletron 3,226
14 typestyle 2,941
15 goober 2,362
16 Fela 2,129
17 jsxstyle 1,994
18 twind 1,907
19 compiled 1,537
20 tamagui 1,271
21 vue-styled-components 1,241
22 design-system 643
23 react-awesome-reveal 507
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms