Child component doesn't merge className from parent.

[JounQin]

Vue.js version

2.1.4

Reproduction Link

https://jsfiddle.net/JounQin/s5b79kqc/

Steps to reproduce

Just look at the output HTML

What is Expected?

Child comp should has className abc def

What is actually happening?

The className is abc abc def

Is that by design?

[fnlctrl]

Yes, it's by design. Vue doesn't remove duplicate static class names, it only merges them as-is.
In reality, if you already know <Comp> have a static class 'abc', you probably shouldn't bind it again.

[JounQin]

@fnlctrl I'm using composes of CSS Modules, think about this case:

There's a class named .a in component CompA, then CompB use CompA inside, I want to override style of .a, but style of CompA is loaded after CompB what means that the style in CompA has a higher level than CompB, so I choose to use composes.

In CompB:

.b
  composes a from './a.styl'

This will makes .b to be a className like b_b_abc a_a_def which contains the generated className in CompA.

This will fix the issue of level of css selector, but there will be a duplicate className a_a_def.

Is there any way to merge className from parent?

[JounQin]

Or I should use style.b.split(' ')[0] instead?

[fnlctrl]

Sorry but I don't really understand your use case, that seems over-engineering to me.
If you really need to bind a static class abc twice (once in component's template, once in parent's template, as shown in your fiddle), you or the build system is probably doing something wrong.

[yyx990803]

Does the duplicated class cause any issues though? It doesn't seem to actually matter.

[JounQin]

@yyx990803 actually it does not.

However, there is a problem when using vue-loader which makes me to use composes.

Consider two component:

// BaseComp.vue

<template>
  <div :class="$style.base">
    BaseComp.vue
  </div>
</template>
<style module>
  .base{
    color: red;
    background-color: green;
  }
</style>

// Hello.vue

<template>
  <BaseComp :class="$style.hello"/>
</template>
<script>
  import BaseComp from './BaseComp.vue'

  export default {
    name: 'hello',
    components: {
      BaseComp
    }
  }
</script>
<style module>
  .hello {
    color: blue;
    background-color: pink;
  }
</style>

Obviously I want to override the style of .base, but actually it does not work because the style of BaseComp.vue is loaded after Hello.vue……

http://test.1stg.me/