Skip to content

[Mirrored from Gitlab] Sanitize.css ready to be used with Emotion CSS-in-JS API.

License

Notifications You must be signed in to change notification settings

fluffy-heinzelman/emotion-sanitize

Repository files navigation

emotion-sanitize

npm version total downloads monthly downloads license

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

or

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'));

Version

Major and minor versions of emotion-sanitize correspond to the major and minor versions of sanitize.css.

Patch level reflects updates to emotion-sanitize.

License

MIT License