PostCSS Normalize

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

Use @import-normalize to determine where normalize.css rules should be included. Duplicate @import-normalize rules will be removed. See all the Options for more information.

pcss @import-normalize;

Results when browserslist is last 3 versions:

```css /* * Add the correct display in IE 9-. /

audio, video { display: inline-block; }

/* * Remove the border on images inside links in IE 10-. /

img { border-style: none; } ```

Results when browserslist is last 2 versions:

```css /* * Remove the border on images inside links in IE 10-. /

img { border-style: none; } ```

PostCSS Normalize uses the non-opinionated version of normalize.css.

Usage

Add PostCSS Normalize to your project:

bash npm install postcss-normalize --save-dev

Add a browserslist entry in package.json:

json { "browserslist": "last 2 versions" }

Use PostCSS Normalize to process your CSS:

```js import postcssNormalize from 'postcss-normalize';

postcssNormalize.process(YOUR_CSS /, processOptions, pluginOptions /); ```

Or use it as a PostCSS plugin:

```js import postcss from 'postcss'; import postcssNormalize from 'postcss-normalize';

postcss([ postcssNormalize(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```

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

| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |

Options

allowDuplicates

Allows you to insert multiple, duplicate insertions of normalize.css rules. The default is false.

js postcssNormalize({ allowDuplicates: true });

browsers

Allows you to override of the project’s browserslist for PostCSS Normalize. The default is false.

js postcssNormalize({ browsers: 'last 2 versions' });

forceImport

Allows you to force an insertion of normalize.css rules at the beginning of the CSS file if no insertion point is specified. The default is false.

js postcssNormalize({ forceImport: true });