What is the purpose of postcss-autoreset and postcss-initial

Question

What is the purpose for:

• PostCSS Autoreset
• PostCSS Initial

The documentation is very sparse on both and doesn't really explain why one should use them and what there purpose is.

I've tried autoreset. It seems to place all: initial on every element you style. This seems very wasteful when looking at the output.

How is it any different from:

* {
    all: initial,
    font-family: "Roboto"
}

Looking at the code for autoreset it seems to do just that: https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

I don't get why this is better than using *

Answer 1

postcss-autoreset protects your from inherited properties in CSS.

Imagine that you wrote a component and publish it to npm. You used BEM or CSS Modules, so selectors are isolated. But some developer took your component to webpage with:

* {
  box-sizing: border-box;
  line-height: 2
}

Because of non-default box-sizing all your sizes become broken. Because os non-standard line-height text become bigger and broke design.

Here is a real example of such issue in EmojiMart component.

postcss-autoreset will put a all: initial to every selector in your component CSS:

.component {
  all: initial; /* added by postcss-autoreset, you didn’t write it */
  width: 100px;
  padding: 10px;
}
.component_title {
  all: initial; /* added by postcss-autoreset, you didn’t write it */
  height: 20px;
}

As result this auto-inserted all: initial disable user box-sizing and line-height in your component and your component looks in same way in user website.