🧵 stitches-normalize

@sindresorhus's modern-normalize.css as a plug-and-play JavaScript object compatible with Stitches.

Install

npm install stitches-normalize
# or...
yarn add stitches-normalize

Usage

This assumes you already have a stitches.config.js (or .ts) file that re-exports the globalCss() function generated by createStitches().

You can read more about setting that file up in Stitches' awesome documentation.

import { globalCss } from "./stitches.config";
import normalizeCss from "stitches-normalize";

const globalStyles = globalCss(
  ...normalizeCss({
    // default options, see below:
    systemFonts: true,
    webkitPrefixes: true,
    mozPrefixes: true,
  }), {
  // you can put the rest of your global styles here if necessary.
  // these rules will override stitches-normalize's.
  body: {
    fontFamily: "'Comic Sans MS', sans-serif",
  },
});

const App = () => {
  globalStyles();
  return <h1>Hello, normalized world!</h1>;
};

API

normalizeCss(options?)

options

Type: object

systemFonts

Type: boolean
Default: true

Include the default system font stacks (sans-serif fonts for html, monospace fonts for code, kbd, samp, and pre.)

webkitPrefixes

Type: boolean
Default: true

Include non-standard WebKit compatibility rules for older Safari versions on iOS and macOS.

mozPrefixes

Type: boolean
Default: true

Include non-standard Mozilla compatibility rules for older Firefox versions.

License

MIT