#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!

TwitterLinkedInGitHub