@csstools/postcss-initial

What is @csstools/postcss-initial?

@csstools/postcss-initial 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 user agents by explicitly setting properties to their default values.

What are @csstools/postcss-initial's main functionalities?

Resetting CSS properties to their initial values

This feature allows you to reset all CSS properties of an element to their initial values using the `all: initial;` declaration. This can be useful for removing all inherited styles and starting with a clean slate.

/* Input CSS */
.element {
  all: initial;
}

/* Output CSS */
.element {
  all: initial;
}

Resetting specific CSS properties

You can reset specific CSS properties to their initial values. This is useful when you want to reset only certain properties without affecting others.

/* Input CSS */
.element {
  color: initial;
  font-size: initial;
}

/* Output CSS */
.element {
  color: initial;
  font-size: initial;
}

Other packages similar to @csstools/postcss-initial

postcss-preset-env

postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins, including those for resetting CSS properties, but it is more comprehensive and includes many other features.

postcss-normalize

postcss-normalize lets you use the parts of normalize.css or sanitize.css that you need from your browserslist. It is similar in that it helps to standardize styles across browsers, but it focuses on normalization rather than resetting to initial values.

README

PostCSS Initial

npm install @csstools/postcss-initial --save-dev

PostCSS Initial fallback the initial keyword following the CSS Cascade 4 Specification.

.foo {
	border: initial;
}

/* becomes */

.foo {
	border: medium none currentcolor;
	border: initial;
}

See prior work by maximkoretskiy here postcss-initial To ensure long term maintenance and to provide the needed features this plugin was recreated based on maximkoretskiy's work.

Usage

Add PostCSS Initial to your project:

npm install postcss @csstools/postcss-initial --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssInitial = require('@csstools/postcss-initial');

postcss([
	postcssInitial(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssInitial({ preserve: false })

.foo {
	border: initial;
}

/* becomes */

.foo {
	border: medium none currentcolor;
}