feat: Add scope id to keyframes name (#43)

* refactor: do not include `data-v-` prefix in id

* chore: bump eslint config

* feat: should add scope id to keyframes name

Author: ktsn

.eslintrc.yml

@@ -1,6 +1,4 @@
 ---
   extends: eslint-config-ktsn
-  parserOptions:
-    ecmaVersion: 6
   rules:
     no-console: 0

lib/modules/add-scoped-id.js

@@ -46,7 +46,7 @@ const addScopedIdPlugin = postcss.plugin('add-scoped-id', options => {
 
       if (target) {
         selector.insertAfter(target, selectorParser.attribute({
-          attribute: options.id
+          attribute: 'data-v-' + options.id
         }))
       }
 
@@ -55,8 +55,40 @@ const addScopedIdPlugin = postcss.plugin('add-scoped-id', options => {
   })
 
   return root => {
-    root.walkRules(rule => {
-      rule.selector = selectorTransformer.process(rule.selector).result
+    const keyframes = new Map()
+
+    root.each(function transformNode (node) {
+      if (node.type === 'atrule') {
+        if (/-?keyframes$/.test(node.name)) {
+          const before = node.params
+          const after = node.params + '-' + options.id
+          node.params = after
+          keyframes.set(before, after)
+        } else {
+          node.each(transformNode)
+        }
+      } else {
+        node.selector = selectorTransformer.process(node.selector).result
+      }
+    })
+
+    keyframes.forEach((after, before) => {
+      root.walkDecls(decl => {
+        if (/-?animation-name$/.test(decl.prop)) {
+          decl.value = decl.value.split(',')
+            .map(v => v.trim() === before ? after : v)
+            .join(',')
+        } else if (/-?animation$/.test(decl.prop)) {
+          decl.value = decl.value.split(',')
+            .map(v => {
+              const [first, ...tail] = v.trim().split(/\s+/)
+              return first === before
+                ? [after, ...tail].join(' ')
+                : v
+            })
+            .join(',')
+        }
+      })
     })
   }
 })

lib/template-loader.js

@@ -12,7 +12,7 @@ const Builder = require('./builder/builder')
 module.exports = function (content) {
   this.cacheable()
   const isServer = this.options.target === 'node'
-  const id = `data-v-${genId(this.resourcePath, process.cwd())}`
+  const id = genId(this.resourcePath, process.cwd())
 
   // Acquire the query of target file
   const { style: stylePath } = loaderUtils.parseQuery('?' + this.request.split('?').pop())
@@ -70,7 +70,7 @@ module.exports = function (content) {
     // Set _scopeId if scoped CSS is enabled
     if (options.scoped) {
       builder.addLine(`
-        options._scopeId = '${id}'
+        options._scopeId = 'data-v-${id}'
       `)
     }
 

package.json

@@ -44,7 +44,7 @@
     "babel-register": "^6.24.0",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
-    "eslint-config-ktsn": "^1.0.0",
+    "eslint-config-ktsn": "^1.0.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",

test/modules/add-scoped-id.spec.js

@@ -6,31 +6,31 @@ const addScopedId = require('../../lib/modules/add-scoped-id')
 describe('add scoped id module', () => {
   it('should add scoped id into the last node for each selector', done => {
     test(
-      'data-v-1',
+      '1',
       'h1, h2 .foo {} h3 {}',
       'h1[data-v-1], h2 .foo[data-v-1] {} h3[data-v-1] {}'
     ).then(done)
   })
 
   it('should not add scoped id into pseudo element/class', done => {
     test(
-      'data-v-1',
+      '1',
       'p::before {} .test:first-child {}',
       'p[data-v-1]::before {} .test[data-v-1]:first-child {}'
     ).then(done)
   })
 
   it('should add scoped id into the selectors in at-rules', done => {
     test(
-      'data-v-1',
+      '1',
       '@media screen { p {} }',
       '@media screen { p[data-v-1] {} }'
     ).then(done)
   })
 
   it('should generate source map', done => {
     test(
-      'data-v-1',
+      '1',
       'div p {}',
       'div p[data-v-1] {}',
       true
@@ -72,7 +72,7 @@ describe('add scoped id module', () => {
     const map = JSON.parse(Base64.decode(m[2]))
 
     test(
-      'data-v-1',
+      '1',
       css,
       [
         'div p[data-v-1] {',
@@ -94,11 +94,40 @@ describe('add scoped id module', () => {
 
   it('should add scope attribute the selector before >>> combinator', done => {
     test(
-      'data-v-1',
+      '1',
       '.foo .bar >>> .baz {}',
       '.foo .bar[data-v-1] .baz {}'
     ).then(done)
   })
+
+  it('should add scope id to keyframes', done => {
+    const id = 'abc'
+    const input = [
+      '.foo { animation: test 1s; }',
+      '.bar { animation-name: test; animation-duration: 1s; }',
+      '@keyframes test {',
+      '  0% { opacity: 0; }',
+      '  100% { opacity: 1; }',
+      '}',
+      '@-webkit-keyframes test {',
+      '  from { opacity: 0; }',
+      '  to { opacity: 1; }',
+      '}'
+    ].join('\n')
+    const expected = [
+      `.foo[data-v-${id}] { animation: test-${id} 1s; }`,
+      `.bar[data-v-${id}] { animation-name: test-${id}; animation-duration: 1s; }`,
+      `@keyframes test-${id} {`,
+      '  0% { opacity: 0; }',
+      '  100% { opacity: 1; }',
+      '}',
+      `@-webkit-keyframes test-${id} {`,
+      '  from { opacity: 0; }',
+      '  to { opacity: 1; }',
+      '}'
+    ].join('\n')
+    test(id, input, expected).then(done)
+  })
 })
 
 function test (id, input, expected, map) {