stitches-mixins v1.0.0

Table of Contents

1. Introduction
2. Default Mixins
3. Setup
4. Usage
5. Credit

Introduction

Stitches utils are a great tool for reusing dynamic snippets of CSS across your project.

Unfortunately, for utils that don't require a value, shorthand isn't an option.

A common workaround is to set the util value to true:

// without stitches-mixins
const Button = styled("button", {
  someUtilKey: true,
  someOtherUtilKey: true,
  color: "$gray900",
  // …styles
});

Solution

stitches-mixins offers an alternative; allowing snippets of static CSS to be included via the include key:

// with stitches-mixins
const Button = styled("button", {
  include: "someUtilKey",
  // *or* include multiple…
  include: ["someUtilKey", "someOtherUtilKey"],
});

Default Mixins

To kickstart your mixins toolbox, stitches-mixins includes the following by default:

Overriding

Default mixins can be overridden by defining custom mixins with the same key.

Setup

1. Install the package via your favourite package manager:

   npm i stitches-mixins

2. In your Stitches config, assign mixins() to a new include util:

   // stitches.config.ts
   import { createCss } from "@stitches/react";
   import { mixins } from "stitches-mixins";
   
   export const { css, styled } = createCss({
     theme: {},
     utils: {
       // with custom mixins
       include: mixins({
         orchidShadow: {
           boxShadow: "0 25px 50px -12px orchid",
         },
       }),
       // …or without
       include: mixins(),
     },
   });

   Note: Your stitches-mixins util doesn't need to be called include, it can be anything you want it to be.

Usage

Use include like you would with any other Stitches util.

View the CodeSandbox Demo 🪣

💡 Using include at the beginning of your style object is heavily recommended, allowing for easy overriding later

Single-use

// components/card.ts
import { styled } from "../stitches.config";

const Card = styled("div", {
  include: "box",
  // ...styles
});

Combining Mixins

// components/card.ts
import { styled } from "../stitches.config";

const Card = styled("div", {
  include: ["box", "orchidShadow"],
  // ...styles
});

Nested

Like other utils, mixins can be used inside other selectors:

// components/skip-link.ts
import { styled } from "../stitches.config";

const SkipLink = styled("a", {
  include: ["box", "screenReaderOnly"],
  "&:focus": {
    include: "notScreenReaderOnly",
  },
  // ...styles
});

Credit

1. ^ Brent Jackson. Reflexbox.
   Styles used with additional pseudo styles, and without margin reset.
2. ^ Sven Wolfermann. "full viewport width image (container) inside article" (Codepen).
   Styles used without modification.
3. ^ Tailwind. Utilities for improving accessibility with screen readers.
   Styles used without modification.