chore: Scoped CSS transform bug fixes

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

@@ -20,7 +20,7 @@ module.exports = postcss.plugin('add-id', function (opts) {
       }
       node.selector = selectorParser(function (selectors) {
         selectors.each(function (selector) {
-          var node = null
+          let node = null
           selector.each(function (n) {
             // ">>>" combinator
             if (n.type === 'combinator' && n.value === '>>>') {
@@ -30,9 +30,9 @@ module.exports = postcss.plugin('add-id', function (opts) {
             }
             // /deep/ alias for >>>, since >>> doesn't work in SASS
             if (n.type === 'tag' && n.value === '/deep/') {
-              var next = n.next()
-              if (next.type === 'combinator' && next.value === ' ') {
-                next.remove()
+              const prev = n.prev()
+              if (prev.type === 'combinator' && prev.value === ' ') {
+                prev.remove()
               }
               n.remove()
               return false
@@ -64,10 +64,12 @@ module.exports = postcss.plugin('add-id', function (opts) {
         if (/-?animation$/.test(decl.prop)) {
           decl.value = decl.value.split(',')
             .map(v => {
-              var vals = v.split(/\s+/)
-              var name = vals[0]
-              if (keyframes[name]) {
-                return [keyframes[name]].concat(vals.slice(1)).join(' ')
+              const vals = v.trim().split(/\s+/)
+              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

@@ -0,0 +1,57 @@
+<style scoped>
+.test {
+  color: red;
+}
+.test:after {
+  content: 'bye!';
+}
+h1 {
+  color: green;
+}
+.anim {
+  animation: color 5s infinite, other 5s;
+}
+.anim-2 {
+  animation-name: color;
+  animation-duration: 5s;
+}
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
+.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; }
+}
+@-webkit-keyframes color {
+  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;
+}
+</style>
+
+<template>
+<div>
+  <div><h1>hi</h1></div>
+  <p class="abc def">hi</p>
+  <template v-if="!ok"><p class="test" id="test">Hello</p></template>
+  <svg><template><p></p></template></svg>
+</div>
+</template>