Fix stretch support

postcss · Mar 23, 2020 · a38e426 · a38e426
1 parent d3e5058
commit a38e426
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/data/prefixes.js b/data/prefixes.js
@@ -418,13 +418,20 @@ f(intrinsic, browsers =>
   })
 )
 
-f(intrinsic, { match: /x|\s#4/ }, browsers =>
+f(intrinsic, { match: /x|\s#4/ }, browsers => {
+  browsers = browsers.map(i => {
+    if (/safari/.test(i)) {
+      return i
+    } else {
+      return `${ i } old`
+    }
+  })
   prefix(['fill', 'fill-available', 'stretch'], {
     props: sizeProps,
     feature: 'intrinsic-width',
     browsers
   })
-)
+})
 
 f(intrinsic, { match: /x|\s#5/ }, browsers =>
   prefix(['fit-content'], {

diff --git a/lib/hacks/intrinsic.js b/lib/hacks/intrinsic.js
@@ -23,22 +23,26 @@ class Intrinsic extends Value {
   }
 
   replace (string, prefix) {
-    if (prefix === '-moz-' && this.isStretch()) {
+    if (prefix === '-moz- old' && this.isStretch()) {
       return string.replace(this.regexp(), '$1-moz-available$3')
-    }
-    if (prefix === '-webkit-' && this.isStretch()) {
+    } else if (prefix === '-webkit- old' && this.isStretch()) {
       return string.replace(this.regexp(), '$1-webkit-fill-available$3')
+    } else if (prefix === '-webkit-' && this.isStretch()) {
+      return string.replace(this.regexp(), '$1-webkit-stretch$3')
+    } else {
+      return super.replace(string, prefix)
     }
-    return super.replace(string, prefix)
   }
 
   old (prefix) {
     let prefixed = prefix + this.name
     if (this.isStretch()) {
-      if (prefix === '-moz-') {
+      if (prefix === '-moz- old') {
         prefixed = '-moz-available'
-      } else if (prefix === '-webkit-') {
+      } else if (prefix === '-webkit- old') {
         prefixed = '-webkit-fill-available'
+      } else if (prefix === '-webkit-') {
+        prefixed = '-webkit-stretch'
       }
     }
     return new OldValue(this.name, prefixed, prefixed, regexp(prefixed))

diff --git a/test/cases/intrinsic.out.css b/test/cases/intrinsic.out.css
@@ -1,5 +1,6 @@
 a {
   width: -webkit-fill-available;
+  width: -webkit-stretch;
   width: -moz-available;
   width: stretch;
 }
@@ -21,12 +22,14 @@ p {
 
 .outdated {
   width: -webkit-fill-available;
+  width: -webkit-stretch;
   width: -moz-available;
   width: fill;
 }
 
 .old {
   width: -webkit-fill-available;
+  width: -webkit-stretch;
   width: -moz-available;
   width: fill-available;
 }