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, based on your project’s browserlist.

Example:

/* { "browserlist": ["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;
}

/* { "browserlist": ["last 2 versions"] } */

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

img {
  border-style: none;
}

PostCSS Normalize will put itself at the beginning of your CSS file, unless you dictate where it should be included:

@import-normalize;

Duplicate @import-normalize rules will be removed for your convenience. Only the first instance will be replaced.

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

Usage

Add PostCSS Normalize to your build tool:

npm install postcss-normalize --save-dev

Add a browserlist entry in your package.json:

{
  "browserslist": "last 2 versions"
}

Node

Use PostCSS Normalize to process your CSS:

require('postcss-normalize').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Normalize as a plugin:

postcss([
	require('postcss-normalize')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Normalize in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
	return gulp.src('./src/*.css').pipe(
		postcss([
			require('postcss-normalize')({ /* options */ })
		])
	).pipe(
		gulp.dest('.')
	);
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Normalize in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-normalize')({ /* options */ })
			]
		},
		dist: {
			src: '*.css'
		}
	}
});

Changelog

3.0.0 (May 26, 2017)

• Use csstools/normalize.css 7.
• Change the insertion point to @import-normalize to avoid confusion or collision with standard import behavior.