Support width: fill-available/stretch

[LB4027221]

for example:
width: fill-available; should transfer to width: -webkit-fill-available; width: -moz-fill-available;

[yisibl]

Current browser implementations are -webkit-fill-available or -moz-available, and while this is not consistent with the stretch name in the CSS spec, given that it is already widely supported, we should support automatically prefixing them, which is also consistent with Autoprefixer.

The main point is that there are many pages that already actually use width: fill-available, which can break the user experience of migrating to parcel-css.

https://caniuse.com/mdn-css_properties_width_stretch

Autoprefixer

input

.foo {
  width: fill-available;
}

.bar {
  width: stretch;
}

output

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: > 0%
*/

.foo {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
}

.bar {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

[devongovett]

Above commit implements vendor prefixing for stretch, fit-content, min-content, and max-content values.

Is width: fill-available actually supported anywhere unprefixed? I don't think it's a good idea to support it if not. I guess we should only support prefixing the standard stretch value?

[yisibl]

Thanks for the quick implementation!

Indeed, the fact that fill-available is not in the current spec does not preclude the CSS spec from adding it to the spec later as a historical legacy value, and there is already precedent for this.

For parcel-css, I respect your choice. Our business code should replace the fill-available with the standard stretch.

[yisibl]

There may be a few more details to note: postcss/autoprefixer#1035 (comment)

[devongovett]

Thanks. I think for now we'll support prefixing the current standard syntax. If it becomes a real problem, we could add support for parsing fill-available (but output stretch in addition to prefixes).