support ascii whitespace, add tests

docs/rules/README.md

@@ -144,7 +144,7 @@ For example:
 | [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
 | [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
 | [vue/camelcase](./camelcase.md) | enforce camelcase naming convention |  |
-| [vue/class-order](./class-order.md) | enforce classnames order | :wrench: |
+| [vue/static-class-names-order](./static-class-names-order.md) | enforce classnames order | :wrench: |
 | [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |

docs/rules/static-class-names-order.md

@@ -0,0 +1,37 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/static-class-names-order
+description: enforce classnames order
+---
+# vue/static-class-names-order
+> enforce classnames order
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :books: Further reading
+
+- [static-class-names-order]
+
+[static-class-names-order]: https://eslint.org/docs/rules/static-class-names-order
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/static-class-names-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/static-class-names-order.js)
+
+### Example
+
+<eslint-code-block fix :rules="{'vue/static-class-names-order': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div class="a b"></div>
+
+  <!-- ✗ BAD -->
+  <div class="b a></div>
+</template>
+```
+
+</eslint-code-block>

lib/index.js

@@ -14,7 +14,7 @@ module.exports = {
     'block-spacing': require('./rules/block-spacing'),
     'brace-style': require('./rules/brace-style'),
     'camelcase': require('./rules/camelcase'),
-    'class-order': require('./rules/class-order'),
+    'static-class-names-order': require('./rules/static-class-names-order'),
     'comma-dangle': require('./rules/comma-dangle'),
     'comment-directive': require('./rules/comment-directive'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),

lib/rules/class-order.js → lib/rules/static-class-names-order.js

@@ -21,7 +21,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      url: 'https://eslint.vuejs.org/rules/class-order.html',
+      url: 'https://eslint.vuejs.org/rules/static-class-names-order.html',
       description: 'enforce classnames order',
       category: undefined
     },
@@ -32,7 +32,16 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=false][key.name='class']" (node) {
         const classList = node.value.value
-        const classListSorted = classList.split(' ').sort().join(' ')
+        const classListWithWhitespace = classList.split(/(\s+)/)
+
+        // Detect and reuse any type of whitespace.
+        let divider = ''
+        if (classListWithWhitespace.length > 1) {
+          divider = classListWithWhitespace[1]
+        }
+
+        const classListNoWhitespace = classListWithWhitespace.filter(className => className.trim() !== '')
+        const classListSorted = classListNoWhitespace.sort().join(divider)
 
         if (classList !== classListSorted) {
           context.report({

tests/lib/rules/class-order.js → tests/lib/rules/static-class-names-order.js

@@ -8,7 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-var rule = require('../../../lib/rules/class-order')
+var rule = require('../../../lib/rules/static-class-names-order')
 var RuleTester = require('eslint').RuleTester
 
 // ------------------------------------------------------------------------------
@@ -19,26 +19,34 @@ var tester = new RuleTester({
   parser: 'vue-eslint-parser',
   parserOptions: { ecmaVersion: 2015 }
 })
-tester.run('class-order', rule, {
+tester.run('static-class-names-order', rule, {
 
   valid: [
     {
-      filename: 'test.vue',
+      filename: 'no-classes.vue',
       code: '<template><div></div></template>'
     },
     {
-      filename: 'test.vue',
-      code: '<template><div class="a b"></div></template>'
+      filename: 'one-class.vue',
+      code: '<template><div class="a"></div></template>'
     },
     {
-      filename: 'test.vue',
-      code: '<template><div class="a"></div></template>'
+      filename: 'single-space.vue',
+      code: '<template><div class="a b c"></div></template>'
+    },
+    {
+      filename: 'multiple-spaces.vue',
+      code: '<template><div class="a       b       c"></div></template>'
+    },
+    {
+      filename: 'tabs.vue',
+      code: '<template><div class="a  b  c"></div></template>'
     }
   ],
 
   invalid: [
     {
-      filename: 'test.vue',
+      filename: 'two-classes.vue',
       code: '<template><div class="b a"></div></template>',
       output: '<template><div class="a b"></div></template>',
       errors: [{
@@ -47,7 +55,7 @@ tester.run('class-order', rule, {
       }]
     },
     {
-      filename: 'test.vue',
+      filename: 'three-classes.vue',
       code:
         `<template>
           <div class="c b a">