PostCSS Normalize

PostCSS Normalize lets you use the parts of normalize.css or sanitize.css that you need from your browserslist.

1@import "normalize.css";

1@import "sanitize.css";

PostCSS Normalize uses a non-opinionated version of normalize.css, but an opinionated version may also be used.

1@import "normalize.css/opinionated.css";

Examples

Here is a sample of what normalize.css looks like when the browserslist is ie >= 9:

1/**
2 * Add the correct display in IE 9-.
3 */
4
5audio,
6video {
7  display: inline-block;
8}
9
10/**
11 * Remove the border on images inside links in IE 10-.
12 */
13
14img {
15  border-style: none;
16}

And here is the same sample when the browserslist is ie >= 10:

1/**
2 * Remove the border on images inside links in IE 10-.
3 */
4
5img {
6  border-style: none;
7}

Usage

Add PostCSS Normalize to your project:

1npm install postcss-normalize --save-dev

Add a browserslist entry in package.json:

1{
2  "browserslist": "last 2 versions"
3}

Use PostCSS Normalize to process your CSS:

1const postcssNormalize = require('postcss-normalize')
2
3postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)

Or use it as a PostCSS plugin:

1const postcss = require('postcss')
2const postcssNormalize = require('postcss-normalize')
3
4postcss([
5  postcssNormalize(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */)

PostCSS Normalize runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

PostCSS Import Usage

PostCSS Normalize includes a postcssImport function to configure PostCSS Import and allow you to continue using the @import syntax.

1const postcss = require('postcss')
2const postcssImport = require('postcss-import')
3const postcssNormalize = require('postcss-normalize')
4
5postcss([
6  postcssImport(
7    postcssNormalize(
8      /* pluginOptions (for PostCSS Normalize) */
9    ).postcssImport(
10      /* pluginOptions (for PostCSS Import) */
11    )
12  )
13]) // now you can use @import "normalize.css", etc. again

Alternatively, use @import-normalize or @import-sanitize to avoid conflicts with @import transforms.

1@import-normalize;

1@import-normalize "normalize/opinionated.css";

1@import-sanitize;

Options

allowDuplicates

The allowDuplicates option determines whether multiple, duplicate insertions of CSS libraries are allowed. By default, duplicate libraries are omitted.

1postcssNormalize({ allowDuplicates: true })

forceImport

The forceImport option defines CSS libraries that will be inserted at the beginning of the CSS file. Unless overriden by allowDuplicates, duplicate CSS libraries would still be omitted.

1postcssNormalize({ forceImport: true })

Specific CSS libraries may be defined.

1postcssNormalize({
2  forceImport: 'sanitize.css'
3})

browsers

The browsers option defines an override of the project’s browserslist for PostCSS Normalize. This option should be avoided in leui of a browserslist file.

1postcssNormalize({ browsers: 'last 2 versions' })

CSS Libraries

PostCSS Normalize can include normalize.css or sanitize.css and configure either with the following combinations:

1@import "normalize"; /* also, @import "normalize.css" */
2@import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */
3@import "sanitize"; /* also, @import "sanitize.css" */
4@import "sanitize/assets"; /* also, @import "sanitize.css/assets.css" */
5@import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */
6@import "sanitize/reduce-motion"; /* also, @import "sanitize.css/reduce-motion.css" */
7@import "sanitize/system-ui"; /* also, @import "sanitize.css/system-ui.css" */
8@import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */
9@import "sanitize/ui-monospace"; /* also, @import "sanitize.css/ui-monospace.css" */
10@import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */