Migrating from Tachyons to Stitches

We will review what WaPo Tachyons is capable of and how it compares with Stitches. We will also review how to write a feature using one or the other to better understand the gaps in Tachyons and how Stitches can fit into them.

Tachyons

WaPo Tachyons is a CSS framework for rapid development using small atomic CSS classes. It was an answer to the size limit imposed by AMP. With that in mind, the team wrote classes for what was needed for the work. This methodology led to eventual gaps in the framework that we will discuss in the next section.

Stitches

"CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience." From (Stitches.dev)

It is fully typed using CSSType so you can write any CSS you need. There is no limitation by design.

Writing CSS with Ui Kit

There are three ways to write CSS with Ui Kit using the Stitches API.

Styled

A function to create a component including its styles and variants. It receives: element or component: a HTML element (div) or a React Component (Component), styles: as many styleObject as you need

import { styled, css, Box } from '@washingtonpost/wpds-ui-kit';

const ActionButton = styled('button', {
  // base styles

  variants: {
    variant: {
      primary: {
        // primary styles
      },
      secondary: {
        // secondary styles
      },
    },
  },
});

// Use it
<ActionButton>Button</ActionButton>
<ActionButton variant="primary">Primary button</ActionButton>

CSS

A function to generate class names from a style object. It receives as many styleObject as you need.

const actionButton = css({
  // base styles

  variants: {
    variant: {
      primary: {
        // primary styles
      },
      secondary: {
        // secondary styles
      },
    },
  },
});

// Use it
<div className={actionButton()}>Button</div>
<div className={actionButton({ variant: 'primary' })}>Primary action button</div>

Box

A component that uses the styled function to compose itself. It has all of the props from styled. It's a quick way to prototype a component using the css prop.

import { styled, css, Box } from "@washingtonpost/wpds-ui-kit";

export const Example = () => (
  <Box
    css={css({
      padding: "$100",
      background: "$subtle",
    })}
  >
    Box
  </Box>
);