3.1 KiB

Raw Blame History

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.

@import-normalize;

Results when browserslist is last 3 versions:

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

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

npm install postcss-normalize --save-dev

Add a browserslist entry in package.json:

{
  "browserslist": "last 2 versions"
}

Use PostCSS Normalize to process your CSS:

import postcssNormalize from 'postcss-normalize';

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

Or use it as a PostCSS plugin:

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.

postcssNormalize({
  allowDuplicates: true
});

browsers

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

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.

postcssNormalize({
  forceImport: true
});

3.1 KiB Raw Blame History