Emotion-sanitize NPM

emotion-sanitize

Sanitize.css ready to be used with Emotion CSS-in-JS API.

If you are wondering what the exact difference between Normalize.css and Sanitize.css is, you might find this comparison helpful.

For Normalize.css and Eric Meyer's Reset.css give these packages a try:

Installation

yarn add emotion-sanitize

npm install emotion-sanitize --save

Emotion

Since emotion-sanitize version 12.0.0, we have a peer dependency to @emotion/react version >= 11.x.

For earlier versions of emotion-sanitize, use @emotion/core version 10.x.

Usage

As component

import React from 'react';
import ReactDOM from 'react-dom';
import { SanitizeCSS } from 'emotion-sanitize';

const App = () => (
  <React.Fragment>
    <SanitizeCSS assets forms sanitize typography />
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));

Component prop	Required	Type	Default value	Description
`assets`	no	boolean	`false`	Include `assets.css` global styles
`evergreen`	no	boolean	`false`	Include `evergreen.css` global styles
`forms`	no	boolean	`false`	Include `forms.css` global styles
`formsEvergreen`	no	boolean	`false`	Include `forms.evergreen.css` global styles
`page`	no	boolean	`false`	Include `page.css` global styles
`reduceMotion`	no	boolean	`false`	Include `reduce-motion.css` global styles
`sanitize`	no	boolean	`true`	Include `sanitize.css` global styles
`typography`	no	boolean	`false`	Include `typography.css` global styles

Custom

import React from 'react';
import ReactDOM from 'react-dom';
import { Global, css } from '@emotion/core';
import { assets, forms, sanitize, typography } from 'emotion-sanitize';

const App = () => (
  <React.Fragment>
    <Global 
        styles={css`
            ${assets}
            ${forms}
            ${sanitize}
            ${typography}

            // your own global styles here
        `} 
    />
  </React.Fragment>
);

ReactDOM.render(<App />, document.querySelector('#app'));