Skip to content

Commit

Permalink
feat: use css tools - normalize css
Browse files Browse the repository at this point in the history
  • Loading branch information
psongpin committed Oct 3, 2021
1 parent 7a7014b commit e33fdb4
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 123 deletions.
22 changes: 14 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

![GitHub release](https://img.shields.io/github/v/release/psongpin/stitches-normalize-css.svg) ![issues](https://img.shields.io/github/issues/psongpin/stitches-normalize-css)

[Normalize CSS](https://necolas.github.io/normalize.css/) for [stitches](https://github.com/modulz/stitches).
[Normalize CSS](https://github.com/csstools/normalize.css/) for [stitches](https://github.com/modulz/stitches).

[Demo on CodeSandbox](https://codesandbox.io/s/stitches-normalize-css-gt6tp).

Expand All @@ -18,11 +18,17 @@ or

## Usage:

#### Adding `reset` to `globalCss`
#### Adding `normalize` or `opinionated` to `globalCss`

Normalize CSS rules [here](https://github.com/csstools/normalize.css/blob/main/normalize.css)

Opinionated CSS rules [here](https://github.com/csstools/normalize.css/blob/main/opinionated.css)

```jsx
import * as React from 'react'
import { reset } from 'stitches-normalize-css'
import { normalize } from 'stitches-normalize-css'
// if you want to use the opinionated one, import opinionated instead of normalize
// import { opinionated } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

// path-to/stitches.config.js - Sample stitches config
Expand All @@ -49,20 +55,20 @@ export const {
})
*/

const globalStyles = globalCss(reset)
const globalStyles = globalCss(normalize)

const App: React.FC = () => {
globalStyles()
return <div>App</div>
}
```

#### Adding custom global styles on top of `reset`
#### Adding custom global styles on top of `normalize`

```jsx
import * as React from 'react'
import type * as Stitches from '@stitches/react';
import { reset } from 'stitches-normalize-css'
import { normalize } from 'stitches-normalize-css'
import { globalCss } from 'path-to/stitches.config.ts'

const customGlobalStyles: Record<string, Stitches.CSS> = {
Expand All @@ -75,7 +81,7 @@ const customGlobalStyles: Record<string, Stitches.CSS> = {
}
};

const globalStyles = globalCss(reset, customGlobalStyles);
const globalStyles = globalCss(normalize, customGlobalStyles);

const App: React.FC = () => {
globalStyles()
Expand All @@ -85,4 +91,4 @@ const App: React.FC = () => {

## Credits

All credit goes to [Nicolas Gallagher](https://github.com/necolas) for [Normalize CSS](https://necolas.github.io/normalize.css/).
All credit goes to [CSS Tools](https://github.com/csstools) for [Normalize CSS](https://github.com/csstools/normalize.css/).
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "stitches-normalize-css",
"version": "1.0.0",
"version": "1.1.0",
"author": "Paul Simon Ongpin <paulsimon.ongpin@gmail.com>",
"license": "MIT",
"description": "Normalize CSS for stitches",
Expand Down
177 changes: 63 additions & 114 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,129 +1,78 @@
export const reset = {
html: {
lineHeight: 1.15,
'-webkit-text-size-adjust': '100%',
},
body: {
margin: 0,
},
main: {
display: 'block',
},
h1: {
export const normalize = {
':where(html)': { lineHeight: 1.15 },
':where(h1)': {
fontSize: '2em',
margin: '0.67em 0',
},
hr: {
boxSizing: 'content-box',
height: 0,
overflow: 'visible',
},
pre: {
fontFamily: 'monospace, monospace',
fontSize: '1em',
},
a: {
backgroundColor: 'transparent',
marginBlockEnd: '0.67em',
marginBlockStart: '0.67em',
},
'abbr[title]': {
borderBottom: 'none',
textDecoration: 'underline dotted',
':where(dl, ol, ul) :where(dl, ol, ul)': {
marginBlockEnd: '0',
marginBlockStart: '0',
},
'b, strong': {
fontWeight: 'bolder',
':where(hr)': { boxSizing: 'content-box', color: 'inherit', height: '0' },
':where(pre)': { fontFamily: 'monospace, monospace', fontSize: '1em' },
':where(abbr[title])': {
textDecoration: 'underline',
// textDecoration: 'underline dotted',
},
'code, kbd, samp': {
':where(b, strong)': { fontWeight: 'bolder' },
':where(code, kbd, samp)': {
fontFamily: 'monospace, monospace',
fontSize: '1em',
},
small: {
fontSize: '80%',
},
'sub, sup': {
fontSize: '75%',
lineHeight: 0,
position: 'relative',
verticalAlign: 'baseline',
},
sub: {
bottom: '-0.25em',
},
sup: {
top: '-0.5em',
},
img: {
borderStyle: 'none',
},
'button, input, optgroup, select, textarea': {
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: 1.15,
margin: 0,
},
'button, input': {
overflow: 'visible',
},
'button, select': {
textTransform: 'none',
},
'button, [type="button"], [type="reset"], [type="submit"]': {
'-webkit-appearance': 'button',
':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',
},
'button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner':
':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner':
{
borderStyle: 'none',
padding: 0,
padding: '0',
},
'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring':
':where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring':
{
outline: '1px dotted ButtonText',
},
fieldset: {
padding: '0.35em 0.75em 0.625em',
},
legend: {
boxSizing: 'border-box',
color: 'inherit',
display: 'table',
maxWidth: '100%',
padding: 0,
whiteSpace: 'normal',
},
progress: {
verticalAlign: 'baseline',
},
textarea: {
overflow: 'auto',
},
'[type="checkbox"], [type="radio"]': {
boxSizing: 'border-box',
padding: 0,
},
'[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button':
{
height: 'auto',
},
'[type="search"]': {
'-webkit-appearance': 'textfield',
outlineOffset: -2,
},
'[type="search"]::-webkit-search-decoration': {
'-webkit-appearance': 'none',
},
'::-webkit-file-upload-button': {
'-webkit-appearance': 'button',
font: 'inherit',
},
details: {
display: 'block',
},
summary: {
display: 'list-item',
},
template: {
display: 'none',
},
'[hidden]': {
display: 'none',
},
':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 = {
...normalize,
':where(body)': { margin: '0' },
}

0 comments on commit e33fdb4

Please sign in to comment.