make keyframes scoped (properly)

Author: yyx990803

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

@@ -3,11 +3,18 @@ var selectorParser = require('postcss-selector-parser')
 
 module.exports = postcss.plugin('add-id', function (opts) {
   return function (root) {
+    var keyframes = Object.create(null)
+
     root.each(function rewriteSelector (node) {
       if (!node.selector) {
         // handle media queries
-        if (node.type === 'atrule' && node.name === 'media') {
-          node.each(rewriteSelector)
+        if (node.type === 'atrule') {
+          if (node.name === 'media') {
+            node.each(rewriteSelector)
+          } else if (node.name === 'keyframes') {
+            // register keyframes
+            keyframes[node.params] = node.params = node.params + '-' + opts.id
+          }
         }
         return
       }
@@ -23,5 +30,36 @@ module.exports = postcss.plugin('add-id', function (opts) {
         })
       }).process(node.selector).result
     })
+
+    // If keyframes are found in this <style>, find and rewrite animation names
+    // in declarations
+    //
+    // TODO: the keyframes tracking needs to be across multiple <style> tags
+    // that belongs to the same component...
+    if (Object.keys(keyframes).length) {
+      root.walkDecls(decl => {
+        // individual animation-name declaration
+        if (/-?animation-name$/.test(decl.prop)) {
+          decl.value = decl.value.split(',')
+            .map(v => keyframes[v.trim()])
+            .filter(v => v)
+            .join(',')
+        }
+        // shorthand
+        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(' ')
+              } else {
+                return v
+              }
+            })
+            .join(',')
+        }
+      })
+    }
   }
 })

test/fixtures/scoped-css.vue

@@ -8,6 +8,17 @@
 h1 {
   color: green;
 }
+.anim {
+  animation: color 5s infinite, other 5s;
+}
+.anim-2 {
+  animation-name: color;
+  animation-duration: 5s;
+}
+@keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
 </style>
 
 <template>

test/test.js

@@ -220,9 +220,13 @@ describe('vue-loader', function () {
 
       var style = window.document.querySelector('style').textContent
       style = normalizeNewline(style)
-      expect(style).to.contain('.test[' + id + '] {\n  color: yellow;\n}')
-      expect(style).to.contain('.test[' + id + ']:after {\n  content: \'bye!\';\n}')
-      expect(style).to.contain('h1[' + id + '] {\n  color: green;\n}')
+      expect(style).to.contain(`.test[${id}] {\n  color: yellow;\n}`)
+      expect(style).to.contain(`.test[${id}]:after {\n  content: \'bye!\';\n}`)
+      expect(style).to.contain(`h1[${id}] {\n  color: green;\n}`)
+      // 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(`@keyframes color-${id} {`)
       done()
     })
   })