From 4be4db3a64f2f46629e57dc89fbe4f642c9ec469 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sun, 20 Mar 2022 11:01:07 -0400 Subject: [PATCH] make system font stack and `-webkit`/`-moz` rules optional --- README.md | 40 +++++++++++++-- src/index.ts | 134 +++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 141 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 7d6d6ce..9e84798 100644 --- a/README.md +++ b/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 diff --git a/src/index.ts b/src/index.ts index 64b0037..b50cde6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,20 +3,77 @@ import type * as Stitches from "@stitches/react"; -const normalizeCss: Record[] = [ - { +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

Hello, normalized world!

; + * }; + * ``` + */ +const normalizeCss = (options: Options = {}): Record[] => { + options = { + // all options default to true, which returns the complete modern-normalize.css equivalent + systemFonts: true, + webkitPrefixes: true, + mozPrefixes: true, + ...options, + }; + + const baseStyles: Record = { "*, ::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[] = [ 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[] = [ "button, select": { textTransform: "none", }, - "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", - }, + "button, [type='button'], [type='reset'], [type='submit']": {}, legend: { padding: 0, }, @@ -85,22 +128,53 @@ const normalizeCss: Record[] = [ }, "[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;