From 750e9cf6dd7f35cdea456626c4732fa05df943a3 Mon Sep 17 00:00:00 2001
From: Daniel Chabr <DanielChabr@smarttech.com>
Date: Tue, 31 Oct 2017 12:02:37 -0600
Subject: [PATCH] fix: scoping of multiple animations

---
 lib/style-compiler/plugins/scope-id.js |  2 +-
 test/fixtures/scoped-css.vue           | 16 ++++++++++++++++
 test/test.js                           |  5 +++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/lib/style-compiler/plugins/scope-id.js b/lib/style-compiler/plugins/scope-id.js
index 814f488a2..808cc5305 100644
--- a/lib/style-compiler/plugins/scope-id.js
+++ b/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(' ')
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index ef2d41b7f..7eacac8be 100644
--- a/test/fixtures/scoped-css.vue
+++ b/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;
 }
diff --git a/test/test.js b/test/test.js
index cc29b9b09..c18d135ed 100644
--- a/test/test.js
+++ b/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()