# styled-normalize

> Normalize.css for styled-components CSS-in-JS library

Latest version **8.1.1** (published 2024-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-normalize
pnpm add styled-normalize
yarn add styled-normalize
bun add styled-normalize
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.1.1 |
| Published | 2024-02-08 |
| First published | 2017-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 440 |
| Author | Sergey Sova |
| Maintainers | betula, sergeysova |
| Keywords | styled, components, normalize, css, react, jss, styles, import, export |

## Links

- npm: https://www.npmjs.com/package/styled-normalize
- Repository: https://github.com/sergeysova/styled-normalize
- Homepage: https://github.com/sergeysova/styled-normalize#readme
- Issues: https://github.com/sergeysova/styled-normalize/issues
- npm.io page: https://npm.io/package/styled-normalize

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 8.1.1 (latest) — 2024-02-08
- 8.0.6 (next) — 2018-11-16
- 8.0.5-prev (prev) — 2018-11-13
- 8.1.0 — 2023-10-20
- 8.0.7 — 2020-01-30
- 8.0.5 — 2018-11-13
- 8.0.4-prev — 2018-11-13
- 8.0.4 — 2018-11-13
- 8.0.3 — 2018-10-25
- 8.0.2 — 2018-10-17
- 8.0.1 — 2018-09-17
- 8.0.0 — 2018-06-25
- 8.0.0-beta.1 — 2018-06-25
- 4.0.0 — 2018-02-09
- 3.0.1 — 2018-01-30
- … 10 more at https://npm.io/package/styled-normalize/versions

## README

# styled-normalize

CSS-normalize library for [styled-components](https://styled-components.com/).

The original `normalize.css` is pulled from [necolas/normalize.css](https://github.com/necolas/normalize.css), and parsed into styled ready format.


## Usage

```sh
npm install --save styled-normalize
```

```sh
yarn add styled-normalize
```

### styled-components v4 / v5

Package exported `normalize` and `Normalize`. `Normalize` is a component with global styles. `normalize` is a css-normalize content to interpolate into styled component.

Use as component:

```js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Normalize } from 'styled-normalize'

import { App } from './app'

const Root = () => (
  <React.Fragment>
    <Normalize />
    <App />
  </React.Fragment>
)

ReactDOM.render(<Root />, document.querySelector('#root'))
```

Also you can use [`createGlobalStyle`](https://www.styled-components.com/docs/api#createglobalstyle) API:

```js
// styles/index.js
import { createGlobalStyle } from 'styled-components'
import { normalize } from 'styled-normalize'

export const GlobalStyle = createGlobalStyle`
  ${normalize}

  // You can continue writing global styles here
  body {
    padding: 0;
    background-color: black;
  }
`

// index.js
import React from 'react'
import ReactDOM from 'react-dom'

import { GlobalStyle } from './styles'
import { App } from './app'

const Root = () => (
  <React.Fragment>
    <GlobalStyle />
    <App />
  </React.Fragment>
)

ReactDOM.render(<Root />, document.querySelector('#root'))
```

You can also use named imports:

```js
// ES Modules
import { normalize, Normalize } from 'styled-normalize'

// CommonJS
const { normalize, Normalize } = require('styled-normalize')
```

### styled-components v3

If you want to use `styled-normalize` with `styled-components@v3` you should use `prev` npm tag.

```bash
npm install styled-normalize@prev
```

> v3 don't supports `createGlobalStyle` API.

## Version

__NO SEMVER!__

Why? Because X.Y numbers in `vX.Y.Z` version matches X.Y in `normalize.css`

## License

The [MIT License](LICENSE)

---
_Source: https://npm.io/package/styled-normalize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._