Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
postcss-normalize
Advanced tools
Weekly downloads
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,672,683 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.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.