From 750e9cf6dd7f35cdea456626c4732fa05df943a3 Mon Sep 17 00:00:00 2001 From: Daniel Chabr 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()