Skip to content

Commit 0958cfa

Browse files
committed
support ascii whitespace, add tests
1 parent 2889457 commit 0958cfa

File tree

7 files changed

+68
-35
lines changed

7 files changed

+68
-35
lines changed

Diff for: .eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
module.exports = {
44
root: true,
55
parserOptions: {
6-
ecmaVersion: 6
6+
ecmaVersion: 6,
77
},
88
env: {
99
node: true,

Diff for: docs/rules/README.md

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

Diff for: docs/rules/class-order.md

-21
This file was deleted.

Diff for: docs/rules/static-class-names-order.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/static-class-names-order
5+
description: enforce classnames order
6+
---
7+
# vue/static-class-names-order
8+
> enforce classnames order
9+
10+
- :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.
11+
12+
## :books: Further reading
13+
14+
- [static-class-names-order]
15+
16+
[static-class-names-order]: https://eslint.org/docs/rules/static-class-names-order
17+
18+
## :mag: Implementation
19+
20+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/static-class-names-order.js)
21+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/static-class-names-order.js)
22+
23+
### Example
24+
25+
<eslint-code-block fix :rules="{'vue/static-class-names-order': ['error']}">
26+
27+
```vue
28+
<template>
29+
<!-- ✓ GOOD -->
30+
<div class="a b"></div>
31+
32+
<!-- ✗ BAD -->
33+
<div class="b a></div>
34+
</template>
35+
```
36+
37+
</eslint-code-block>

Diff for: lib/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = {
1414
'block-spacing': require('./rules/block-spacing'),
1515
'brace-style': require('./rules/brace-style'),
1616
'camelcase': require('./rules/camelcase'),
17-
'class-order': require('./rules/class-order'),
17+
'static-class-names-order': require('./rules/static-class-names-order'),
1818
'comma-dangle': require('./rules/comma-dangle'),
1919
'comment-directive': require('./rules/comment-directive'),
2020
'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),

Diff for: lib/rules/class-order.js renamed to lib/rules/static-class-names-order.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module.exports = {
2121
meta: {
2222
type: 'suggestion',
2323
docs: {
24-
url: 'https://eslint.vuejs.org/rules/class-order.html',
24+
url: 'https://eslint.vuejs.org/rules/static-class-names-order.html',
2525
description: 'enforce classnames order',
2626
category: undefined
2727
},
@@ -32,7 +32,16 @@ module.exports = {
3232
return utils.defineTemplateBodyVisitor(context, {
3333
"VAttribute[directive=false][key.name='class']" (node) {
3434
const classList = node.value.value
35-
const classListSorted = classList.split(' ').sort().join(' ')
35+
const classListWithWhitespace = classList.split(/(\s+)/)
36+
37+
// Detect and reuse any type of whitespace.
38+
let divider = ''
39+
if (classListWithWhitespace.length > 1) {
40+
divider = classListWithWhitespace[1]
41+
}
42+
43+
const classListNoWhitespace = classListWithWhitespace.filter(className => className.trim() !== '')
44+
const classListSorted = classListNoWhitespace.sort().join(divider)
3645

3746
if (classList !== classListSorted) {
3847
context.report({

Diff for: tests/lib/rules/class-order.js renamed to tests/lib/rules/static-class-names-order.js

+17-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// Requirements
99
// ------------------------------------------------------------------------------
1010

11-
var rule = require('../../../lib/rules/class-order')
11+
var rule = require('../../../lib/rules/static-class-names-order')
1212
var RuleTester = require('eslint').RuleTester
1313

1414
// ------------------------------------------------------------------------------
@@ -19,26 +19,34 @@ var tester = new RuleTester({
1919
parser: 'vue-eslint-parser',
2020
parserOptions: { ecmaVersion: 2015 }
2121
})
22-
tester.run('class-order', rule, {
22+
tester.run('static-class-names-order', rule, {
2323

2424
valid: [
2525
{
26-
filename: 'test.vue',
26+
filename: 'no-classes.vue',
2727
code: '<template><div></div></template>'
2828
},
2929
{
30-
filename: 'test.vue',
31-
code: '<template><div class="a b"></div></template>'
30+
filename: 'one-class.vue',
31+
code: '<template><div class="a"></div></template>'
3232
},
3333
{
34-
filename: 'test.vue',
35-
code: '<template><div class="a"></div></template>'
34+
filename: 'single-space.vue',
35+
code: '<template><div class="a b c"></div></template>'
36+
},
37+
{
38+
filename: 'multiple-spaces.vue',
39+
code: '<template><div class="a b c"></div></template>'
40+
},
41+
{
42+
filename: 'tabs.vue',
43+
code: '<template><div class="a b c"></div></template>'
3644
}
3745
],
3846

3947
invalid: [
4048
{
41-
filename: 'test.vue',
49+
filename: 'two-classes.vue',
4250
code: '<template><div class="b a"></div></template>',
4351
output: '<template><div class="a b"></div></template>',
4452
errors: [{
@@ -47,7 +55,7 @@ tester.run('class-order', rule, {
4755
}]
4856
},
4957
{
50-
filename: 'test.vue',
58+
filename: 'three-classes.vue',
5159
code:
5260
`<template>
5361
<div class="c b a">

0 commit comments

Comments
 (0)