#1 Library of the Week: Stitches

Nov 28, 2021

At first glance, I thought Stitches had nothing on styled-components. It scares me that I was so close to missing this brilliant CSS-in-JS library.


I felt adventurous today, so I decided to have a look at Stitches - a potential styled-components replacement. The only reason to do so was because I grew interested in the company behind it - Modulz. I am satisfied with my styled-components workflow, so I didn't have great expectations towards Stitches. I am glad to admit I was wrong; I am now looking forward to building my future projects with it.

Useful links:


Stitches is a CSS-in-JS library that doesn't do anything revolutionary. Its API seems to resemble the one we are familiar with from styled-components, and for the first few minutes, I've had a tough time thinking of a reason for why it was built. Then, it struck me.

What is Library of the Week?

Library of the Week is a series published on my blog that encourages me to look for libraries that may have gone under your radar. The criteria I enforce are simple:

  • 👉The library must have less than 10,000 GitHub stars
  • 👉It must match my front-end ecosystem: React, Next.js, TypeScript, JavaScript

You can find the rest of the entries in the series here.

The library created by a great company Modulz (that I learned of from a fantastic Next.js conf talk - "So You Think You Can Build A Dropdown?") is basically styled-components on steroids. It does all that styled-components does, and more, and better.

  1. Stitches takes full advantage of the "JS" in "CSS-in-JS".

In my eyes, aside from theming, styled-components did little to use the JavaScript capabilities. Stitches, on the other hand, goes full throttle on typing, which makes it amazingly simple to create fully-typed component variants:

import { styled } from "@stitches/react";
const Button = styled("button", {
padding: "1rem",
borderRadius: "8px",
cursor: "pointer",
fontWeight: "bold",
fontSize: "1rem",
variants: {
color: {
primary: {
background-color: "goldenrod"
},
secondary: {
background-color: "gainsboro"
}
}
}
});
//
return (
<Button color="primary">Primary</Button>
)
Stitches autocompletion
  1. Stitches brings the best of both worlds: utility vs. components

Stitches responds flawlessly to the current trends of styling.

  • it satisfies the need to create reusable, component-agnostic utility functions with its utils entry in the config:
import { createStitches } from "@stitches/react";
const { styled } = createStitches({
theme: {
// ...
},
utils: {
columnGap: (gap: number) => ({
flexDirection: "column",
gap: `var(--space-${gap})`,
}),
rowGap: (gap: number) => ({
flexDirection: "row",
gap: `var(--space-${gap})`,
}),
},
});
// ...
  • while maintaining their core API component-centric:
// ...
const Flex = styled("div", {
display: "flex",
rowGap: 2,
});
  1. Stitches comes with a healthy pack of solutions to everyday problems.

Are you tired of creating your own styled-components utilities for common issues, such as media-queries? Stitches got you!

import { createStitches } from "@stitches/react";
// ...
const { styled } = createStitches({
media: {
bp1: "(min-width: 376px)",
bp2: "(min-width: 768px)",
bp3: "(min-width: 1024px)",
},
});
// ...
return (
<Flex spacing={{ "@initial": "column", "@bp1": "row" }}>{/* ... */}</Flex>
);

I haven't tested Stitches in a more demanding environment, but I definitely intend to. As far as I am concerned, the barrier to switch from styled-components is very low, and the results are splendid. I definitely recommend all of you to check it out!


Previously on peelar.dev 🤓:


TwitterLinkedInGitHub