@readme/stylelint-config 3.1.19 → 3.2.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/.eslintrc.js +3 -0
- package/CHANGELOG.md +251 -0
- package/__tests__/__snapshots__/index.js.snap +114 -0
- package/__tests__/index.js +66 -0
- package/__tests__/invalid.scss +102 -0
- package/__tests__/valid.scss +101 -0
- package/package.json +11 -14
- package/src/index.js +155 -0
- package/index.js +0 -68
package/.eslintrc.js
ADDED
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
## [3.2.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.2.0...@readme/stylelint-config@3.2.1) (2023-07-05)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [3.2.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.19...@readme/stylelint-config@3.2.0) (2023-06-30)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **stylelint-config:** add rules from our main readme repo ([#686](https://github.com/readmeio/standards/issues/686)) ([556183e](https://github.com/readmeio/standards/commit/556183e8f0609b28cedef18e239c2e600718a702))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [3.1.19](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.18...@readme/stylelint-config@3.1.19) (2023-06-06)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## [3.1.18](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.17...@readme/stylelint-config@3.1.18) (2023-06-01)
|
|
34
|
+
|
|
35
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [3.1.17](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.16...@readme/stylelint-config@3.1.17) (2023-05-26)
|
|
42
|
+
|
|
43
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## [3.1.16](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.15...@readme/stylelint-config@3.1.16) (2023-04-01)
|
|
50
|
+
|
|
51
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## [3.1.15](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.14...@readme/stylelint-config@3.1.15) (2023-03-02)
|
|
58
|
+
|
|
59
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
## [3.1.14](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.13...@readme/stylelint-config@3.1.14) (2023-01-23)
|
|
66
|
+
|
|
67
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
## [3.1.13](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.12...@readme/stylelint-config@3.1.13) (2023-01-18)
|
|
74
|
+
|
|
75
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
## [3.1.12](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.11...@readme/stylelint-config@3.1.12) (2023-01-12)
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
### Bug Fixes
|
|
85
|
+
|
|
86
|
+
* pinning eslint-plugin-import to 2.26 ([b16cd44](https://github.com/readmeio/standards/commit/b16cd44c4dddca2ef323aea5015525c2a25657e9))
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## [3.1.11](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.10...@readme/stylelint-config@3.1.11) (2023-01-12)
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
### Bug Fixes
|
|
96
|
+
|
|
97
|
+
* downgrading eslint-plugin-import, 2.27 has regressions ([a069a0b](https://github.com/readmeio/standards/commit/a069a0badaefbe17513a96be192f99936558d6ee))
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
## [3.1.10](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.9...@readme/stylelint-config@3.1.10) (2023-01-12)
|
|
104
|
+
|
|
105
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
## [3.1.9](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.8...@readme/stylelint-config@3.1.9) (2023-01-11)
|
|
112
|
+
|
|
113
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
## [3.1.8](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.7...@readme/stylelint-config@3.1.8) (2023-01-11)
|
|
120
|
+
|
|
121
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
## [3.1.7](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.6...@readme/stylelint-config@3.1.7) (2023-01-03)
|
|
128
|
+
|
|
129
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
## [3.1.6](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.5...@readme/stylelint-config@3.1.6) (2022-12-04)
|
|
136
|
+
|
|
137
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
## [3.1.5](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.4...@readme/stylelint-config@3.1.5) (2022-12-04)
|
|
144
|
+
|
|
145
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
## [3.1.4](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.3...@readme/stylelint-config@3.1.4) (2022-11-17)
|
|
152
|
+
|
|
153
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
154
|
+
|
|
155
|
+
## [3.1.3](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.2...@readme/stylelint-config@3.1.3) (2022-11-04)
|
|
156
|
+
|
|
157
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
158
|
+
|
|
159
|
+
## [3.1.2](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.1...@readme/stylelint-config@3.1.2) (2022-11-01)
|
|
160
|
+
|
|
161
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
162
|
+
|
|
163
|
+
## [3.1.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.1.0...@readme/stylelint-config@3.1.1) (2022-10-03)
|
|
164
|
+
|
|
165
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
166
|
+
|
|
167
|
+
# [3.1.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.0.1...@readme/stylelint-config@3.1.0) (2022-08-31)
|
|
168
|
+
|
|
169
|
+
### Features
|
|
170
|
+
|
|
171
|
+
- **stylelint:** use "simple" selector-not-notation ([#514](https://github.com/readmeio/standards/issues/514)) ([0c83923](https://github.com/readmeio/standards/commit/0c8392345796ad6be41e4f2a862dbbc1c6921e62))
|
|
172
|
+
|
|
173
|
+
## [3.0.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@3.0.0...@readme/stylelint-config@3.0.1) (2022-08-29)
|
|
174
|
+
|
|
175
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
176
|
+
|
|
177
|
+
# [3.0.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@2.0.0...@readme/stylelint-config@3.0.0) (2022-08-10)
|
|
178
|
+
|
|
179
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
180
|
+
|
|
181
|
+
# [2.0.0](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.14...@readme/stylelint-config@2.0.0) (2022-07-25)
|
|
182
|
+
|
|
183
|
+
### Features
|
|
184
|
+
|
|
185
|
+
- requiring Node 14.18+ ([c5f5350](https://github.com/readmeio/standards/commit/c5f5350935fc6bed8b5bf27f0c7d92316a6b3cd0))
|
|
186
|
+
|
|
187
|
+
## [1.1.14](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.13...@readme/stylelint-config@1.1.14) (2022-07-13)
|
|
188
|
+
|
|
189
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
190
|
+
|
|
191
|
+
## [1.1.13](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.12...@readme/stylelint-config@1.1.13) (2022-07-13)
|
|
192
|
+
|
|
193
|
+
### Bug Fixes
|
|
194
|
+
|
|
195
|
+
- reverting the unicorn eslint plugin as v43 requires >=Node 14.18 ([#455](https://github.com/readmeio/standards/issues/455)) ([334a1b5](https://github.com/readmeio/standards/commit/334a1b58bdf72f4152529f29655d2d6411cb4d76))
|
|
196
|
+
|
|
197
|
+
## [1.1.12](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.11...@readme/stylelint-config@1.1.12) (2022-07-07)
|
|
198
|
+
|
|
199
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
200
|
+
|
|
201
|
+
## [1.1.11](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.10...@readme/stylelint-config@1.1.11) (2022-06-21)
|
|
202
|
+
|
|
203
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
204
|
+
|
|
205
|
+
## [1.1.10](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.9...@readme/stylelint-config@1.1.10) (2022-06-13)
|
|
206
|
+
|
|
207
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
208
|
+
|
|
209
|
+
## [1.1.9](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.8...@readme/stylelint-config@1.1.9) (2022-05-31)
|
|
210
|
+
|
|
211
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
212
|
+
|
|
213
|
+
## [1.1.8](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.7...@readme/stylelint-config@1.1.8) (2022-05-23)
|
|
214
|
+
|
|
215
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
216
|
+
|
|
217
|
+
## [1.1.7](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.6...@readme/stylelint-config@1.1.7) (2022-04-26)
|
|
218
|
+
|
|
219
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
220
|
+
|
|
221
|
+
## [1.1.6](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.5...@readme/stylelint-config@1.1.6) (2022-04-26)
|
|
222
|
+
|
|
223
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
224
|
+
|
|
225
|
+
## [1.1.5](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.4...@readme/stylelint-config@1.1.5) (2022-04-26)
|
|
226
|
+
|
|
227
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
228
|
+
|
|
229
|
+
## [1.1.4](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.3...@readme/stylelint-config@1.1.4) (2022-04-20)
|
|
230
|
+
|
|
231
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
232
|
+
|
|
233
|
+
## [1.1.3](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.2...@readme/stylelint-config@1.1.3) (2022-04-18)
|
|
234
|
+
|
|
235
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
236
|
+
|
|
237
|
+
## [1.1.2](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.1...@readme/stylelint-config@1.1.2) (2022-04-12)
|
|
238
|
+
|
|
239
|
+
**Note:** Version bump only for package @readme/stylelint-config
|
|
240
|
+
|
|
241
|
+
## [1.1.1](https://github.com/readmeio/standards/compare/@readme/stylelint-config@1.1.0...@readme/stylelint-config@1.1.1) (2022-04-06)
|
|
242
|
+
|
|
243
|
+
### Bug Fixes
|
|
244
|
+
|
|
245
|
+
- out of date lockfiles ([318393a](https://github.com/readmeio/standards/commit/318393ac195feda4701da171af08e02a80dedf12))
|
|
246
|
+
|
|
247
|
+
# 1.1.0 (2022-04-04)
|
|
248
|
+
|
|
249
|
+
### Features
|
|
250
|
+
|
|
251
|
+
- **stylelint-config:** init new config package for stylelint ([#349](https://github.com/readmeio/standards/issues/349)) ([e697176](https://github.com/readmeio/standards/commit/e697176e4b1d95528175e148d5d4acec25e346d4))
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`stylelint-config with an invalid file and auto-fix enabled matches the auto-fixed snapshot 1`] = `
|
|
4
|
+
"@import "x.css";
|
|
5
|
+
@import "y.css";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Multi-line comment
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--brand-red: hsl(5deg 10% 40%);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
#id-selector {
|
|
16
|
+
color: blue;
|
|
17
|
+
|
|
18
|
+
#another-id {
|
|
19
|
+
border: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
#ValidIdSelector {
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#badIdSelector {
|
|
28
|
+
border: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.selector-1,
|
|
32
|
+
.selector-2,
|
|
33
|
+
.selector-3[type="text"] {
|
|
34
|
+
background: linear-gradient(#fff, rgb(0 0 0 / 0.8));
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
display: block;
|
|
37
|
+
color: var(--brand-red);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.selector-a,
|
|
41
|
+
.selector-b:not(:first-child) {
|
|
42
|
+
padding: 10px !important;
|
|
43
|
+
top: calc(100% - 2rem);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.selector-x {
|
|
47
|
+
width: 10%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.selector-y {
|
|
51
|
+
width: 20%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.selector-z {
|
|
55
|
+
width: 30%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Single-line comment */
|
|
59
|
+
|
|
60
|
+
@media (width >= 60em) {
|
|
61
|
+
.selector {
|
|
62
|
+
/* Flush to parent comment */
|
|
63
|
+
transform: translate(1, 1) scale(3);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (orientation: portrait), projection and (color) {
|
|
68
|
+
.selector-i + .selector-ii {
|
|
69
|
+
background: hsl(20deg 25% 33%);
|
|
70
|
+
font-family: Helvetica, "Arial Black", sans-serif;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Flush single line comment */
|
|
75
|
+
@media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
|
|
76
|
+
.selector {
|
|
77
|
+
animation: 3s none fade-in;
|
|
78
|
+
background-image: repeating-linear-gradient(
|
|
79
|
+
-45deg,
|
|
80
|
+
transparent,
|
|
81
|
+
#fff 25px,
|
|
82
|
+
rgb(255 255 255 / 1) 50px
|
|
83
|
+
);
|
|
84
|
+
margin: 10px;
|
|
85
|
+
margin-bottom: 5px;
|
|
86
|
+
box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
|
|
87
|
+
height: 10rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Flush nested single line comment */
|
|
91
|
+
.selector::after {
|
|
92
|
+
content: "→";
|
|
93
|
+
background-image: url("x.svg");
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@keyframes fade-in {
|
|
98
|
+
from {
|
|
99
|
+
opacity: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
to {
|
|
103
|
+
opacity: 1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Prefer "simple" selector-not-notation
|
|
108
|
+
.selector-not-notation {
|
|
109
|
+
&:not(.one):not(.two):not(.three) {
|
|
110
|
+
display: block;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
"
|
|
114
|
+
`;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
|
|
3
|
+
const stylelint = require('stylelint');
|
|
4
|
+
|
|
5
|
+
const config = require('..');
|
|
6
|
+
|
|
7
|
+
const invalidScss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
|
|
8
|
+
const validScss = fs.readFileSync('./__tests__/valid.scss', 'utf-8');
|
|
9
|
+
|
|
10
|
+
describe('stylelint-config', () => {
|
|
11
|
+
let data;
|
|
12
|
+
let warnings;
|
|
13
|
+
|
|
14
|
+
describe('with a valid file', () => {
|
|
15
|
+
beforeEach(async () => {
|
|
16
|
+
data = await stylelint.lint({
|
|
17
|
+
code: validScss,
|
|
18
|
+
config,
|
|
19
|
+
});
|
|
20
|
+
({ warnings } = data.results[0]);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('has no errors', () => {
|
|
24
|
+
expect(data.errored).toBeFalsy();
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('flags no warnings', () => {
|
|
28
|
+
expect(warnings).toHaveLength(0);
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
describe('with an invalid file and auto-fix enabled', () => {
|
|
33
|
+
beforeEach(async () => {
|
|
34
|
+
data = await stylelint.lint({
|
|
35
|
+
code: invalidScss,
|
|
36
|
+
config,
|
|
37
|
+
fix: true,
|
|
38
|
+
});
|
|
39
|
+
({ warnings } = data.results[0]);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
it('matches the auto-fixed snapshot', () => {
|
|
43
|
+
expect(data.output).toMatchSnapshot();
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it('has errors', () => {
|
|
47
|
+
expect(data.errored).toBeTruthy();
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
it('flags warnings', () => {
|
|
51
|
+
expect(warnings).toHaveLength(6);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it('expects no more than 1 id selector', () => {
|
|
55
|
+
expect(warnings.some(w => w.rule === 'selector-max-id')).toBeTruthy();
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
it('expects id pattern to be either kebab-case or TitleCase', () => {
|
|
59
|
+
expect(warnings.some(w => w.rule === 'selector-id-pattern')).toBeTruthy();
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
it('auto-fixes "selector-not-notation" to "simple" pattern', () => {
|
|
63
|
+
expect(data.output).toContain('&:not(.one):not(.two):not(.three)');
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
});
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
@import url("x.css");
|
|
2
|
+
@import url("y.css");
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Multi-line comment
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--brand-red: hsl(5deg 10% 40%);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#id-selector {
|
|
13
|
+
color: blue;
|
|
14
|
+
|
|
15
|
+
#another-id {
|
|
16
|
+
border: 0;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#ValidIdSelector {
|
|
21
|
+
padding: 0px 0px 0px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
#badIdSelector {
|
|
25
|
+
border: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.selector-1,
|
|
29
|
+
.selector-2,
|
|
30
|
+
.selector-3[type="text"] {
|
|
31
|
+
background: linear-gradient(#fff, rgb(0 0 0 / 80%));
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
display: block;
|
|
34
|
+
color: var(--brand-red);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.selector-a,
|
|
38
|
+
.selector-b:not(:first-child) {
|
|
39
|
+
padding: 10px !important;
|
|
40
|
+
top: calc(100% - 2rem);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.selector-x { width: 10%; }
|
|
44
|
+
.selector-y { width: 20%; }
|
|
45
|
+
.selector-z { width: 30%; }
|
|
46
|
+
|
|
47
|
+
/* Single-line comment */
|
|
48
|
+
|
|
49
|
+
@media (width >= 60em) {
|
|
50
|
+
.selector {
|
|
51
|
+
/* Flush to parent comment */
|
|
52
|
+
transform: translate(1, 1) scale(3);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (orientation: portrait), projection and (color) {
|
|
57
|
+
.selector-i + .selector-ii {
|
|
58
|
+
background: hsl(20deg 25% 33%);
|
|
59
|
+
font-family: Helvetica, "Arial Black", sans-serif;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Flush single line comment */
|
|
64
|
+
@media
|
|
65
|
+
screen and (min-resolution: 192dpi),
|
|
66
|
+
screen and (min-resolution: 2dppx) {
|
|
67
|
+
.selector {
|
|
68
|
+
animation: 3s none fade-in;
|
|
69
|
+
background-image:
|
|
70
|
+
repeating-linear-gradient(
|
|
71
|
+
-45deg,
|
|
72
|
+
transparent,
|
|
73
|
+
#fff 25px,
|
|
74
|
+
rgb(255 255 255 / 100%) 50px
|
|
75
|
+
);
|
|
76
|
+
margin: 10px;
|
|
77
|
+
margin-bottom: 5px;
|
|
78
|
+
box-shadow:
|
|
79
|
+
0 1px 1px #000,
|
|
80
|
+
0 1px 0 #fff,
|
|
81
|
+
2px 2px 1px 1px #ccc inset;
|
|
82
|
+
height: 10rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Flush nested single line comment */
|
|
86
|
+
.selector::after {
|
|
87
|
+
content: "→";
|
|
88
|
+
background-image: url("x.svg");
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@keyframes fade-in {
|
|
93
|
+
from { opacity: 0; }
|
|
94
|
+
to { opacity: 1; }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Prefer "simple" selector-not-notation
|
|
98
|
+
.selector-not-notation {
|
|
99
|
+
&:not(.one, .two, .three) {
|
|
100
|
+
display: block;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
@import "x.css";
|
|
2
|
+
@import "y.css";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Multi-line comment
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--brand-red: rgb(112, 94, 92);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#id-selector {
|
|
13
|
+
color: blue;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#ValidIdSelector {
|
|
17
|
+
padding: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.selector-1,
|
|
21
|
+
.selector-2,
|
|
22
|
+
.selector-3[type="text"] {
|
|
23
|
+
background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
color: var(--brand-red);
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.selector-a,
|
|
30
|
+
.selector-b:not(:first-child) {
|
|
31
|
+
padding: 10px !important;
|
|
32
|
+
top: calc(100% - 2rem);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.selector-x {
|
|
36
|
+
width: 10%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.selector-y {
|
|
40
|
+
width: 20%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.selector-z {
|
|
44
|
+
width: 30%;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Single-line comment */
|
|
48
|
+
|
|
49
|
+
@media (width >= 60em) {
|
|
50
|
+
.selector {
|
|
51
|
+
/* Flush to parent comment */
|
|
52
|
+
transform: translate(1, 1) scale(3);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (orientation: portrait), projection and (color) {
|
|
57
|
+
.selector-i + .selector-ii {
|
|
58
|
+
background: rgb(105, 77, 63);
|
|
59
|
+
font-family: Helvetica, "Arial Black", sans-serif;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Flush single line comment */
|
|
64
|
+
@media screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
|
|
65
|
+
.selector {
|
|
66
|
+
animation: 3s none fade-in;
|
|
67
|
+
background-image: repeating-linear-gradient(
|
|
68
|
+
-45deg,
|
|
69
|
+
transparent,
|
|
70
|
+
#fff 25px,
|
|
71
|
+
rgb(255, 255, 255, 1) 50px
|
|
72
|
+
);
|
|
73
|
+
box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
|
|
74
|
+
height: 10rem;
|
|
75
|
+
margin: 10px;
|
|
76
|
+
margin-bottom: 5px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Flush nested single line comment */
|
|
80
|
+
.selector::after {
|
|
81
|
+
background-image: url("x.svg");
|
|
82
|
+
content: "→";
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes fade-in {
|
|
87
|
+
from {
|
|
88
|
+
opacity: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
to {
|
|
92
|
+
opacity: 1;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Prefer "simple" selector-not-notation
|
|
97
|
+
.selector-not-notation {
|
|
98
|
+
&:not(.one):not(.two):not(.three) {
|
|
99
|
+
display: block;
|
|
100
|
+
}
|
|
101
|
+
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@readme/stylelint-config",
|
|
3
|
-
"version": "3.1
|
|
3
|
+
"version": "3.2.1",
|
|
4
4
|
"description": "ReadMe coding standards for styles",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"files": [
|
|
7
|
-
"index.js"
|
|
8
|
-
],
|
|
5
|
+
"main": "src/index.js",
|
|
9
6
|
"scripts": {
|
|
10
7
|
"lint": "eslint .",
|
|
11
8
|
"test": "jest"
|
|
@@ -21,20 +18,20 @@
|
|
|
21
18
|
},
|
|
22
19
|
"homepage": "https://github.com/readmeio/standards",
|
|
23
20
|
"dependencies": {
|
|
21
|
+
"stylelint": "^15.10.0",
|
|
24
22
|
"stylelint-config-css-modules": "^4.2.0",
|
|
25
|
-
"stylelint-config-
|
|
26
|
-
"stylelint-config-
|
|
27
|
-
"stylelint-config-standard": "^
|
|
28
|
-
"stylelint-
|
|
29
|
-
"stylelint-prettier": "^
|
|
23
|
+
"stylelint-config-sass-guidelines": "^10.0.0",
|
|
24
|
+
"stylelint-config-standard": "^34.0.0",
|
|
25
|
+
"stylelint-config-standard-scss": "^10.0.0",
|
|
26
|
+
"stylelint-order": "^6.0.3",
|
|
27
|
+
"stylelint-prettier": "^3.0.0"
|
|
30
28
|
},
|
|
31
29
|
"peerDependencies": {
|
|
32
|
-
"postcss": "^8.4.12"
|
|
33
|
-
"stylelint": "^14.6.1"
|
|
30
|
+
"postcss": "^8.4.12"
|
|
34
31
|
},
|
|
35
32
|
"devDependencies": {
|
|
36
|
-
"@readme/eslint-config": "^10.6.
|
|
33
|
+
"@readme/eslint-config": "^10.6.2",
|
|
37
34
|
"jest": "^29.4.3"
|
|
38
35
|
},
|
|
39
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "88d8d9d48d4194b68b5fede311c052b4c2828161"
|
|
40
37
|
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
extends: [
|
|
3
|
+
// Standard rules to enforce common conventions
|
|
4
|
+
'stylelint-config-standard',
|
|
5
|
+
|
|
6
|
+
// Standard rules for SCSS
|
|
7
|
+
'stylelint-config-standard-scss',
|
|
8
|
+
|
|
9
|
+
// Stylelint config inspired by https://sass-guidelin.es
|
|
10
|
+
'stylelint-config-sass-guidelines',
|
|
11
|
+
|
|
12
|
+
// Support CSS modules syntax
|
|
13
|
+
'stylelint-config-css-modules',
|
|
14
|
+
|
|
15
|
+
// Enable prettier formatting for SCSS/CSS
|
|
16
|
+
'stylelint-prettier/recommended',
|
|
17
|
+
],
|
|
18
|
+
plugins: [
|
|
19
|
+
// Enable ordering rules for content within declaration blocks.
|
|
20
|
+
'stylelint-order',
|
|
21
|
+
],
|
|
22
|
+
rules: {
|
|
23
|
+
// Until we migrate *all* our repos away from legacy node-sass to dart sass,
|
|
24
|
+
// we must continue defining alpha values with decimal numbers. Node-sass
|
|
25
|
+
// has its own "rgb" and "rgba" funcitons. These get compiled and fails to
|
|
26
|
+
// parse percentage values appropriately, e.g. rgba(0,0,0,50%) gets compiled
|
|
27
|
+
// to rgb(0,0,0).
|
|
28
|
+
//
|
|
29
|
+
// This rule forces us to continue using decimal numbers for alpha value.
|
|
30
|
+
// e.g. rgba(0, 0, 0, 0.015)
|
|
31
|
+
'alpha-value-notation': 'number',
|
|
32
|
+
|
|
33
|
+
// ReadMe relies on legacy color functions (e.g. rgba(0, 0, 0, 0.5))
|
|
34
|
+
// everywhere in addition to Scss allowing this to be written with a color
|
|
35
|
+
// name (e.g. rgba(black, 0.5)). Eventually, consider removing this rule to
|
|
36
|
+
// use "modern" style with comma-free syntax (e.g. rgb(0 0 0 / 0.5)). This
|
|
37
|
+
// change however won't be trivial.
|
|
38
|
+
'color-function-notation': 'legacy',
|
|
39
|
+
|
|
40
|
+
// ReadMe still uses color names as values in many places.
|
|
41
|
+
'color-named': null,
|
|
42
|
+
|
|
43
|
+
// Extend the existing rule for our custom CSS props and make an exception
|
|
44
|
+
// for legacy CSS names like "--lightGray" and "--minimumGray" since
|
|
45
|
+
// customers may still be defining these in their custom stylesheets.
|
|
46
|
+
'custom-property-pattern': [
|
|
47
|
+
'^(([A-Z]+)?([A-Z][a-z0-9]+)+|([a-z][a-z0-9]*))((-[a-z0-9]+)*|Gray)$',
|
|
48
|
+
{
|
|
49
|
+
message:
|
|
50
|
+
'Expected custom property name to be kebab-case and optionally prefixed with TitleCase or ALLCAPSTitleCase, e.g. "text-color", "MyComponent-text-color", "APIAuthInput-text-color.',
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
|
|
54
|
+
// ReadMe breaks this rule in many places.
|
|
55
|
+
'max-nesting-depth': null,
|
|
56
|
+
|
|
57
|
+
// Prefer neither "prefix" or "context" notations for media queries.
|
|
58
|
+
// e.g. "min-width: 400px" or "width >= 600px"
|
|
59
|
+
// https://stylelint.io/user-guide/rules/media-feature-range-notation/
|
|
60
|
+
'media-feature-range-notation': null,
|
|
61
|
+
|
|
62
|
+
// Allows us to write duplicate selectors in groups
|
|
63
|
+
// https://github.com/stylelint/stylelint/issues/3196
|
|
64
|
+
'no-descending-specificity': [
|
|
65
|
+
true,
|
|
66
|
+
{
|
|
67
|
+
ignore: ['selectors-within-list'],
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
|
|
71
|
+
// Extend from existing rule to allow additional sections that are specific
|
|
72
|
+
// to our project such as dark-theme mixins, etc.
|
|
73
|
+
// https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/index.js#L50
|
|
74
|
+
'order/order': [
|
|
75
|
+
[
|
|
76
|
+
{
|
|
77
|
+
// Always place custom mixin definitions at the very top to ensure they
|
|
78
|
+
// are defined before any references below it.
|
|
79
|
+
type: 'at-rule',
|
|
80
|
+
name: 'mixin',
|
|
81
|
+
},
|
|
82
|
+
'custom-properties',
|
|
83
|
+
{
|
|
84
|
+
// Allow "@mixin {prefix}-dark-mode" directly after custom props
|
|
85
|
+
// section to support defining dark-mode styles inside a mixin that
|
|
86
|
+
// can be invoked in multiple places.
|
|
87
|
+
type: 'at-rule',
|
|
88
|
+
name: 'mixin',
|
|
89
|
+
parameter: '-dark-mode$',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
// Allow "@include dark-mode" directly after custom props section to
|
|
93
|
+
// support our dark-mode pattern as documented here:
|
|
94
|
+
// https://next.readme.ninja/ui/#/Core/Themes
|
|
95
|
+
type: 'at-rule',
|
|
96
|
+
name: 'include',
|
|
97
|
+
parameter: '^dark-mode$',
|
|
98
|
+
},
|
|
99
|
+
'dollar-variables',
|
|
100
|
+
{
|
|
101
|
+
type: 'at-rule',
|
|
102
|
+
name: 'extend',
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
type: 'at-rule',
|
|
106
|
+
name: 'include',
|
|
107
|
+
hasBlock: false,
|
|
108
|
+
},
|
|
109
|
+
'declarations',
|
|
110
|
+
{
|
|
111
|
+
type: 'at-rule',
|
|
112
|
+
name: 'include',
|
|
113
|
+
hasBlock: true,
|
|
114
|
+
},
|
|
115
|
+
'rules',
|
|
116
|
+
],
|
|
117
|
+
],
|
|
118
|
+
'order/properties-alphabetical-order': true,
|
|
119
|
+
|
|
120
|
+
// Custom regex of ReadMe's current BEM selector class pattern.
|
|
121
|
+
'selector-class-pattern': [
|
|
122
|
+
'^[a-zA-Z0-9]+((_|-)([a-zA-Z0-9]+))*$',
|
|
123
|
+
{
|
|
124
|
+
message:
|
|
125
|
+
'Selector should start in CapitalCase or camelCase and optionally followed by either kebab-lowercase with hyphens or snake_lowercase with underscores (e.g. BlockName-element-name_modifier-name)',
|
|
126
|
+
},
|
|
127
|
+
],
|
|
128
|
+
|
|
129
|
+
// Custom regex for ReadMe id patterns.
|
|
130
|
+
'selector-id-pattern': [
|
|
131
|
+
'^(([a-z][a-z0-9]*(-[a-z0-9]+)*)|([A-Z][a-z0-9]*)+)$',
|
|
132
|
+
{
|
|
133
|
+
message: 'Expected id selector to be kebab-case or TitleCase',
|
|
134
|
+
},
|
|
135
|
+
],
|
|
136
|
+
|
|
137
|
+
// ReadMe still references elements by #id. Allow at most one per selector.
|
|
138
|
+
'selector-max-id': 1,
|
|
139
|
+
|
|
140
|
+
// ReadMe relies on "element[attr='value']" selectors in too many places.
|
|
141
|
+
// Eventually, it may be beneficial to turn this on.
|
|
142
|
+
'selector-no-qualifying-type': null,
|
|
143
|
+
|
|
144
|
+
// Complex selectors are a level 4 spec that is not yet fully supported by
|
|
145
|
+
// all browsers, e.g. `:not(one, two, three)`. Until then, prefer the simple
|
|
146
|
+
// pattern that we use today, e.g. `:not(one):not(two):not(three)`.
|
|
147
|
+
// https://stylelint.io/user-guide/rules/list/selector-not-notation/
|
|
148
|
+
'selector-not-notation': 'simple',
|
|
149
|
+
|
|
150
|
+
// TODO: Remove this when migrating to Dart Sass.
|
|
151
|
+
// Disallows the use of global function names, as these global functions are
|
|
152
|
+
// now located inside built-in Dart Sass modules.
|
|
153
|
+
'scss/no-global-function-names': null,
|
|
154
|
+
},
|
|
155
|
+
};
|
package/index.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
extends: [
|
|
3
|
-
// Standard rules to enforce common conventions
|
|
4
|
-
'stylelint-config-standard',
|
|
5
|
-
|
|
6
|
-
// Standard rules for SCSS
|
|
7
|
-
'stylelint-config-standard-scss',
|
|
8
|
-
|
|
9
|
-
// Stylelint config inspired by https://sass-guidelin.es
|
|
10
|
-
'stylelint-config-sass-guidelines',
|
|
11
|
-
|
|
12
|
-
// Support CSS modules syntax
|
|
13
|
-
'stylelint-config-css-modules',
|
|
14
|
-
|
|
15
|
-
// Enable prettier formatting for SCSS/CSS
|
|
16
|
-
'stylelint-config-prettier',
|
|
17
|
-
'stylelint-prettier/recommended',
|
|
18
|
-
],
|
|
19
|
-
rules: {
|
|
20
|
-
// ReadMe relies on legacy color functions (e.g. rgba(0, 0, 0, 0.5))
|
|
21
|
-
// everywhere in addition to Scss allowing this to be written with a color
|
|
22
|
-
// name (e.g. rgba(black, 0.5)). Eventually, consider removing this rule to
|
|
23
|
-
// use "modern" style with comma-free syntax (e.g. rgb(0 0 0 / 0.5)). This
|
|
24
|
-
// change however won't be trivial.
|
|
25
|
-
'color-function-notation': 'legacy',
|
|
26
|
-
|
|
27
|
-
// ReadMe still uses color names as values in many places.
|
|
28
|
-
'color-named': null,
|
|
29
|
-
|
|
30
|
-
// ReadMe breaks this rule in many places.
|
|
31
|
-
'max-nesting-depth': null,
|
|
32
|
-
|
|
33
|
-
// Custom regex of ReadMe's current BEM selector class pattern.
|
|
34
|
-
'selector-class-pattern': [
|
|
35
|
-
'^[a-zA-Z0-9]+((_|-)([a-zA-Z0-9]+))*$',
|
|
36
|
-
{
|
|
37
|
-
message:
|
|
38
|
-
'Selector should start in CapitalCase or camelCase and optionally followed by either kebab-lowercase with hyphens or snake_lowercase with underscores (e.g. BlockName-element-name_modifier-name)',
|
|
39
|
-
},
|
|
40
|
-
],
|
|
41
|
-
|
|
42
|
-
// Custom regex for ReadMe id patterns.
|
|
43
|
-
'selector-id-pattern': [
|
|
44
|
-
'^(([a-z][a-z0-9]*(-[a-z0-9]+)*)|([A-Z][a-z0-9]*)+)$',
|
|
45
|
-
{
|
|
46
|
-
message: 'Expected id selector to be kebab-case or TitleCase',
|
|
47
|
-
},
|
|
48
|
-
],
|
|
49
|
-
|
|
50
|
-
// ReadMe still references elements by #id. Allow at most one per selector.
|
|
51
|
-
'selector-max-id': 1,
|
|
52
|
-
|
|
53
|
-
// ReadMe relies on "element[attr='value']" selectors in too many places.
|
|
54
|
-
// Eventually, it may be beneficial to turn this on.
|
|
55
|
-
'selector-no-qualifying-type': null,
|
|
56
|
-
|
|
57
|
-
// Complex selectors are a level 4 spec that is not yet fully supported by
|
|
58
|
-
// all browsers, e.g. `:not(one, two, three)`. Until then, prefer the simple
|
|
59
|
-
// pattern that we use today, e.g. `:not(one):not(two):not(three)`.
|
|
60
|
-
// https://stylelint.io/user-guide/rules/list/selector-not-notation/
|
|
61
|
-
'selector-not-notation': 'simple',
|
|
62
|
-
|
|
63
|
-
// TODO: Remove this when migrating to Dart Sass.
|
|
64
|
-
// Disallows the use of global function names, as these global functions are
|
|
65
|
-
// now located inside built-in Dart Sass modules.
|
|
66
|
-
'scss/no-global-function-names': null,
|
|
67
|
-
},
|
|
68
|
-
};
|