Multi-purpose CSS Toolkit that uses Emotion. Contains basic CSS setup, mixins, utils and debug mode (separate package).

What it does?

• Converts TS config into CSS variables
• Functions to access those variables
• Functions that extend CSS functionality
• Integrated normalize.css import
• Provides basic global styles
• Provides basic utils
• Extension points for utils & global styles
• Debug sidebar with all CSS vars and utils (separate package)

Installation

Note: this is a private package so the installation requires you to use prototypdigital account. You can use npm logout and npm login to switch accounts. Make sure to switch back to your account after npm install has been finished.

yarn add --dev @prototyp/gatsby-plugin-gumball @prototyp/gatsby-plugin-gumball-debug

Requirements

• normalize.css
• Absolute imports - configured in Gatsby

Configuration

Add the following snippet to gatsby-config.js

const activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"

const isDev = activeEnv === "development"

module.exports = {
  plugins: [
    "@prototyp/gatsby-plugin-gumball",
    ...(isDev
      ? [
          {
            resolve: "@prototyp/gatsby-plugin-gumball-debug",
            options: {
              debug: true,
            },
          },
        ]
      : [])
  ],
}

Add the following line to tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@prototyp/"]
  }
}

Required files in src/style:

• variables.ts - use variables.ts.example as a template from the package.
• global.styles.ts - use the following starting starter template:

import { css } from "@emotion/react"

export const global = css``;

• utils.styles.ts - use the following starter template:

export {};