[postcss-preset-env] needs documentation clarification

[fchastanet]

Hello,
I'm checking this project for the first time, and I didn't find the answer in your documentation.
Can you tell me what is the difference between the plugin postcss-preset-env and autoprefixer ?

Or can you correct me if my analysis is wrong ?
cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

"Can I use" is for browser implementation while CSSDB is for “on which state is this CSS feature related to the standardization, no matter some browser already support it or not". Said differently, cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. Before being standardized(stage 4) a css feature go through 3 stages(Aspirational, Experimental, Allowable) or Rejected https://github.com/csstools/cssdb/blob/main/STAGES.md

So if I understand well, PostCSS Preset Env allows to convert some css proposals before being validated to css compatible with targetted browsers using polyfills provided by cssdb.

am I right ?

[Antonio-Laguna]

Hello @fchastanet !

Thanks for reaching out to clarify this.

CSSDB is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

This is correct, or at least that's what we're trying to communicate.

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

That's correct too. We do not maintain Can I Use though but we leverage it, more on that below

"Can I use" is for browser implementation while CSSDB is for “on which state is this CSS feature related to the standardization, no matter some browser already support it or not". Said differently, CSSDB is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. Before being standardized(stage 4) a CSS feature go through 3 stages(Aspirational, Experimental, Allowable) or Rejected https://github.com/csstools/cssdb/blob/main/STAGES.md

Correct again

So if I understand well, PostCSS Preset Env allows to convert some CSS proposals before being validated to CSS compatible with targetted browsers using polyfills provided by CSSDB.

Exactly.

---

CSSDB exposes the browser support that each feature has. If you check on the site, you can see that all, for example, has wide browser support. That data can come from Can I Use or from MDN (from mdn/browser-compat-data)

However, if your site doesn't need to support IE, for example, you wouldn't want for all:

a {
  all: initial;
}

To be expanded to:

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

Since that's a waste given that the browser is perfectly capable of understanding what all would do.

What PostCSS Preset Env does is to take that support that comes from those sites and guess from a browserlist
whether that transformation needs to happen or not. It does also pack Autoprefixer within and shares the list with it so certain prefixes aren't applied unless you're going to need them given your browser support list.

Did this clarify your questions?

I've been thinking recently about expanding this information on the READMEs so it's more clear what's being applied, why it's being applied, and what does everything means. We also want to be able to provide a mechanism to let you use features that have been implemented by, at least, a certain amount of vendors given that stages are not always a good indicator of stability.

[fchastanet]

Thank you very much for the detailed answer, it should definitively be part of the Readme.md.

[romainmenke]

@fchastanet We updated the readme and hope that everything is clearer now : https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#readme

Going to close this one but feel free to give further feedback here or open a new issue.

Thank you for giving us these insights!

[fchastanet]

Thank you very much for the readme clarification !