-
- Notifications
You must be signed in to change notification settings - Fork 6.3k
Closed
Description
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.
Metadata
Metadata
Assignees
Labels
No labels