From 8aa0a33569ab37f8845d1a405884c38b5caa028d Mon Sep 17 00:00:00 2001 From: Paul Simon Ongpin Date: Thu, 7 Oct 2021 02:29:07 +0800 Subject: [PATCH] fix: same css property overrides on normalize css objects --- README.md | 4 +- package.json | 2 +- src/index.ts | 153 ++++++++++++++++++++++++++++----------------------- 3 files changed, 86 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 9cd1560..9fff69c 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ export const { }) */ -const globalStyles = globalCss(normalize) +const globalStyles = globalCss(...normalize) const App: React.FC = () => { globalStyles() @@ -81,7 +81,7 @@ const customGlobalStyles: Record = { } }; -const globalStyles = globalCss(normalize, customGlobalStyles); +const globalStyles = globalCss(...normalize, customGlobalStyles); const App: React.FC = () => { globalStyles() diff --git a/package.json b/package.json index f75fe40..88d1125 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stitches-normalize-css", - "version": "1.1.0", + "version": "1.2.0", "author": "Paul Simon Ongpin ", "license": "MIT", "description": "Normalize CSS for stitches", diff --git a/src/index.ts b/src/index.ts index 9f29931..5dfe74d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,78 +1,91 @@ -export const normalize = { - ':where(html)': { lineHeight: 1.15 }, - ':where(h1)': { - fontSize: '2em', - marginBlockEnd: '0.67em', - marginBlockStart: '0.67em', - }, - ':where(dl, ol, ul) :where(dl, ol, ul)': { - marginBlockEnd: '0', - marginBlockStart: '0', - }, - ':where(hr)': { boxSizing: 'content-box', color: 'inherit', height: '0' }, - ':where(pre)': { fontFamily: 'monospace, monospace', fontSize: '1em' }, - ':where(abbr[title])': { - textDecoration: 'underline', - // textDecoration: 'underline dotted', - }, - ':where(b, strong)': { fontWeight: 'bolder' }, - ':where(code, kbd, samp)': { - fontFamily: 'monospace, monospace', - fontSize: '1em', - }, - ':where(small)': { fontSize: '80%' }, - ':where(table)': { borderColor: 'currentColor', textIndent: '0' }, - ':where(button, input, select)': { margin: '0' }, - ':where(button)': { textTransform: 'none' }, - ':where(button, input:is([type="button" i], [type="reset" i], [type="submit" i]))': - { +export const normalize: Record[] = [ + { + ':where(html)': { lineHeight: 1.15 }, + ':where(h1)': { + fontSize: '2em', + marginBlockEnd: '0.67em', + marginBlockStart: '0.67em', + }, + ':where(dl, ol, ul) :where(dl, ol, ul)': { + marginBlockEnd: '0', + marginBlockStart: '0', + }, + ':where(hr)': { boxSizing: 'content-box', color: 'inherit', height: '0' }, + ':where(pre)': { fontFamily: 'monospace, monospace', fontSize: '1em' }, + ':where(abbr[title])': { + textDecoration: 'underline', + // textDecoration: 'underline dotted', + }, + ':where(b, strong)': { fontWeight: 'bolder' }, + ':where(code, kbd, samp)': { + fontFamily: 'monospace, monospace', + fontSize: '1em', + }, + ':where(small)': { fontSize: '80%' }, + ':where(table)': { borderColor: 'currentColor', textIndent: '0' }, + ':where(button, input, select)': { margin: '0' }, + ':where(button)': { textTransform: 'none' }, + ':where(button, input:is([type="button" i], [type="reset" i], [type="submit" i]))': + { + WebkitAppearance: 'button', + }, + ':where(progress)': { verticalAlign: 'baseline' }, + ':where(select)': { textTransform: 'none' }, + ':where(textarea)': { margin: '0' }, + ':where(input[type="search" i])': { + WebkitAppearance: 'textfield', + outlineOffset: '-2px', + }, + '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { + height: 'auto', + }, + '::-webkit-input-placeholder': { color: 'inherit', opacity: 0.54 }, + '::-webkit-search-decoration': { WebkitAppearance: 'none' }, + '::-webkit-file-upload-button': { WebkitAppearance: 'button', + font: 'inherit', }, - ':where(progress)': { verticalAlign: 'baseline' }, - ':where(select)': { textTransform: 'none' }, - ':where(textarea)': { margin: '0' }, - ':where(input[type="search" i])': { - WebkitAppearance: 'textfield', - outlineOffset: '-2px', - }, - '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': { - height: 'auto', - }, - '::-webkit-input-placeholder': { color: 'inherit', opacity: 0.54 }, - '::-webkit-search-decoration': { WebkitAppearance: 'none' }, - '::-webkit-file-upload-button': { - WebkitAppearance: 'button', - font: 'inherit', + ':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner': + { + borderStyle: 'none', + padding: '0', + }, + ':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring': + { + outline: '1px dotted ButtonText', + }, + ':where(:-moz-ui-invalid)': { boxShadow: 'none' }, + ':where(dialog)': { + backgroundColor: 'white', + border: 'solid', + color: 'black', + // height: '-moz-fit-content', + height: 'fit-content', + left: '0', + margin: 'auto', + padding: '1em', + position: 'absolute', + right: '0', + // width: '-moz-fit-content', + width: 'fit-content', + }, + ':where(dialog:not([open]))': { display: 'none' }, + ':where(summary)': { display: 'list-item' }, }, - ':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner': - { - borderStyle: 'none', - padding: '0', + { + ':where(abbr[title])': { + textDecoration: 'underline dotted', }, - ':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring': - { - outline: '1px dotted ButtonText', + ':where(dialog)': { + height: '-moz-fit-content', + width: '-moz-fit-content', }, - ':where(:-moz-ui-invalid)': { boxShadow: 'none' }, - ':where(dialog)': { - backgroundColor: 'white', - border: 'solid', - color: 'black', - // height: '-moz-fit-content', - height: 'fit-content', - left: '0', - margin: 'auto', - padding: '1em', - position: 'absolute', - right: '0', - // width: '-moz-fit-content', - width: 'fit-content', }, - ':where(dialog:not([open]))': { display: 'none' }, - ':where(summary)': { display: 'list-item' }, -} +] -export const opinionated = { +export const opinionated: Record[] = [ + { + ':where(body)': { margin: '0' }, + }, ...normalize, - ':where(body)': { margin: '0' }, -} +]