@mrhenry/stylelint-mrhenry-prop-order 1.0.10 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -18
- package/package.json +1 -1
- package/stylelint-mrhenry-prop-order.js +9 -3
package/README.md
CHANGED
|
@@ -2,33 +2,72 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@mrhenry/stylelint-mrhenry-prop-order)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Specify a strict order for CSS properties.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
```css
|
|
8
|
+
/* valid */
|
|
9
|
+
.foo {
|
|
10
|
+
width: 100px;
|
|
11
|
+
height: 20px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* invalid */
|
|
15
|
+
.foo {
|
|
16
|
+
height: 20px; /* we prefer width before height */
|
|
17
|
+
width: 100px;
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
/* valid */
|
|
23
|
+
.foo {
|
|
24
|
+
margin: 20px;
|
|
25
|
+
margin-top: 10px;
|
|
26
|
+
}
|
|
9
27
|
|
|
10
|
-
|
|
11
|
-
|
|
28
|
+
/* invalid */
|
|
29
|
+
.foo {
|
|
30
|
+
margin-top: 10px; /* longhand before a shorthand */
|
|
31
|
+
margin: 20px;
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
This package doesn't create groups of properties.
|
|
36
|
+
But it will respect patterns that are often used to group properties:
|
|
12
37
|
- empty lines
|
|
13
38
|
- comments
|
|
14
|
-
|
|
15
|
-
Ignored declarations :
|
|
16
39
|
- custom properties
|
|
17
40
|
- vendor prefixed CSS
|
|
18
41
|
|
|
19
42
|
```css
|
|
20
43
|
.foo {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
44
|
+
a: 0; /* section : 1 */
|
|
45
|
+
b: 0; /* section : 1 */
|
|
46
|
+
|
|
47
|
+
c: 0; /* section : 2 */
|
|
48
|
+
d: 0; /* section : 2 */
|
|
49
|
+
/* a comment */
|
|
50
|
+
e: 0; /* section : 3 */
|
|
51
|
+
f: 0; /* section : 3 */
|
|
52
|
+
--a: 0; /* ignored */
|
|
53
|
+
--b: 0; /* ignored */
|
|
54
|
+
-webkit-foo: 0; /* ignored */
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Usage
|
|
59
|
+
|
|
60
|
+
`npm install --save-dev @mrhenry/stylelint-mrhenry-prop-order`
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
// stylelint.config.js
|
|
64
|
+
module.exports = {
|
|
65
|
+
plugins: [
|
|
66
|
+
"@mrhenry/stylelint-mrhenry-prop-order",
|
|
67
|
+
],
|
|
68
|
+
rules: {
|
|
69
|
+
"@mrhenry/stylelint-mrhenry-prop-order": true,
|
|
70
|
+
},
|
|
32
71
|
}
|
|
33
72
|
```
|
|
34
73
|
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ const stylelint = require("stylelint");
|
|
|
2
2
|
const order = require('./order.js');
|
|
3
3
|
const orderSet = new Set(order);
|
|
4
4
|
|
|
5
|
-
const ruleName = "
|
|
5
|
+
const ruleName = "@mrhenry/stylelint-mrhenry-prop-order";
|
|
6
6
|
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
7
7
|
expected: (name) => {
|
|
8
8
|
return `Expected ${name} to appear at a different position.`;
|
|
@@ -20,6 +20,10 @@ const ignoredAtRules = [
|
|
|
20
20
|
|
|
21
21
|
const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
|
|
22
22
|
return (postcssRoot, postcssResult) => {
|
|
23
|
+
if (!primaryOption) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
|
|
23
27
|
postcssRoot.walkRules((rule) => {
|
|
24
28
|
let parent = rule.parent;
|
|
25
29
|
while (parent) {
|
|
@@ -112,8 +116,10 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
|
|
|
112
116
|
}
|
|
113
117
|
});
|
|
114
118
|
|
|
115
|
-
|
|
116
|
-
|
|
119
|
+
if (context.fix) {
|
|
120
|
+
for (const [comment, prev] of matchedComments) {
|
|
121
|
+
rule.insertAfter(prev, comment);
|
|
122
|
+
}
|
|
117
123
|
}
|
|
118
124
|
});
|
|
119
125
|
};
|