make system font stack and -webkit/-moz rules optional

README.md

@@ -1,7 +1,7 @@
 # 🧵 stitches-normalize
 
 [![npm](https://img.shields.io/npm/v/stitches-normalize)](https://www.npmjs.com/package/stitches-normalize)
-[![MIT License](https://img.shields.io/github/license/jakejarvis/stitches-normalize?color=violet)](LICENSE)
+[![MIT License](https://img.shields.io/github/license/jakejarvis/stitches-normalize)](LICENSE)
 
 @sindresorhus's [**modern-normalize.css**](https://github.com/sindresorhus/modern-normalize) as a plug-and-play JavaScript object compatible with Stitches.
 
@@ -23,10 +23,15 @@ 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, {
+const globalStyles = globalCss(
+  ...normalizeCss({
+    // default options, see below:
+    fontFamilies: 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",
   },
@@ -38,6 +43,35 @@ const App = () => {
 };
 ```
 
+## API
+
+### normalizeCss(options?)
+
+#### options
+
+Type: `object`
+
+##### systemFonts
+
+Type: `boolean`\
+Default: `true`
+
+Include the [default system font stacks](https://github.com/sindresorhus/modern-normalize/issues/3) (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

src/index.ts

@@ -3,20 +3,77 @@
 
 import type * as Stitches from "@stitches/react";
 
-const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
+export interface Options {
-  {
+  /**
+   * Include the [default system font stacks](https://github.com/sindresorhus/modern-normalize/issues/3) (sans-serif
+   * fonts for `html`, monospace fonts for `code`, `kbd`, `samp`, and `pre`.)
+   *
+   * @default true
+   */
+  readonly systemFonts?: boolean;
+
+  /**
+   * Include non-standard WebKit compatibility rules for older Safari versions on iOS and macOS.
+   *
+   * @default true
+   */
+  readonly webkitPrefixes?: boolean;
+
+  /**
+   * Include non-standard Mozilla compatibility rules for older Firefox versions.
+   *
+   * @default true
+   */
+  readonly mozPrefixes?: boolean;
+}
+
+/**
+ * @returns A Stitches-compatible version of [modern-normalize.css](https://github.com/sindresorhus/modern-normalize).
+ *
+ * @example
+ * ```
+ * import { globalCss } from "./stitches.config";
+ * import normalizeCss from "stitches-normalize";
+ *
+ * const globalStyles = globalCss(
+ *   ...normalizeCss({
+ *     // default options, see below:
+ *     fontFamilies: 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>;
+ * };
+ * ```
+ */
+const normalizeCss = (options: Options = {}): Record<string, Stitches.CSSProperties>[] => {
+  options = {
+    // all options default to true, which returns the complete modern-normalize.css equivalent
+    systemFonts: true,
+    webkitPrefixes: true,
+    mozPrefixes: true,
+    ...options,
+  };
+
+  const baseStyles: Record<string, Stitches.CSSProperties> = {
     "*, ::before, ::after": {
       boxSizing: "border-box",
     },
     html: {
       lineHeight: 1.15,
       tabSize: 4,
-      // @ts-ignore
-      WebkitTextSizeAdjust: "100%",
     },
     body: {
       margin: 0,
-      fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     },
     hr: {
       height: 0,
@@ -29,7 +86,6 @@ const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
       fontWeight: "bolder",
     },
     "code, kbd, samp, pre": {
-      fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
       fontSize: "1em",
     },
     small: {
@@ -60,20 +116,7 @@ const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
     "button, select": {
       textTransform: "none",
     },
-    "button, [type='button'], [type='reset'], [type='submit']": {
+    "button, [type='button'], [type='reset'], [type='submit']": {},
-      // @ts-ignore
-      WebkitAppearance: "button",
-    },
-    "::-moz-focus-inner": {
-      borderStyle: "none",
-      padding: 0,
-    },
-    ":-moz-focusring": {
-      outline: "1px dotted ButtonText",
-    },
-    ":-moz-ui-invalid": {
-      boxShadow: "none",
-    },
     legend: {
       padding: 0,
     },
@@ -85,22 +128,53 @@ const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
     },
     "[type='search']": {
       outlineOffset: -2,
-      // @ts-ignore
-      WebkitAppearance: "textfield",
     },
-    "::-webkit-search-decoration": {
+  };
+
+  // append default system font stacks
+  if (options.systemFonts) {
+    baseStyles["body"].fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+    baseStyles["code, kbd, samp, pre"].fontFamily = "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace";
+  }
+
+  // `-webkit` compatibility properties and rules
+  if (options.webkitPrefixes) {
+    // @ts-ignore
+    baseStyles["html"].WebkitTextSizeAdjust = "100%";
+    // @ts-ignore
+    baseStyles["button, [type='button'], [type='reset'], [type='submit']"].WebkitAppearance = "button";
+    // @ts-ignore
+    baseStyles["[type='search']"].WebkitAppearance = "textfield";
+
+    baseStyles["::-webkit-search-decoration"] = {
       // @ts-ignore
       WebkitAppearance: "none",
-    },
+    };
-    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+    baseStyles["::-webkit-inner-spin-button, ::-webkit-outer-spin-button"] = {
       height: "auto",
-    },
+    };
-    "::-webkit-file-upload-button": {
+    baseStyles["::-webkit-file-upload-button"] = {
       font: "inherit",
       // @ts-ignore
       WebkitAppearance: "button",
-    },
+    };
-  },
+  }
-];
+
+  // `-moz` compatibility properties and rules
+  if (options.mozPrefixes) {
+    baseStyles["::-moz-focus-inner"] = {
+      borderStyle: "none",
+      padding: 0,
+    };
+    baseStyles[":-moz-focusring"] = {
+      outline: "1px dotted ButtonText",
+    };
+    baseStyles[":-moz-ui-invalid"] = {
+      boxShadow: "none",
+    };
+  }
+
+  return [baseStyles];
+};
 
 export default normalizeCss;