Skip to content

keyframes in scoped style was compiled wrong #6351

@lanmaomm

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions