style scoped模式下编译keyframes出错

[lanmaomm]

Version

16.1.2

Reproduction link

https://github.com/lanmaomm/test

Steps to reproduce

yarn install
yarn serve
查看css编译结果

What is expected?

.play[data-v-7ba5bd90] {
display: inline-block;
width: 11px;
height: 14px;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: playing-7ba5bd90 0.9s linear infinite;
animation: playing-7ba5bd90 0.9s linear infinite;
transition-delay: 300ms;
}
@-webkit-keyframes playing-7ba5bd90 {
0% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
32% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
33% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
66% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
67% {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
99% {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
100% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
}
@Keyframes playing-7ba5bd90 {
0% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
32% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
33% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
66% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
67% {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
99% {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
100% {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
}

What is actually happening?

.play[data-v-7ba5bd90] {
display: inline-block;
width: 11px;
height: 14px;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: playing-7ba5bd90 0.9s linear infinite;
animation: playing-7ba5bd90 0.9s linear infinite;
transition-delay: 300ms;
}
@-webkit-keyframes playing-7ba5bd90 {
0%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
32%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
33%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
66%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
67%[data-v-7ba5bd90] {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
99%[data-v-7ba5bd90] {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
100%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
}
@Keyframes playing-7ba5bd90 {
0%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
32%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
33%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
66%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png');
}
67%[data-v-7ba5bd90] {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
99%[data-v-7ba5bd90] {
background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png');
}
100%[data-v-7ba5bd90] {
background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png');
}
}

---

https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L2 是不是16.x版本使用@vue/compiler-sfc处理style导致了这个问题？

[yyyanghj]

see vuejs/core#3308

[llllllllllx]

暂时解决方案可以将 @vue/compiler-sfc 退回至3.0.0版本

npm i -D @vue/compiler-sfc@3.0.0

[lanmaomm]

暂时解决方案可以将 @vue/compiler-sfc 退回至3.0.0版本

npm i -D @vue/compiler-sfc@3.0.0

好的，感谢🙏