From a9fc5ad9a324be9270e386df71e550c40510631e Mon Sep 17 00:00:00 2001
From: Oleh Aloshkin <olegaleshkin@gmail.com>
Date: Sat, 9 May 2020 13:18:30 +0200
Subject: [PATCH 1/2] Added correct prefixing for stretch, fill and
 fill-available values

---
 src/supported-value.js      | 16 ++++++++++++++++
 src/supported-value.test.js | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/src/supported-value.js b/src/supported-value.js
index 53316dcb..a9138780 100644
--- a/src/supported-value.js
+++ b/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 it 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
 
diff --git a/src/supported-value.test.js b/src/supported-value.test.js
index a047a5b2..8871ef60 100644
--- a/src/supported-value.test.js
+++ b/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}`)
+    })
   })
 })

From 1bddd09659583da205a75d954f444206f3a2593f Mon Sep 17 00:00:00 2001
From: Oleh Aloshkin <olegaleshkin@gmail.com>
Date: Sun, 9 May 2021 11:52:52 +0200
Subject: [PATCH 2/2] it -> them

---
 src/supported-value.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/supported-value.js b/src/supported-value.js
index a9138780..14c24159 100644
--- a/src/supported-value.js
+++ b/src/supported-value.js
@@ -83,7 +83,7 @@ export default function supportedValue(property, value) {
     // 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 it correctly
+    // Change "strech" and "fill" values to "fill-available" and prefix them correctly
     if (
       prePrefixedValue === 'stretch' ||
       prePrefixedValue === 'fill' ||