Package Exports

stitches-normalize-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stitches-normalize-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

stitches-normalize-css

GitHub release issues

Normalize CSS for stitches.

Demo on CodeSandbox.

Installation:

yarn add stitches-normalize-css

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.