sergeysova/styled-normalize

normalize.css for styled-components

styled-normalize

CSS-normalize library for styled-components.

The original normalize.css is pulled from necolas/normalize.css, and parsed into styled ready format.

Usage

npm install --save styled-normalize

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:

// 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 API:

// 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:

// 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.

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

styled-normalize's Issues

Babel error with storybook

I want to use styled-normalize with babel, but if I use it, I get an Babel error.

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] .storybook/config.js: Cannot find module '@babel/helper-compilation-targets'
Require stack:
- node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/debug.js
- /node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
...

Can someone help?

Thank you!

Update to v8.0.0

https://necolas.github.io/normalize.css/8.0.0/normalize.css

normalize is cropped in styled-components > 2.0.0

Hi,

With 2.0.0 normalize is working well but with 2.0.1 and above the normalize style is cropped after textarea{overflow:auto;}

Is this a bug with styled-normalize or styled-components?

Styled Components 5

Styled Components 5 upgrade needed.

Version 8.0.6 is not available on NPM?

https://www.npmjs.com/package/styled-normalize is only showing 8.0.4, and yarn add installs 8.0.4, which has broken types. I had to install from git, which is totally fine, but you should probably publish the most recent version

What is the difference in styled-normalize and orginal normalize css

I guess original normalize can be installed and imported in Global styles in styled components

@prev tag still requires styled-components >4

I am still on version 3 of styled components and your docs instruct us to install using the @prev tag, so I did.

8.0.5 is the version that is installed when running npm i styled-normalize@prev, but it is not compatible with SC v3.

This version does work: npm i [email protected] and should be tagged as the latest prev version.

Thanks!

Require more examples of setup

Hi,
Just finding it hard to understand how to import styled-normalize and combine it together with createGlobalStyle. Readme is not good enough to understand, specifically the below code

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

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

createGlobalStyle` ${normalize} `
<Normalize />

What is the last line means? Are you exporting the component ?

It would helpful if there is sample app to see how it works with Styled-Component V4.

your help is really appreciated.

Thanks

.babelrc use wrong presets

in the .babelrc triggers a error
{ "presets": [ ["@babel/env", { "modules": "commonjs" }] ], "plugins": [ "styled-components" ] }
@babel/env doesn't exist this should be @babel/preset-env
{ "presets": [ ["@babel/preset-env", { "modules": "commonjs" }] ], "plugins": [ "styled-components" ] }

Why is the version a "const" ?

Never seen that before.
Any reason why it's not written as a comment at the top of the file?

[email protected] types are incompatible with styled-components@<4

Hello and thanks for creating this package! 🙇‍♂️

I tried upgrading styled-normalize from 8.0.2 to 8.0.3 with the latest styled-components@3. Because

styled-normalize/index.d.ts

Line 1 in bb1b9e1

import { InterpolationValue, GlobalStyleClass, DefaultTheme } from 'styled-components'

imports styled-components@4's GlobalStyleClass, DefaultTheme, which don't exist in v3 - TS compilation fails.

I don't really see a way around this, except for fixing peerDependencies to exclude styled-components@4 in styled-normalize@>=8.0.3.

I think this also warrants a new major version and unpublishing of [email protected], since it's broken for TS users.