Skip to content

Commit 770a558

Browse files
committed
fix animation value replacement
1 parent e637c88 commit 770a558

File tree

3 files changed

+12
-7
lines changed

3 files changed

+12
-7
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,10 @@ module.exports = postcss.plugin('add-id', ({ id }) => root => {
6464
decl.value = decl.value.split(',')
6565
.map(v => {
6666
const vals = v.trim().split(/\s+/)
67-
const name = vals[0]
68-
if (keyframes[name]) {
69-
return [keyframes[name]].concat(vals.slice(1)).join(' ')
67+
const i = vals.findIndex(val => keyframes[val])
68+
if (i !== -1) {
69+
vals.splice(i, 1, keyframes[vals[i]])
70+
return vals.join(' ')
7071
} else {
7172
return v
7273
}

test/fixtures/scoped-css.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ h1 {
1515
animation-name: color;
1616
animation-duration: 5s;
1717
}
18+
.anim-3 {
19+
animation: 5s color infinite, 5s other;
20+
}
1821
.anim-multiple {
1922
animation: color 5s infinite, opacity 2s;
2023
}

test/test.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ describe('vue-loader', () => {
211211
// scoped keyframes
212212
expect(style).to.contain(`.anim[${id}] {\n animation: color-${id} 5s infinite, other 5s;`)
213213
expect(style).to.contain(`.anim-2[${id}] {\n animation-name: color-${id}`)
214+
expect(style).to.contain(`.anim-3[${id}] {\n animation: 5s color-${id} infinite, 5s other;`)
214215
expect(style).to.contain(`@keyframes color-${id} {`)
215216
expect(style).to.contain(`@-webkit-keyframes color-${id} {`)
216217

@@ -735,7 +736,7 @@ describe('vue-loader', () => {
735736
}
736737
}
737738
}, (code, warnings) => {
738-
expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
739+
expect(code).to.contain("describe('example', function () {\n it('basic', function (done) {\n done();\n });\n})")
739740
done()
740741
})
741742
})
@@ -749,7 +750,7 @@ describe('vue-loader', () => {
749750
}
750751
}
751752
}, (code, warnings) => {
752-
expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
753+
expect(code).to.contain("describe('example', function () {\n it('basic', function (done) {\n done();\n });\n})")
753754
done()
754755
})
755756
})
@@ -773,7 +774,7 @@ describe('vue-loader', () => {
773774
bundle({
774775
entry: './test/fixtures/custom-language.vue'
775776
}, (code, warnings) => {
776-
expect(code).not.to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
777+
expect(code).not.to.contain("describe('example', function () {\n it('basic', function (done) {\n done();\n });\n})")
777778
done()
778779
})
779780
})
@@ -802,7 +803,7 @@ describe('vue-loader', () => {
802803
})
803804
]
804805
}, (code, warnings) => {
805-
expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
806+
expect(code).to.contain("describe('example', function () {\n it('basic', function (done) {\n done();\n });\n})")
806807
done()
807808
})
808809
})

0 commit comments

Comments
 (0)