Community Plugin

gatsby-theme-stitches

npm GitHub

A GatsbyJS plugin for styling with Stitches

Install

yarn add gatsby-theme-stitches @stitches/react

Usage

// Add plugin to gatsby-config.js
plugin: ['gatsby-theme-stitches']

That’s it! You can import sitiches module from gatsby-plugin-stitches/src/config;

import { styled } from 'gatsby-theme-stitches/src/config';

const Container = styled("div", {
  margin: 10,
  backgroundColor: 'red',
});

And also you can create your own config by shadowing the gatsby-theme-stitches/src/config module.

// src/gatsby-theme-stitches/config.ts

import { createStitches } from '@stitches/react';

// You should exports all properties
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  // See the [configuration guide](https://stitches.dev/docs/tokens)
});

TypeScript

Add a module resolution to your tsconfig.json file to get autocompletion.

{
  "baseUrl": ".",
  "paths": {
    "gatsby-theme-stitches/src/*": ["./src/gatsby-theme-stitches/*"]
  }
}

LICENSE

MIT