Vue-loader: Keyframes in scoped style should be private

[Dafrok]

What problem does this feature solve?

Define two keyframes with same name in different scoped style tag,
the latter will replace the former.

ComponentA

<template>
<div class="active">ComponentA</div>
</template>
<style scoped lang="stylus">
.active
  animation active 1s

@keyframes active
  0%
    transform translateY(0)
  50%
    transform translateY(100%)
  100%
    transform translateY(0)
</style>

ComponentB

<template>
<div class="active">ComponentB</div>
</template>
<style scoped lang="stylus">
.active
  animation active 1s

@keyframes active
  0%
    transform scale(1)
  50%
    transform scale(2)
  100%
    transform scale(1)
</style>

The stylesheet of these two components will be compiled like this:

.active[data-v-HASH-OF-COMPOENT-A] {
  animation: active 1s;
}

@keyframes active {
0% {
    transform: scale(transform translateY(0));
}
50% {
    transform: scale(transform translateY(100%));
}
100% {
    transform: scale(transform translateY(0));
}
}

.active[data-v-HASH-OF-COMPOENT-B] {
  animation: active 1s;
}

@keyframes active {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.5);
}
100% {
    transform: scale(1);
}
}

What does the proposed API look like?

The result of compilation might be like this:

.active[data-v-HASH-OF-COMPOENT-A] {
  animation: active--HASH-OF-COMPOENT-A 1s;
}

@keyframes active--HASH-OF-COMPOENT-A {
  ...
}

.active[data-v-HASH-OF-COMPOENT-B] {
  animation: active--HASH-OF-COMPOENT-B 1s;
}

@keyframes active--HASH-OF-COMPOENT-B {
  ...
}

If there is no keyframes defination of current scope, The result might be like this case:

.active[data-v-HASH-OF-COMPOENT-A] {
  animation: active--HASH-OF-PARENT-COMPOENT 1s;
}

.active[data-v-HASH-OF-COMPOENT-B] {
  animation: active--HASH-OF-PARENT-COMPOENT 1s;
}

If there is no keyframes defination of any parent scope, The result might be like this case:

.active[data-v-HASH-OF-COMPOENT-A] {
  animation: active 1s;
}

.active[data-v-HASH-OF-COMPOENT-B] {
  animation: active 1s;
}

[LinusBorg]

@yyx990803 This seems to be more of a bugfix than a feature request to me.Thoughts?

[yyx990803]

Had a test implementation, but it's more complicated than it seems - we need to properly parse all possible animation shorthand format and multiple animations to rewrite the animation name.

[yyx990803]

This is now properly implemented in the keyframes branch with one small caveat: the animation name detection is per <style scoped> tag, not per component (if the component has multiple <style scoped> tags)

[eadio]

i have some question。i write some animations like this：
.active{ animation: ani ease 1s;}
@keyframs ani{ 0%{ width: 100px}, 100%{ width: 200px}}

but the result has like this：
.active-data-v-xxx{ -webkit-animation: ani-data-v-xxx ease 1s; animation: ani-data-v-xxx ease 1s;}
@-webkit-keyframs ani{ 0%{ width: 100px}, 100%{ width: 200px}}//here has not scoped
@keyframs ani-data-v-xxx{ 0%{ width: 100px}, 100%{ width: 200px}}

the -wekit-keyframs has not scoped。how do i to deal it.