fix: animation value replacement (#1058)

vuejs · Dec 15, 2017 · 6d3c5b2 · 6d3c5b2
1 parent ddcea20
commit 6d3c5b2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/lib/style-compiler/plugins/scope-id.js b/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
             }

diff --git a/test/fixtures/scoped-css.vue b/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;
 }

diff --git a/test/test.js b/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} {`)