https://github.com/cometkim/gatsby-theme-stitches

A GatsbyJS plugin for styling with Stitches
https://github.com/cometkim/gatsby-theme-stitches

css-in-js gatsby gatsby-plugin gatsby-theme

Last synced: 3 months ago
JSON representation

A GatsbyJS plugin for styling with Stitches

• Host: GitHub
• URL: https://github.com/cometkim/gatsby-theme-stitches
• Owner: cometkim
• License: mit
• Created: 2020-09-02T04:12:53.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T19:46:32.000Z (9 months ago)
• Last Synced: 2024-05-01T15:33:42.390Z (9 months ago)
• Topics: css-in-js, gatsby, gatsby-plugin, gatsby-theme
• Language: TypeScript
• Homepage:
• Size: 116 MB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - gatsby-theme-stitches

README

        
# gatsby-theme-stitches

![npm](https://img.shields.io/npm/v/gatsby-theme-stitches)

![GitHub](https://img.shields.io/github/license/cometkim/gatsby-theme-stitches)

A GatsbyJS plugin for styling with [Stitches](https://stitches.dev/)

## Install

```bash

yarn add gatsby-theme-stitches @stitches/react

```

## Usage

```js

// Add plugin to gatsby-config.js

plugin: ['gatsby-theme-stitches']

```

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

```js

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.

```js

// 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.

```json

{

  "baseUrl": ".",

  "paths": {

    "gatsby-theme-stitches/src/*": ["./src/gatsby-theme-stitches/*"]

  }

}

```

## LICENSE

MIT