mirror of
https://github.com/jakejarvis/stitches-normalize.git
synced 2025-04-26 06:25:23 -04:00
make system font stack and -webkit/-moz rules optional
This commit is contained in:
parent
93cc857a35
commit
4be4db3a64
GPG Key ID:
2B0C9CF251E69A39
40
README.md
40
README.md
@ -1,7 +1,7 @@
|
||||
# 🧵 stitches-normalize
|
||||
|
||||
[](https://www.npmjs.com/package/stitches-normalize)
|
||||
[](LICENSE)
|
||||
[](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
|
||||
|
||||
134
src/index.ts
134
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']": {
|
||||
// @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<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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user