Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
postcss-normalize
Advanced tools
Changelog
10.0.1 (September 15, 2021)
sanitize.css
to support 13+ (major).This version removes support for pages.css
yet is released as a patch version
to resolve issues in Create React App. This is a betrayal of semantic
versioning.
Readme
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:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
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 "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) */
FAQs
Use the parts of normalize.css or sanitize.css you need from your browserslist
The npm package postcss-normalize receives a total of 2,532,328 weekly downloads. As such, postcss-normalize popularity was classified as popular.
We found that postcss-normalize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.