min-height: stretch is not a valid property value

[angelikatyborska]

In box-sizing.scss, there's this code:

#{layout.$viewport-elements} {
  height: 100%;
  min-height: stretch;
}

but stretch is not a valid value for the min-height property. See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#syntax

[angelikatyborska]

I read a bit too fast 😁 it is "valid, but experimental". According to MDN, it's not supported in Firefox:

But according to caniuse, it's not supported anywhere without a prefix. min-height: stretch does not work in my Chrome, but min-height: -webkit-fill-available does.

[angelikatyborska]

The whole reason I noticed this is our current backend client project, which just imports bitstyles with no extra postprocessing like autoprefixer. In our recent frontend client project, we had autoprefixer so it did it's job:

Is the assumption that users of bitstyles are supposed to use autoprefixer?

[planktonic]

It has been written with autoprefixer in mind — write modern CSS, rely on autoprefixer to handle some of the backwards-compatibility — but it’s not explicitly required. There’s never (until now!) been an instance where not using autoprefixer would break a feature or component even for modern browsers — the reduction of support from not using autoprefixer has been seen as a user decision.

I guess we have a few options:

• require autoprefixer as a peer dependency
• don’t require it, but add a note to our readme pointing out that there may be issues if you don’t use it
• collate which of the three min-height declarations are actually valid & used in each browser, then use that/those. We should check what autoprefixer, cssnano etc do with that too i.e. check the final minified CSS output

Did I miss any?