Vue-loader: Use transition in css modules

[banrikun]

class name in css modules will be compiled to [name]-[hash], but when use transition, it should be [name]-enter-[hash].

<transiton :name="$style.demo">
</transiton>

$style.demo is not compiled, and class name in .css file is compiled to demo-enter-xxxx.

[LinusBorg]

This is not a bug in my view - CSS modules in vue-loader just don't support that currently.

you can use a second <style> element to add transition-relevant CSS in normal , non-modules mode to the SFC.

[yyx990803]

Instead of name, you can also directly use enter-class/leave-class props to directly specify class names instead of relying on auto-inferring.

But as said, this is not really a concern for vue-loader.

[johnsoncodehk]

You can use css module selector :global with scss, for example:

<style module lang="scss">
.demo {
  &:global(-enter-active) { /* ... */ }
  &:global(-leave-active) { /* ... */ }
  &:global(-enter) { /* ... */ }
  &:global(-leave-to) { /* ... */ }
}
</style>

[sombriks]

this is a nice improvement. would be nice to see it happen.