@mrhenry/stylelint-mrhenry-prop-order 1.0.9 → 2.0.0

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.
Files changed (4) hide show
  1. package/README.md +57 -18
  2. package/order.js +30 -33
  3. package/package.json +1 -1
  4. package/stylelint-mrhenry-prop-order.js +5 -3
package/README.md CHANGED
@@ -2,33 +2,72 @@
2
2
 
3
3
  [![version](https://img.shields.io/npm/v/@mrhenry/stylelint-mrhenry-prop-order.svg)](https://www.npmjs.com/package/@mrhenry/stylelint-mrhenry-prop-order)
4
4
 
5
- Mr. Henry's preferred order for CSS properties.
5
+ Specify a strict order for CSS properties.
6
6
 
7
- This package does not group properties.
8
- It only sorts them within "imaginary sections".
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
- Acts as a separator between sections :
11
- - ignored declarations
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
- a: 0; /* section : 1 */
22
- b: 0; /* section : 1 */
23
-
24
- c: 0; /* section : 2 */
25
- d: 0; /* section : 2 */
26
- /* a comment */
27
- e: 0; /* section : 3 */
28
- f: 0; /* section : 3 */
29
- --a: 0; /* ignored */
30
- --b: 0; /* ignored */
31
- -webkit-foo: 0; /* ignored */
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/order.js CHANGED
@@ -54,54 +54,51 @@ module.exports = [
54
54
  "bookmark-state",
55
55
  // border
56
56
  "border",
57
+ "border-color",
58
+ "border-style",
59
+ "border-width",
57
60
  // border inline
58
61
  "border-inline",
62
+ "border-inline-color",
63
+ "border-inline-style",
64
+ "border-inline-width",
59
65
  "border-inline-start",
66
+ "border-inline-start-color",
67
+ "border-inline-start-style",
68
+ "border-inline-start-width",
60
69
  "border-inline-end",
70
+ "border-inline-end-color",
71
+ "border-inline-end-style",
72
+ "border-inline-end-width",
61
73
  // border block
62
74
  "border-block",
75
+ "border-block-color",
76
+ "border-block-style",
77
+ "border-block-width",
63
78
  "border-block-start",
79
+ "border-block-start-color",
80
+ "border-block-start-style",
81
+ "border-block-start-width",
64
82
  "border-block-end",
83
+ "border-block-end-color",
84
+ "border-block-end-style",
85
+ "border-block-end-width",
65
86
  // border top, right, bottom, left
66
87
  "border-top",
67
- "border-right",
68
- "border-bottom",
69
- "border-left",
70
- // border color
71
- "border-color",
72
- "border-inline-color",
73
- "border-inline-start-color",
74
- "border-inline-end-color",
75
- "border-block-color",
76
- "border-block-start-color",
77
- "border-block-end-color",
78
88
  "border-top-color",
79
- "border-right-color",
80
- "border-bottom-color",
81
- "border-left-color",
82
- // border style
83
- "border-style",
84
- "border-inline-style",
85
- "border-inline-start-style",
86
- "border-inline-end-style",
87
- "border-block-style",
88
- "border-block-start-style",
89
- "border-block-end-style",
90
89
  "border-top-style",
91
- "border-right-style",
92
- "border-bottom-style",
93
- "border-left-style",
94
- // border width
95
- "border-width",
96
- "border-inline-width",
97
- "border-inline-start-width",
98
- "border-inline-end-width",
99
- "border-block-width",
100
- "border-block-start-width",
101
- "border-block-end-width",
102
90
  "border-top-width",
91
+ "border-right",
92
+ "border-right-color",
93
+ "border-right-style",
103
94
  "border-right-width",
95
+ "border-bottom",
96
+ "border-bottom-color",
97
+ "border-bottom-style",
104
98
  "border-bottom-width",
99
+ "border-left",
100
+ "border-left-color",
101
+ "border-left-style",
105
102
  "border-left-width",
106
103
  // border radius logical shorthands
107
104
  "border-inline-start-radius",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrhenry/stylelint-mrhenry-prop-order",
3
- "version": "1.0.9",
3
+ "version": "2.0.0",
4
4
  "description": "Mr. Henry's preferred order for CSS properties",
5
5
  "main": "stylelint-mrhenry-prop-order.js",
6
6
  "scripts": {
package/stylelint-mrhenry-prop-order.js 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 = "plugin/stylelint-mrhenry-prop-order";
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.`;
@@ -112,8 +112,10 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
112
112
  }
113
113
  });
114
114
 
115
- for (const [comment, prev] of matchedComments) {
116
- rule.insertAfter(prev, comment);
115
+ if (context.fix) {
116
+ for (const [comment, prev] of matchedComments) {
117
+ rule.insertAfter(prev, comment);
118
+ }
117
119
  }
118
120
  });
119
121
  };