csstools/postcss-normalizePublic

NotificationsYou must be signed in to change notification settings
Fork39
Star836

Use the parts of normalize.css (or sanitize.css) you need from your browserslist

License

CC0-1.0 license

836 stars 39 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 46 Commits
.github/workflows		.github/workflows
src		src
test		test
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.rollup.mjs		.rollup.mjs
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
INSTALL.md		INSTALL.md
LICENSE.md		LICENSE.md
README.md		README.md
SECURITY.md		SECURITY.md
index.cjs		index.cjs
index.mjs		index.mjs
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

PostCSS Normalize

PostCSS Normalize lets you use the parts ofnormalize.css orsanitize.cssthat you need from yourbrowserslist.

@import"normalize.css";

@import"sanitize.css";

PostCSS Normalize uses a non-opinionated version ofnormalize.css, butan opinionated version may also be used.

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

Examples

Here is a sample of whatnormalize.css looks like when thebrowserslistisie >= 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 thebrowserslist isie >= 10:

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

Usage

AddPostCSS Normalize to your project:

npm install postcss-normalize --save-dev

Add abrowserslist entry inpackage.json:

{"browserslist":"last 2 versions"}

UsePostCSS Normalize to process your CSS:

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

Or use it as aPostCSS plugin:

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

PostCSS Normalize runs in all Node environments, with special instructionsfor:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

PostCSS Import Usage

PostCSS Normalize includes apostcssImport function to configurePostCSS Import and allow you to continue using the@import syntax.

constpostcss=require('postcss')constpostcssImport=require('postcss-import')constpostcssNormalize=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 conflictswith@import transforms.

@import-normalize;

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

@import-sanitize;

Options

allowDuplicates

TheallowDuplicates option determines whether multiple, duplicate insertionsof CSS libraries are allowed. By default, duplicate libraries are omitted.

postcssNormalize({allowDuplicates:true})

forceImport

TheforceImport option defines CSS libraries that will be inserted at thebeginning of the CSS file. Unless overriden byallowDuplicates, duplicateCSS libraries would still be omitted.

postcssNormalize({forceImport:true})

Specific CSS libraries may be defined.

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

browsers

Thebrowsers option defines an override of the project’sbrowserslist forPostCSS Normalize. This option should be avoided in leui of a browserslistfile.

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

CSS Libraries

PostCSS Normalize can includenormalize.css orsanitize.css andconfigure 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) */