keyframes 未正确处理

[yukisora2013]

keyframes 未正确处理

mpvue: 1.0.6
mpvue-template-compiler: 1.0.6
mpvue-loader: 1.0.8
postcss-mpvue-wxss: 1.0.0

编译之后 animation 里的 keyframes-name 没有 -data-v-63af05ea 后缀。

此外，微信不支持有 vendor prefix 的 keyframes，应该在 postcss 去掉。

问题复现步骤:

1. 新建一个简单的 keyframes

.action {
  animation: 1s the-key-frames;
}
@keyframes the-key-frames {
  from {
    left: 0px;
  }
  to {
    left: 100px;
  }
}

2. 编译

期望的表现:

.action.data-v-63af05ea {
  animation: 1s the-key-frames-data-v-63af05ea;
}
@keyframes the-key-frames-data-v-63af05ea {
from {
    left: 0;
}
to {
    left: 200rpx;
}
}

观察到的表现:

.action.data-v-63af05ea {
  animation: 1s the-key-frames;
}
@keyframes the-key-frames-data-v-63af05ea {
from {
    left: 0;
}
to {
    left: 200rpx;
}
}

[anchengjian]

暂时先去掉 style 的 scoped 进行开发吧。
感觉这儿可能有其他bug，the-key-frames 按道理应该不会加 -data-v-63af05ea 补全

[exoticknight]

大概可以参考一下 vue 的实现。
vuejs/vue-loader#731
@anchengjian 从上面来看，vue-loader 中是加上的，但是只是在一个 scoped tag 中去找

[exoticknight]

原来的 vue-loader 的解决方案问题，只取了第一个 value，新版已经修复
PR：mpvue/mpvue-loader#28
@anchengjian @moenewpoi