Feature/vendor specific transition (#1260)

* Add tests

* Check if transition prop is inside vendor spec rule

* Filter prefixes for transition + update tests

* Remove cache and make logic more clear

* Remove process method, update ruleVendorPrefixes

* Update logic for old flex prefixes

lib/transition.js

@@ -2,6 +2,8 @@ let parser = require('postcss-value-parser')
 let vendor = require('postcss').vendor
 let list = require('postcss').list
 
+let Browsers = require('./browsers')
+
 class Transition {
     props = ['transition', 'transition-property'];
 
@@ -15,7 +17,8 @@ class Transition {
     add (decl, result) {
       let prefix, prop
       let add = this.prefixes.add[decl.prop]
-      let declPrefixes = (add && add.prefixes) || []
+      let vendorPrefixes = this.ruleVendorPrefixes(decl)
+      let declPrefixes = vendorPrefixes || (add && add.prefixes) || []
 
       let params = this.parse(decl.value)
       let names = params.map(i => this.findProp(i))
@@ -33,6 +36,10 @@ class Transition {
         if (!prefixer || !prefixer.prefixes) continue
 
         for (prefix of prefixer.prefixes) {
+          if (vendorPrefixes && !vendorPrefixes.some(p => prefix.includes(p))) {
+            continue
+          }
+
           let prefixed = this.prefixes.prefixed(prop, prefix)
           if (prefixed !== '-ms-transform' && !names.includes(prefixed)) {
             if (!this.disabled(prop, prefix)) {
@@ -294,6 +301,24 @@ class Transition {
       }
       return undefined
     }
+
+    /**
+     * Check if transition prop is inside vendor specific rule
+     */
+    ruleVendorPrefixes (decl) {
+      let { parent } = decl
+
+      if (parent.type !== 'rule') {
+        return false
+      } else if (!parent.selector.includes(':-')) {
+        return false
+      }
+
+      let selectors = Browsers.prefixes().filter(s =>
+        parent.selector.includes(':' + s))
+
+      return selectors.length > 0 ? selectors : false
+    }
 }
 
 module.exports = Transition

test/autoprefixer.test.js

@@ -54,6 +54,9 @@ let ffgradienter = autoprefixer({
 let selectorer = autoprefixer({
   overrideBrowserslist: ['Chrome 25', 'Firefox > 17', 'IE 10', 'Edge 12']
 })
+let transitionSpec = autoprefixer({
+  overrideBrowserslist: ['Chrome > 19', 'Firefox 14', 'IE 10', 'Opera 12']
+})
 let intrinsicer = autoprefixer({
   overrideBrowserslist: ['Chrome 25', 'Firefox 22', 'Safari 10']
 })
@@ -134,6 +137,8 @@ function prefixer (name) {
     return supporter
   } else if (name === 'overscroll-behavior') {
     return overscroller
+  } else if (name === 'transition-spec') {
+    return transitionSpec
   } else {
     return compiler
   }
@@ -255,6 +260,7 @@ it('uses ignore next control comments', () => check('ignore-next'))
 it('uses block control comments', () => check('disabled'))
 it('has actual example in docs', () => check('example'))
 it('process grouping rules correctly', () => check('grouping-rule'))
+it('transition on vendor specific rule', () => check('transition-spec'))
 
 it('uses control comments to whole scope', () => {
   let input = read('scope')

test/cases/transition-spec.css

@@ -0,0 +1,55 @@
+input[type=range]::-moz-range-thumb {
+  transition: color 200ms, transform 200ms;
+  transform: rotate(10deg);
+}
+
+input[type=range]::-webkit-slider-thumb {
+  transition: none;
+  transition-property: all;
+}
+
+button::-moz-submit-invalid {
+  opacity: 1;
+  transform: translateX(45px);
+  transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+}
+
+@supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) {
+  button::-moz-submit-invalid {
+    opacity: 1;
+    transform: translateX(45px);
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+  }
+
+  button {
+    opacity: 1;
+    transform: translateX(45px);
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+  }
+}
+
+button::-webkit-search-cancel-button {
+  display: flex;
+  transition: color 200ms, transform 200ms;
+  transform: rotate(10deg);
+}
+
+button::-webkit-search-cancel-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, transform 200ms;
+  transition: color 200ms, transform 200ms, -webkit-transform 200ms;
+  -webkit-transform: rotate(10deg);
+          transform: rotate(10deg);
+}
+
+.a::-webkit-search-cancel-button {
+  display: flex;
+  flex-flow: row;
+  order: 0;
+  flex: 0 1 2;
+  transition: flex 200ms;
+}

test/cases/transition-spec.out.css

@@ -0,0 +1,92 @@
+input[type=range]::-moz-range-thumb {
+  -moz-transition: color 200ms, transform 200ms, -moz-transform 200ms;
+  transition: color 200ms, transform 200ms;
+  transition: color 200ms, transform 200ms, -moz-transform 200ms;
+  -moz-transform: rotate(10deg);
+       transform: rotate(10deg);
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transition-property: all;
+  transition-property: all;
+}
+
+button::-moz-submit-invalid {
+  opacity: 1;
+  -moz-transform: translateX(45px);
+       transform: translateX(45px);
+  -moz-transition: opacity 0.5s 2s, transform 0.5s 0.5s, -moz-transform 0.5s 0.5s;
+  transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+  transition: opacity 0.5s 2s, transform 0.5s 0.5s, -moz-transform 0.5s 0.5s;
+}
+
+@supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) {
+  button::-moz-submit-invalid {
+    opacity: 1;
+    -moz-transform: translateX(45px);
+         transform: translateX(45px);
+    -moz-transition: opacity 0.5s 2s, transform 0.5s 0.5s, -moz-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s, -moz-transform 0.5s 0.5s;
+  }
+
+  button {
+    opacity: 1;
+    -webkit-transform: translateX(45px);
+       -moz-transform: translateX(45px);
+         -o-transform: translateX(45px);
+            transform: translateX(45px);
+    -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
+    -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
+    -moz-transition: opacity 0.5s 2s, transform 0.5s 0.5s, -moz-transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s;
+    transition: opacity 0.5s 2s, transform 0.5s 0.5s, -webkit-transform 0.5s 0.5s, -moz-transform 0.5s 0.5s, -o-transform 0.5s 0.5s;
+  }
+}
+
+button::-webkit-search-cancel-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, transform 200ms;
+  transition: color 200ms, transform 200ms, -webkit-transform 200ms;
+  -webkit-transform: rotate(10deg);
+          transform: rotate(10deg);
+}
+
+button::-webkit-search-cancel-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, -webkit-transform 200ms;
+  transition: color 200ms, transform 200ms;
+  transition: color 200ms, transform 200ms, -webkit-transform 200ms;
+  -webkit-transform: rotate(10deg);
+          transform: rotate(10deg);
+}
+
+.a::-webkit-search-cancel-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-flow: row;
+          flex-flow: row;
+  -webkit-box-ordinal-group: 1;
+  -webkit-order: 0;
+          order: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 2;
+          flex: 0 1 2;
+  -webkit-transition: -webkit-box-flex 200ms, -webkit-flex 200ms;
+  transition: -webkit-box-flex 200ms, -webkit-flex 200ms;
+  transition: flex 200ms;
+  transition: flex 200ms, -webkit-box-flex 200ms, -webkit-flex 200ms;
+}