fix: scoping of multiple animations (#1030)

fix #1031

Author: danielchabr

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

@@ -63,7 +63,7 @@ module.exports = postcss.plugin('add-id', ({ id }) => root => {
       if (/-?animation$/.test(decl.prop)) {
         decl.value = decl.value.split(',')
           .map(v => {
-            const vals = v.split(/\s+/)
+            const vals = v.trim().split(/\s+/)
             const name = vals[0]
             if (keyframes[name]) {
               return [keyframes[name]].concat(vals.slice(1)).join(' ')

test/fixtures/scoped-css.vue

@@ -15,6 +15,14 @@ h1 {
   animation-name: color;
   animation-duration: 5s;
 }
+.anim-multiple {
+  animation: color 5s infinite, opacity 2s;
+}
+.anim-multiple-2 {
+  animation-name: color, opacity;
+  animation-duration: 5s, 2s;
+}
+
 @keyframes color {
   from { color: red; }
   to { color: green; }
@@ -23,6 +31,14 @@ h1 {
   from { color: red; }
   to { color: green; }
 }
+@keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
 .foo p >>> .bar {
   color: red;
 }

test/test.js

@@ -213,6 +213,11 @@ describe('vue-loader', () => {
       expect(style).to.contain(`.anim-2[${id}] {\n  animation-name: color-${id}`)
       expect(style).to.contain(`@keyframes color-${id} {`)
       expect(style).to.contain(`@-webkit-keyframes color-${id} {`)
+
+      expect(style).to.contain(`.anim-multiple[${id}] {\n  animation: color-${id} 5s infinite,opacity-${id} 2s;`)
+      expect(style).to.contain(`.anim-multiple-2[${id}] {\n  animation-name: color-${id},opacity-${id};`)
+      expect(style).to.contain(`@keyframes opacity-${id} {`)
+      expect(style).to.contain(`@-webkit-keyframes opacity-${id} {`)
       // >>> combinator
       expect(style).to.contain(`.foo p[${id}] .bar {\n  color: red;\n}`)
       done()