Top 23 css-in-j Open-Source Projects
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
React Native Components and APIs for the WebProject 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.
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.
👩🎤 CSS-in-JS library designed for high performance style compositionProject mention: Yet another generic startpage | reddit.com/r/startpages | 2022-01-16
Emotion as CSS library
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).
Zero-runtime CSS in JS libraryProject 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)
⬢ Style props for rapid UI developmentProject mention: TaskEz: Design to Code - Chapter 1 | dev.to | 2021-11-27
You can read more about styled system here, https://styled-system.com/.
Full CSS support for JSX without compromisesProject mention: How to achieve this in Next.js Built-In CSS/SCSS Support? | reddit.com/r/reactjs | 2021-11-17
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.
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.
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generationProject mention: The React roadmap for beginners you never knew you needed. | dev.to | 2021-11-23
🦹♂️ 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
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
A powerful toolkit for building websites with beautiful designProject mention: Typography.js installation workflow | reddit.com/r/reactjs | 2021-04-16
:zap: Toolkit for component-oriented stylingProject 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; 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 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 vs hyperlocal development workflows interact with your organization's design culture.
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.
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar APIProject 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.
Inline style system for React and Preact
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.Project mention: Twind: Tailwind-in-JS | news.ycombinator.com | 2021-11-24
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)
create much faster design systems that work on react native + react native web thanks to an optimizing compiler.
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):
Priceline.com Design SystemProject mention: 5 Underrated React Design Systems for 2021 | dev.to | 2021-02-18
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
css-in-js related posts
Building a web app + mobile app
1 project | reddit.com/r/reactnative | 19 Jan 2022
2 projects | reddit.com/r/FlutterDev | 12 Jan 2022
SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins?
9 projects | dev.to | 11 Jan 2022
Create react components at the speed of light
2 projects | dev.to | 9 Jan 2022
🖋Adding Fonts in Next.js (local fonts along with styled components)
3 projects | dev.to | 7 Jan 2022
How to build UI elements using CSS pseudo elements
2 projects | dev.to | 29 Dec 2021
Making an AeroPress Tracking App
3 projects | dev.to | 27 Dec 2021
What are some of the best open-source css-in-j projects? This list will help you:
Are you hiring? Post a new remote job listing for free.