keyframes in scoped style was compiled wrong

[lanmaomm]

Version

5.0.0-alpha.7

Environment info

@vue/cli 4.5.11
vue 3.0.7

Steps to reproduce

init a new project following the intro:
yarn global add @vue/cli @vue/cli-service-global

vue create hello-world

cd hello-world
yarn build

then add "scoped" and css in App.vue:

<style scoped> @Keyframes playing { 0% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 50% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 100% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } } </style>

What is expected?

css should be compiled like :

<style type="test/css"> @-webkit-keyframes playing-7ba5bd90 { 0% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 50% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~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'); } 50% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 100% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } } </style>

What is actually happening?

css was compiled to :

<style type="test/css"> @-webkit-keyframes playing-7ba5bd90 { 0%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 50%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~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'); } 50%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 100%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } } </style>

---

the frame in keyframes should not have label like "[data-v-7ba5bd90] ", or the animation won't work.

[fangbinwei]

Duplicate of #6328