no-duplicate-attributes should have css exceptions

[nchutchind]

• ESLint Version: 4.3.0
• eslint-plugin-vue Version: 3.8.0
• Node Version: 8.1.4

<span class="label label-rounded" :class="statusColor"></span>
<span style="font-weight:bold;" :style="{ color: activeColor, fontSize: fontSize + 'px' }"></span>

Duplicate attribute 'class'. (vue/no-duplicate-attributes)
Duplicate attribute 'style'. (vue/no-duplicate-attributes)

Class and Style, specifically, should be allowed to be duplicated since they tend to have a mix of static and dynamic content. You often have structural styling that gets set in stone at development time, but want reactive styles or classes applied at runtime.

Perhaps no-duplicate-attributes should take an option for ignoring css attributes (class and style).

[armano2]

@nchutchind nice catch
Vue is allowing for duplicates for style and class but not always:

This is ok:

• <div style="" :style="">
• <div class="" :class="">

This is not ok:

• <div style="" style="">
• <div :style="" :style="">
• <div class="" class="">
• <div :class="" :class="">

I think we should add setting to allow this.

[armano2]

My proposal for schema is:

[
  {
    type: 'object',
    properties: {
      allowCoexistClass: {
        type: 'boolean' // default: true
      },
      allowCoexistStyle: {
        type: 'boolean' // default: true
      }
    },
    additionalProperties: false
  }
]

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

[nchutchind]

I'm sorry for being a few days late here, but the only complaint I would have about your proposal is that coexist is one word, so the properties should be allowCoexistClass and allowCoexistStyle.

Otherwise, it looks great!

(apologies for pedantry)

[armano2]

@nchutchind thanks, PR updated 🗡️

[michalsnik]

I wonder if we actually need those extra settings.. In my opinion allowing coexistance of bindings and attributes for class and style could be always allowed. It's such a common use case.. What do you think @chrisvfritz @mysticatea ?

[mysticatea]

Thank you for the report!

I had not noticed that class and :class can coexist.
Yes, this is a bug. I think that the rule should ignore class and style by default. I think "good to have" about the option which disallows duplicate of class and style.

[armano2]

@mysticatea by default i will allow class and :class and leave option to disallows duplicates.
this is how i implemented this in #113

[ajaymarathe]

@nchutchind nice catch
Vue is allowing for duplicates for style and class but not always:

This is ok:

• <div style="" :style="">
• <div class="" :class="">

This is not ok:

• <div style="" style="">
• <div :style="" :style="">
• <div class="" class="">
• <div :class="" :class="">

I think we should add setting to allow this.

It's working, Thanks. :)