alexcarpenter / stitches-mixins

Sass-style shorthand utils for Stitches 🥣

Stitches Mixins

Sass-style shorthand utils for Stitches 🥣

View the CodeSandbox Demo ↗

Table of Contents

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

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:

Key	Description
box	Layout primitive. (Credit: Reflexbox)
breakout	"Breakout" of a parent's maxWidth to fill the viewport width. (Credit: Sven Wolfermann)
minHeightScreen	Fills the viewport height, with additional support for iOS Safari.
screenReaderOnly	Hides an element visually without hiding from screen readers and other ATs. (Credit: Tailwind)
notScreenReaderOnly	Reverts styles set by screenReaderOnly. (Credit: Tailwind)

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.

See 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
});