postcss-initial

What is postcss-initial?

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.

What are postcss-initial's main functionalities?

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);
});

Other packages similar to postcss-initial

normalize.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

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

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 Initial

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

Options

reset

Takes string. Describes what subset of rules should be unsetted with all property (to reduce code weight). Possible subsets: all, inherited. Default value: 'all'.

replace

Takes boolean. Replace the initial with the fallback instead of adding it. Default value: false.

Usage

postcss([ require('postcss-initial')({
  reset: 'inherited' // reset only inherited rules
}) ])

See PostCSS docs for examples for your environment.

Changelog