fix: animation value replacement (#1058)

Author: Justineo

lib/style-compiler/plugins/scope-id.js

@@ -64,9 +64,10 @@ module.exports = postcss.plugin('add-id', ({ id }) => root => {
         decl.value = decl.value.split(',')
           .map(v => {
             const vals = v.trim().split(/\s+/)
-            const name = vals[0]
-            if (keyframes[name]) {
-              return [keyframes[name]].concat(vals.slice(1)).join(' ')
+            const i = vals.findIndex(val => keyframes[val])
+            if (i !== -1) {
+              vals.splice(i, 1, keyframes[vals[i]])
+              return vals.join(' ')
             } else {
               return v
             }

test/fixtures/scoped-css.vue

@@ -15,6 +15,9 @@ h1 {
   animation-name: color;
   animation-duration: 5s;
 }
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
 .anim-multiple {
   animation: color 5s infinite, opacity 2s;
 }

test/test.js

@@ -211,6 +211,7 @@ describe('vue-loader', () => {
       // scoped keyframes
       expect(style).to.contain(`.anim[${id}] {\n  animation: color-${id} 5s infinite, other 5s;`)
       expect(style).to.contain(`.anim-2[${id}] {\n  animation-name: color-${id}`)
+      expect(style).to.contain(`.anim-3[${id}] {\n  animation: 5s color-${id} infinite, 5s other;`)
       expect(style).to.contain(`@keyframes color-${id} {`)
       expect(style).to.contain(`@-webkit-keyframes color-${id} {`)