JavaScript css-in-js

Open-source JavaScript projects categorized as css-in-js | Edit details

Top 22 JavaScript css-in-j Projects

  • 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.

  • emotion

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

    Project mention: Setting up Create React App with @emotion/react v11 and and TypeScript 4.5.5 (Bonus: replacing npm with yarn) | dev.to | 2022-01-23

    A quick, straightforward and (as of January 2022) up-to-date guide for setting up create-react-app with the latest versions of emotion (11.7.1) and TypeScript (4.5.5).

  • OPS

    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.

  • 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).

  • 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/.

  • 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
  • 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.

  • 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: What's your favorite new library you started using in your app? | reddit.com/r/reactjs | 2022-01-24

    trpc and twin.macro

  • 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.

  • 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

  • stitches

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

    Project mention: Let me critique your site's FE perf | reddit.com/r/Frontend | 2022-01-21

    Your FCP is extremely fast, by virtue of you having no blocking resources. Good job! Stitches is new to me, do you like it?

  • typography

    A powerful toolkit for building websites with beautiful design

    Project mention: Typography.js installation workflow | reddit.com/r/reactjs | 2021-04-16
  • 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

  • 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.

  • Fela

    State-Driven Styling in JavaScript

  • 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):

  • design-system

    Priceline.com Design System

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

    Github

  • babel-plugin-tailwind-components

    Use Tailwind with any CSS-in-JS library

  • torus

    Torus is an event-driven model-view UI framework for the web, focused on being tiny, efficient, and free of dependencies. (by thesephist)

    Project mention: Ask HN: What are some tools / libraries you built yourself? | news.ycombinator.com | 2021-05-16

    At this point I've made a habit out of building homebrew tools and languages. Very few of these are purely because I was dissatisfied with off-the-shelf solutions; many of these just exist because I thought it would be fun/educational/challenging to build an X for myself from scratch.

    I've made

    - A dynamic programming language, Ink (https://dotink.co), which runs in "production" (for whatever that means for side projects) for around a dozen projects written in it.

    - A compiler to compile that to JavaScript (https://github.com/thesephist/september)

    - A bunch of language tooling around that language, like syntax highlighters, editor plugins, code formatters (for example, the code formatter https://github.com/thesephist/inkfmt)

    - A small UI library (https://github.com/thesephist/torus)

    - A suite of productivity tools (https://thesephist.com/posts/tools/) like notes, todos, shared whiteboard, contacts/CRM

    - Twitter client (https://github.com/thesephist/lucerne/)

    - Theres a few dozen more at (https://thesephist.com/projects/) :)

    Many of these end up building on top of each other, so across the few dozen projects built on top of these tools they form a nice dependency graph -> https://twitter.com/thesephist/status/1367675987354251265

  • vue-emotion

    Seamlessly use emotion (CSS-in-JS) with Vue.js

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

    Besides of styled-components library, there are also other CSS-in-JS libraries usable for Vue.js, for example Emotion through vue-emotion package.

  • jest-glamor-react

    Jest utilities for Glamor and React

    Project mention: Study Notes for Kent C. Dodds' Javascript Testing Course | dev.to | 2021-08-03

    How do we make effective (and not meaningless and annoying) snapshot tests? https://kentcdodds.com/blog/effective-snapshot-testing According to Justin mentioned by Kent, “Most developers, upon seeing a snapshot test fail, will sooner just nuke the snapshot and record a fresh passing one instead of agonizing over what broke it.” So big snapshot test without telling why is not a good idea. GitHub - kentcdodds/jest-glamor-react: Jest utilities for Glamor and React​ is a nice tool to have if you are using css in js with react. And if you use styled-components, try https://www.npmjs.com/package/jest-styled-components

  • atomize-by-quarkly

    library for creating atomic react components

  • ecommerce-store-reactjs-stripe-oauth2

    This is a fully functional Ecommerce Website which allows the user to login,add products to cart,view products in detail and do the payment through credit card.Built using React,React Router,OAuth2 for user authentication,Stripe for payment and Netlify for deployment.

    Project mention: Boilerplates for websites/app building | dev.to | 2021-06-26

    6.Products detailed page:If you are coding in React then you can use React Router to create a product detailed page.You can fetch the data from external api or the local file. Example:Github Repository Link

  • reddit-frontend

    A reddit front-end written in React

    Project mention: I never bothered showing this, but it ended up getting me a great job so I figured it might be worth posting. I remade the reddit frontend in React, with all custom components and styles. Live version linked at the top of the page. | reddit.com/r/reactjs | 2021-06-22
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-24.

JavaScript css-in-js related posts

Index

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

Project Stars
1 react-native-web 19,660
2 emotion 14,352
3 stylelint 9,437
4 styled-system 7,144
5 styled-jsx 6,868
6 JSS 6,607
7 twin.macro 5,295
8 Aphrodite 5,260
9 stitches 4,612
10 typography 3,705
11 styletron 3,227
12 goober 2,371
13 Fela 2,134
14 vue-styled-components 1,240
15 design-system 643
16 babel-plugin-tailwind-components 329
17 torus 212
18 vue-emotion 199
19 jest-glamor-react 97
20 atomize-by-quarkly 62
21 ecommerce-store-reactjs-stripe-oauth2 26
22 reddit-frontend 9
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.
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.
www.sonarlint.org