check transition-property value list before warn (#1385)

* check transition-property value list before warn

* new transition-* test uses `check` function

* use one-line assignment for `hasAssociatedProp` transition check

* make eslint happy

lib/transition.js

@@ -118,28 +118,41 @@ class Transition {
       return
     }
 
+    let isPrefixed = false
+    let hasAssociatedProp = false
+
     decl.parent.each(i => {
       if (i.type !== 'decl') {
         return undefined
       }
       if (i.prop.indexOf('transition-') !== 0) {
         return undefined
       }
+      let values = list.comma(i.value)
+      // check if current Rule's transition-property comma separated value list needs prefixes
       if (i.prop === 'transition-property') {
+        values.forEach(value => {
+          let lookup = this.prefixes.add[value]
+          if (lookup && lookup.prefixes && lookup.prefixes.length > 0) {
+            isPrefixed = true
+          }
+        })
         return undefined
       }
-
-      if (list.comma(i.value).length > 1) {
-        decl.warn(
-          result,
-          'Replace transition-property to transition, ' +
-            'because Autoprefixer could not support ' +
-            'any cases of transition-property ' +
-            'and other transition-*'
-        )
-      }
+      // check if another transition-* prop in current Rule has comma separated value list
+      hasAssociatedProp = hasAssociatedProp || values.length > 1
       return false
     })
+
+    if (isPrefixed && hasAssociatedProp) {
+      decl.warn(
+        result,
+        'Replace transition-property to transition, ' +
+          'because Autoprefixer could not support ' +
+          'any cases of transition-property ' +
+          'and other transition-*'
+      )
+    }
   }
 
   /**

test/autoprefixer.test.ts

@@ -369,6 +369,9 @@ it('prefixes transition', () => {
   ])
 })
 
+it('does not raise unnecessary warnings when prefixing transition', () =>
+  check('transition-no-warning'))
+
 it('works with broken transition', () => {
   let input = 'a{transition:,,}'
   let output = 'a{-webkit-transition:;-o-transition:;transition:}'

test/cases/transition-no-warning.css

@@ -0,0 +1,4 @@
+.no-warn {
+  transition-property: color, opacity;
+  transition-duration: 1s, 2s;
+}

test/cases/transition-no-warning.out.css

@@ -0,0 +1,8 @@
+.no-warn {
+  -webkit-transition-property: color, opacity;
+  -o-transition-property: color, opacity;
+  transition-property: color, opacity;
+  -webkit-transition-duration: 1s, 2s;
+       -o-transition-duration: 1s, 2s;
+          transition-duration: 1s, 2s;
+}