stitches-normalize-css

Normalize CSS for stitches.

Demo on CodeSandbox.

Installation:

yarn add stitches-normalize-css

or

npm install stitches-normalize-css

Usage:

Adding normalize or opinionated to globalCss

Normalize CSS rules here

Opinionated CSS rules here

import * as React from 'react'
import { normalize } from 'stitches-normalize-css'
// if you want to use the opinionated one, import opinionated instead of normalize
// import { opinionated } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

// path-to/stitches.config.js - Sample stitches config
/*
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  theme: {
    colors: {
      gray400: 'gainsboro',
      gray500: 'lightgray',
    },
  },
  media: {
    bp1: '(min-width: 480px)',
  },
})
*/

const globalStyles = globalCss(...normalize)

const App: React.FC = () => {
  globalStyles()
  return <div>App</div>
}

Adding custom global styles on top of normalize

import * as React from 'react'
import type * as Stitches from '@stitches/react';
import { normalize } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

const customGlobalStyles: Record<string, Stitches.CSS> = {
  ".App": {
    backgroundColor: "papayawhip"
  },
  body: {
    border: "2px solid red",
    minHeight: "100vh"
  }
};

const globalStyles = globalCss(...normalize, customGlobalStyles);

const App: React.FC = () => {
  globalStyles()
  return <div className="App">App</div>
}

Credits

All credit goes to CSS Tools for Normalize CSS.