postcss-initial
Advanced tools
Package description
The postcss-initial package is a PostCSS plugin that allows you to reset CSS properties to their initial values. This can be particularly useful for ensuring consistent styling across different browsers and for resetting styles in complex CSS structures.
Resetting all properties
This feature allows you to reset all CSS properties of an element to their initial values using the 'all' shorthand property.
/* Input CSS */
.element {
all: initial;
}
/* Output CSS */
.element {
all: initial;
}Resetting specific properties
This feature allows you to reset specific CSS properties to their initial values. This can be useful for selectively resetting styles without affecting other properties.
/* Input CSS */
.element {
color: initial;
font-size: initial;
}
/* Output CSS */
.element {
color: initial;
font-size: initial;
}Using with other PostCSS plugins
This feature demonstrates how to integrate postcss-initial with other PostCSS plugins in a build process. You can configure the plugin to reset all properties, only inherited properties, or none.
const postcss = require('postcss');
const initial = require('postcss-initial');
postcss([
initial({
reset: 'all' // or 'inherited' or 'none'
})
]).process(yourCSS).then(result => {
console.log(result.css);
});Normalize.css is a CSS library that provides better cross-browser consistency in the default styling of HTML elements. Unlike postcss-initial, which resets properties to their initial values, normalize.css aims to make built-in browser styling consistent across different browsers.
Reset-css is a CSS library that resets the styling of all HTML elements to a consistent baseline. It is similar to postcss-initial in that it aims to provide a clean slate for styling, but it does so by applying a predefined set of styles rather than resetting properties to their initial values.
Sanitize.css is a CSS library that provides a consistent, cross-browser default styling of HTML elements along with some opinionated defaults. It is similar to normalize.css but includes additional styles to further standardize the appearance of elements. Unlike postcss-initial, it does not reset properties to their initial values but rather applies a consistent set of styles.
Readme
PostCSS plugin to fallback initial keyword. Very useful in combination with
postcss-autoreset.
a {
animation: initial;
background: initial;
white-space: initial;
}
p {
background: url(/img1.png),
url(/img2.png);
background-repeat: initial no-repeat
}
a {
animation: none 0s ease 0s 1 normal none running;
animation: initial;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
background: initial;
white-space: normal;
white-space: initial;
}
p {
background: url(/img1.png),
url(/img2.png);
background-repeat: repeat no-repeat
}
Killer feature!
Universal reset from future css!
a {
all: initial;
}
a {
animation: none 0s ease 0s 1 normal none running;
backface-visibility: visible;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
border: medium none currentColor;
border-collapse: separate;
border-image: none;
border-radius: 0;
border-spacing: 0;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
caption-side: top;
clear: none;
clip: auto;
color: #000;
columns: auto;
column-count: auto;
column-fill: balance;
column-gap: normal;
column-rule: medium none currentColor;
column-span: 1;
column-width: auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: inline;
empty-cells: show;
float: none;
font-family: serif;
font-size: medium;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
height: auto;
hyphens: none;
left: auto;
letter-spacing: normal;
list-style: disc outside none;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
orphans: 2;
outline: medium none invert;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
perspective: none;
perspective-origin: 50% 50%;
position: static;
right: auto;
tab-size: 8;
table-layout: auto;
text-align: left;
text-align-last: auto;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-origin: 50% 50% 0;
transform-style: flat;
transition: none 0s ease 0s;
unicode-bidi: normal;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: auto;
word-spacing: normal;
z-index: auto;
all: initial;
}
Takes string.
Describes what subset of rules should be unsetted with all property (to reduce code weight).
Possible subsets: all, inherited.
Default value: 'all'.
Takes boolean.
Replace the initial with the fallback instead of adding it.
Default value: false.
postcss([ require('postcss-initial')({
reset: 'inherited' // reset only inherited rules
}) ])
See PostCSS docs for examples for your environment.
FAQs
PostCSS plugin to fallback initial keyword.
The npm package postcss-initial receives a total of 4,159,200 weekly downloads. As such, postcss-initial popularity was classified as popular.
We found that postcss-initial 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
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.