Added correct prefixing for stretch, fill and fill-available values

src/supported-value.js

@@ -75,12 +75,28 @@ export default function supportedValue(property, value) {
   if (transitionProperties[property]) {
     prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback)
   } else if (el.style[property] === '') {
+    const prePrefixedValue = prefixedValue
+
     // Value with a vendor prefix.
     prefixedValue = prefix.css + prefixedValue
 
     // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
     if (prefixedValue === '-ms-flex') el.style[property] = '-ms-flexbox'
 
+    // Change "strech" and "fill" values to "fill-available" and prefix them correctly
+    if (
+      prePrefixedValue === 'stretch' ||
+      prePrefixedValue === 'fill' ||
+      prePrefixedValue === 'fill-available'
+    ) {
+      prefixedValue = 'fill-available'
+      if (prefix.js === 'Moz') {
+        prefixedValue = '-moz-available'
+      } else if (prefix.js !== 'ms' || prefix.browser === 'edge') {
+        prefixedValue = '-webkit-fill-available'
+      }
+    }
+
     // Test prefixed value.
     el.style[property] = prefixedValue
 

src/supported-value.test.js

@@ -78,5 +78,37 @@ describe('css-vendor', () => {
         prefix.js === 'ms' && prefix.browser !== 'edge' ? false : value
       )
     })
+
+    it('should return known fill-available value prefixed', () => {
+      let value = 'fill-available'
+      if (prefix.js === 'Moz') {
+        value = '-moz-available'
+      } else if (prefix.js !== 'ms' || prefix.browser === 'edge') {
+        value = '-webkit-fill-available'
+      }
+      expect(supportedValue('width', 'fill-available')).to.eql(
+        prefix.js === 'ms' ? false : `${value}`
+      )
+    })
+
+    it('should return known stretch value prefixed', () => {
+      let value = 'fill-available'
+      if (prefix.js === 'Moz') {
+        value = '-moz-available'
+      } else if (prefix.js !== 'ms' || prefix.browser === 'edge') {
+        value = '-webkit-fill-available'
+      }
+      expect(supportedValue('width', 'stretch')).to.eql(prefix.js === 'ms' ? false : `${value}`)
+    })
+
+    it('should return known fill value prefixed', () => {
+      let value = 'fill-available'
+      if (prefix.js === 'Moz') {
+        value = '-moz-available'
+      } else if (prefix.js !== 'ms' || prefix.browser === 'edge') {
+        value = '-webkit-fill-available'
+      }
+      expect(supportedValue('width', 'fill')).to.eql(prefix.js === 'ms' ? false : `${value}`)
+    })
   })
 })