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

@import "normalize.css";

@import "sanitize.css";

PostCSS Normalize uses a non-opinionated version of normalize.css, but an opinionated version may also be used.

@import "normalize.css/opinionated.css";

Here is a sample of what normalize.css looks like when the browserslist is ie >= 9:

/**  * 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; }

And here is the same sample when the browserslist is ie >= 10:

/**  * Remove the border on images inside links in IE 10-.  */ img { border-style: none; }

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:

const postcssNormalize = require('postcss-normalize') postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)

Or use it as a PostCSS plugin:

const postcss = require('postcss') const postcssNormalize = require('postcss-normalize') postcss([ postcssNormalize(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */)

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

PostCSS Normalize includes a postcssImport function to configure PostCSS Import and allow you to continue using the @import syntax.

const postcss = require('postcss') const postcssImport = require('postcss-import') const postcssNormalize = require('postcss-normalize') postcss([ postcssImport( postcssNormalize( /* pluginOptions (for PostCSS Normalize) */ ).postcssImport( /* pluginOptions (for PostCSS Import) */ ) ) ]) // now you can use @import "normalize.css", etc. again

Alternatively, use @import-normalize or @import-sanitize to avoid conflicts with @import transforms.

@import-normalize;

@import-normalize "normalize/opinionated.css";

@import-sanitize;

The allowDuplicates option determines whether multiple, duplicate insertions of CSS libraries are allowed. By default, duplicate libraries are omitted.

postcssNormalize({ allowDuplicates: true })

The forceImport option defines CSS libraries that will be inserted at the beginning of the CSS file. Unless overriden by allowDuplicates, duplicate CSS libraries would still be omitted.

postcssNormalize({ forceImport: true })

Specific CSS libraries may be defined.

postcssNormalize({ forceImport: 'sanitize.css' })

The browsers option defines an override of the project’s browserslist for PostCSS Normalize. This option should be avoided in leui of a browserslist file.

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

PostCSS Normalize can include normalize.css or sanitize.css and configure either with the following combinations:

@import "normalize"; /* also, @import "normalize.css" */ @import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */ @import "sanitize"; /* also, @import "sanitize.css" */ @import "sanitize/assets"; /* also, @import "sanitize.css/assets.css" */ @import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */ @import "sanitize/reduce-motion"; /* also, @import "sanitize.css/reduce-motion.css" */ @import "sanitize/system-ui"; /* also, @import "sanitize.css/system-ui.css" */ @import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */ @import "sanitize/ui-monospace"; /* also, @import "sanitize.css/ui-monospace.css" */ @import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */