postcss-normalize

What is postcss-normalize?

The postcss-normalize package integrates the normalize.css library with PostCSS, allowing developers to include normalize.css in their projects as a PostCSS plugin. This package helps in ensuring that browsers render all elements more consistently and in line with modern standards. It automatically imports the parts of normalize.css that you need, based on your project's browserlist configuration.

What are postcss-normalize's main functionalities?

Browser normalization

Automatically includes the relevant parts of normalize.css based on the browsers specified in your project's browserlist. This feature ensures that your CSS behaves more consistently across different browsers.

postcss([ require('postcss-normalize')() ])

Customizable through browserlist

Allows customization of which parts of normalize.css to include by specifying browser versions in the browserlist. This helps in tailoring the normalization to only the necessary browsers, potentially reducing the CSS size.

postcss([ require('postcss-normalize')({ browsers: 'last 2 versions' }) ])

Other packages similar to postcss-normalize

sanitize.css

Similar to postcss-normalize, sanitize.css is a CSS library that provides consistent, cross-browser default styling for HTML elements. However, unlike postcss-normalize, it does not automatically adjust based on browserlist and must be included manually in your CSS.

modern-normalize

modern-normalize is another CSS reset library that normalizes styles for a wide range of elements. It is similar to postcss-normalize but does not integrate directly with PostCSS as a plugin and must be included separately in your project.

README

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

Changelog

7.0.1 (August 24, 2018)

• Use postcss-browser-comments 2.0.0 (major, but a patch for this project).

PostCSS Browser Comments was using an older version of PostCSS, requiring 2 versions of PostCSS to use PostCSS Normalize. This update resolves that.