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.
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 | Webpack | Create React App | Gulp | Grunt |
---|
Allows you to insert multiple, duplicate insertions of normalize.css rules.
The default is false
.
postcssNormalize({
allowDuplicates: true
});
Allows you to override of the project’s browserslist for PostCSS Normalize.
The default is false
.
postcssNormalize({
browsers: 'last 2 versions'
});
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
});