#1 Library of the Week: Stitches

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.

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!