@perplex-digital/stylelint-config 1.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 (6) hide show
  1. package/LICENSE.txt +15 -0
  2. package/README.md +67 -0
  3. package/declarations.js +117 -0
  4. package/groups.js +613 -0
  5. package/index.js +74 -0
  6. package/package.json +72 -0
package/LICENSE.txt ADDED
@@ -0,0 +1,15 @@
1
+ ISC License
2
+
3
+ Copyright Perplex Digital B.V.
4
+
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted, provided that the above
7
+ copyright notice and this permission notice appear in all copies.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10
+ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11
+ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12
+ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13
+ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14
+ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15
+ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,67 @@
1
+ # Perplex Property Order [<img src="https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2872758/stylelint-icon-black.svg" alt="StyleLint" width="90" height="90" align="right">][stylelint]
2
+
3
+ [![npm version][npm-img]][npm-url]
4
+ [![npm downloads][npm-dls]][npm-url]
5
+ [![github issues][issues-img]][issues-url]
6
+
7
+ A heavily opinionated [Stylelint][] config that also sorts CSS declarations and properties the way [Perplex][] does.
8
+
9
+ \*With some modifications & additions for modern properties.
10
+
11
+ ## Usage
12
+
13
+ 1. Add [stylelint][] and this package to your project:
14
+ ```sh
15
+ pnpm add stylelint @perplex-digital/stylelint-config
16
+ ```
17
+ 2. Configure your stylelint configuration file to extend this package:
18
+ ```js
19
+ export default {
20
+ extends: ['@perplex-digital/stylelint-config'],
21
+ rules: {
22
+ // Add overrides and additional rules here
23
+ },
24
+ };
25
+ ```
26
+
27
+ ## Advanced
28
+
29
+ The default setup applies these rules:
30
+ * `stylelint-config-standard`
31
+ * `stylelint-config-recommended-vue`
32
+ * `order/order` with the various [custom properties and declarations][].
33
+ * `order/properties-order` with the various [property groups][]. If you need to configure other options for this rule,
34
+ the groups can be imported separately and the rule configured to your needs.
35
+ * `stylelint-use-logical-spec`
36
+ * `stylelint-high-performance-animation`
37
+
38
+ ```js
39
+ import propertyGroups from '@perplex-digital/stylelint-config/groups';
40
+
41
+ export default {
42
+ extends: [], // Do not extend the config here.
43
+ rules: {
44
+ // Configure the rule manually.
45
+ 'order/properties-order': propertyGroups.map((group) => ({
46
+ ...group,
47
+ emptyLineBefore: 'always',
48
+ noEmptyLineBetween: true,
49
+ })),
50
+ },
51
+ };
52
+ ```
53
+
54
+ ## References
55
+
56
+ [@mdo on CSS Property Order][mdo-order]
57
+
58
+ [npm-url]: https://www.npmjs.com/package/@perplex-digital/stylelint-config
59
+ [npm-img]: https://img.shields.io/npm/v/@perplex-digital/stylelint-config.svg?style=flat-square
60
+ [npm-dls]: https://img.shields.io/npm/dt/@perplex-digital/stylelint-config.svg?style=flat-square
61
+ [issues-url]: https://github.com/PerplexDigital/stylelint-config/issues
62
+ [issues-img]: https://img.shields.io/github/issues/PerplexDigital/stylelint-config.svg?style=flat-square
63
+ [stylelint]: https://github.com/stylelint/stylelint
64
+ [perplex]: https://perplex.nl/en
65
+ [mdo-order]: http://markdotto.com/2011/11/29/css-property-order/
66
+ [custom properties and declarations]: https://github.com/PerplexDigital/stylelint-config/blob/main/declarations.js
67
+ [property groups]: https://github.com/PerplexDigital/stylelint-config/blob/main/groups.js
package/declarations.js ADDED
@@ -0,0 +1,117 @@
1
+ export default [
2
+ [
3
+ 'custom-properties',
4
+ {
5
+ type: 'at-rule',
6
+ name: 'extend',
7
+ },
8
+ {
9
+ type: 'at-rule',
10
+ name: 'mixin',
11
+ hasBlock: false,
12
+ },
13
+ 'declarations',
14
+ {
15
+ type: 'rule',
16
+ selector: '^&::(?!before|after)',
17
+ // Matches pseudo-elements like '&::placeholder' but not '&::before' and '&::after'
18
+ },
19
+ {
20
+ type: 'rule',
21
+ selector: '^&::before',
22
+ // Matches pseudo-element '&::before'
23
+ },
24
+ {
25
+ type: 'rule',
26
+ selector: '^&::after',
27
+ // Matches pseudo-element '&::after'
28
+ },
29
+ {
30
+ type: 'rule',
31
+ selector: '^\\*',
32
+ // Matches universal selector '*'
33
+ },
34
+ {
35
+ type: 'rule',
36
+ selector: '^[^&\\+~]*[^:&]$',
37
+ // Matches child-elements like '.example'
38
+ },
39
+ {
40
+ type: 'rule',
41
+ selector: '^\\+',
42
+ // Matches elements that are placed immediately after, like '+ .example'
43
+ },
44
+ {
45
+ type: 'rule',
46
+ selector: '^~',
47
+ // Matches elements that are placed somewhere after, like '~ .example'
48
+ },
49
+ {
50
+ type: 'rule',
51
+ selector: '^&:(fullscreen|modal|picture-in-picture)',
52
+ // Matches element display state pseudo-classes
53
+ },
54
+ {
55
+ type: 'rule',
56
+ selector:
57
+ '^&:(autofill|enabled|disabled|read|placeholder-shown|default|checked|indeterminate|blank|valid|range|required|optional)',
58
+ // Matches input pseudo-classes
59
+ },
60
+ {
61
+ type: 'rule',
62
+ selector: '^&:(dir|lang)',
63
+ // Matches linguistic pseudo-classes
64
+ },
65
+ {
66
+ type: 'rule',
67
+ selector: '^&:(link|visited|target|scope)',
68
+ // Matches location pseudo-classes
69
+ },
70
+ {
71
+ type: 'rule',
72
+ selector: '^&:(playing|paused)',
73
+ // Matches resource state pseudo-classes
74
+ },
75
+ {
76
+ type: 'rule',
77
+ selector: '^&:(current|past|future)',
78
+ // Matches time-dimensional pseudo-classes
79
+ },
80
+ {
81
+ type: 'rule',
82
+ selector: '^&:(hover|active|focus)',
83
+ // Matches user-action pseudo-classes
84
+ },
85
+ {
86
+ type: 'at-rule',
87
+ name: 'media',
88
+ parameter: '--(mouse|touch)',
89
+ // Matches media-queries '@media (--mouse) and '@media (--touch)'
90
+ hasBlock: true,
91
+ },
92
+ {
93
+ type: 'rule',
94
+ selector: '^&((\\.|\\[)|(.*(empty|child|type|is|not|where|has)).*)',
95
+ // Matches modifiers like '&.example', tree-structural pseudo-classes and functional pseudo-classes
96
+ },
97
+ {
98
+ type: 'rule',
99
+ selector: '&$',
100
+ // Matches parent-modifiers like '.example &'
101
+ },
102
+ {
103
+ type: 'at-rule',
104
+ name: 'keyframes',
105
+ },
106
+ {
107
+ type: 'at-rule',
108
+ name: 'media',
109
+ parameter: '--(?!mouse|touch)',
110
+ // Matches all other media-queries like '@media (--xl-up)'
111
+ hasBlock: true,
112
+ },
113
+ ],
114
+ {
115
+ unspecified: 'ignore',
116
+ },
117
+ ];
package/groups.js ADDED
@@ -0,0 +1,613 @@
1
+ /**
2
+ * @typedef {Object} Group
3
+ * @property {Array<string>} properties
4
+ */
5
+
6
+ /** @type {Group[]} */
7
+ export default [
8
+ {
9
+ properties: ['all'],
10
+ },
11
+ {
12
+ groupName: 'Visibility',
13
+ properties: [
14
+ 'overflow',
15
+ 'overflow-y',
16
+ 'overflow-x',
17
+ 'overflow-block',
18
+ 'overflow-inline',
19
+ 'overflow-wrap',
20
+ 'overflow-scrolling',
21
+ 'overflow-anchor',
22
+ 'overflow-clip-margin',
23
+ 'appearance',
24
+ 'opacity',
25
+ 'visibility',
26
+ 'backface-visibility',
27
+ 'box-sizing',
28
+ 'display',
29
+ ],
30
+ },
31
+ {
32
+ groupName: 'Flexbox',
33
+ properties: ['flex', 'flex-basis', 'flex-direction', 'flex-flow', 'flex-grow', 'flex-shrink', 'flex-wrap'],
34
+ },
35
+ {
36
+ groupName: 'Grid',
37
+ properties: [
38
+ 'grid',
39
+ 'grid-area',
40
+ 'grid-template',
41
+ 'grid-template-areas',
42
+ 'grid-template-rows',
43
+ 'grid-template-columns',
44
+ 'grid-row',
45
+ 'grid-row-start',
46
+ 'grid-row-end',
47
+ 'grid-column',
48
+ 'grid-column-start',
49
+ 'grid-column-end',
50
+ 'grid-auto-rows',
51
+ 'grid-auto-columns',
52
+ 'grid-auto-flow',
53
+ 'gap',
54
+ 'row-gap',
55
+ 'column-gap',
56
+ 'column-count',
57
+ 'column-fill',
58
+ 'column-rule',
59
+ 'column-rule-color',
60
+ 'column-rule-style',
61
+ 'column-rule-width',
62
+ 'column-span',
63
+ 'column-width',
64
+ ],
65
+ },
66
+ {
67
+ groupName: 'Layout alignment',
68
+ properties: [
69
+ 'place-content',
70
+ 'place-items',
71
+ 'place-self',
72
+ 'align-content',
73
+ 'align-items',
74
+ 'align-self',
75
+ 'justify-content',
76
+ 'justify-items',
77
+ 'justify-self',
78
+ ],
79
+ },
80
+ {
81
+ groupName: 'Order',
82
+ properties: ['order'],
83
+ },
84
+ {
85
+ groupName: 'Box model',
86
+ properties: [
87
+ 'float',
88
+ 'float-defer',
89
+ 'float-offset',
90
+ 'float-reference',
91
+ 'inline-size',
92
+ 'min-inline-size',
93
+ 'max-inline-size',
94
+ 'block-size',
95
+ 'min-block-size',
96
+ 'max-block-size',
97
+ 'min-intrinsic-sizing',
98
+ 'margin',
99
+ 'margin-block',
100
+ 'margin-block-start',
101
+ 'margin-block-end',
102
+ 'margin-inline',
103
+ 'margin-inline-start',
104
+ 'margin-inline-end',
105
+ 'margin-trim',
106
+ 'outline',
107
+ 'outline-width',
108
+ 'outline-style',
109
+ 'outline-color',
110
+ 'outline-offset',
111
+ 'border',
112
+ 'border-width',
113
+ 'border-style',
114
+ 'border-color',
115
+ 'border-block',
116
+ 'border-block-color',
117
+ 'border-block-start',
118
+ 'border-block-start-width',
119
+ 'border-block-start-style',
120
+ 'border-block-start-color',
121
+ 'border-block-end',
122
+ 'border-block-end-width',
123
+ 'border-block-end-style',
124
+ 'border-block-end-color',
125
+ 'border-block-style',
126
+ 'border-block-width',
127
+ 'border-inline',
128
+ 'border-inline-color',
129
+ 'border-inline-start',
130
+ 'border-inline-start-width',
131
+ 'border-inline-start-style',
132
+ 'border-inline-start-color',
133
+ 'border-inline-end',
134
+ 'border-inline-end-width',
135
+ 'border-inline-end-style',
136
+ 'border-inline-end-color',
137
+ 'border-inline-style',
138
+ 'border-inline-width',
139
+ 'border-radius',
140
+ 'border-top-left-radius',
141
+ 'border-top-right-radius',
142
+ 'border-bottom-left-radius',
143
+ 'border-bottom-right-radius',
144
+ 'border-start-end-radius',
145
+ 'border-start-start-radius',
146
+ 'border-end-end-radius',
147
+ 'border-end-start-radius',
148
+ 'border-image',
149
+ 'border-image-source',
150
+ 'border-image-slice',
151
+ 'border-image-width',
152
+ 'border-image-outset',
153
+ 'border-image-repeat',
154
+ 'padding',
155
+ 'padding-block',
156
+ 'padding-block-start',
157
+ 'padding-block-end',
158
+ 'padding-inline',
159
+ 'padding-inline-start',
160
+ 'padding-inline-end',
161
+ 'aspect-ratio',
162
+ 'overscroll-behavior',
163
+ 'overscroll-behavior-block',
164
+ 'overscroll-behavior-inline',
165
+ 'overscroll-behavior-inline',
166
+ 'overscroll-behavior-block',
167
+ 'clip',
168
+ 'clip-path',
169
+ 'clip-rule',
170
+ 'clear',
171
+ ],
172
+ },
173
+ {
174
+ groupName: 'Borders & Backgrounds',
175
+ properties: [
176
+ 'box-shadow',
177
+ 'background',
178
+ 'background-color',
179
+ 'background-image',
180
+ 'background-repeat',
181
+ 'background-attachment',
182
+ 'background-position',
183
+ 'background-position-x',
184
+ 'background-position-y',
185
+ 'background-clip',
186
+ 'background-origin',
187
+ 'background-size',
188
+ 'background-blend-mode',
189
+ 'object-fit',
190
+ 'object-position',
191
+ 'filter',
192
+ 'mix-blend-mode',
193
+ 'isolation',
194
+ ],
195
+ },
196
+ {
197
+ groupName: 'Typography',
198
+ properties: [
199
+ 'src',
200
+ 'content',
201
+ 'font',
202
+ 'font-family',
203
+ 'font-weight',
204
+ 'font-size',
205
+ 'font-style',
206
+ 'font-feature-settings',
207
+ 'font-kerning',
208
+ 'font-variant',
209
+ 'font-variant-ligatures',
210
+ 'font-variant-caps',
211
+ 'font-variant-alternates',
212
+ 'font-variant-numeric',
213
+ 'font-variant-east-asian',
214
+ 'font-variant-position',
215
+ 'font-size-adjust',
216
+ 'font-stretch',
217
+ 'font-effect',
218
+ 'font-emphasize',
219
+ 'font-emphasize-position',
220
+ 'font-emphasize-style',
221
+ 'font-smooth',
222
+ 'font-display',
223
+ 'font-language-override',
224
+ 'font-optical-sizing',
225
+ 'font-palette',
226
+ 'font-synthesis',
227
+ 'font-synthesis-small-caps',
228
+ 'font-synthesis-style',
229
+ 'font-synthesis-weight',
230
+ 'font-variant-emoji',
231
+ 'font-variation-settings',
232
+ 'initial-letter',
233
+ 'initial-letter-align',
234
+ 'initial-letter-wrap',
235
+ 'line-height',
236
+ 'line-height-step',
237
+ 'line-break',
238
+ 'line-clamp',
239
+ 'line-grid',
240
+ 'line-padding',
241
+ 'line-snap',
242
+ 'color',
243
+ 'text-align',
244
+ 'text-align-last',
245
+ 'text-emphasis',
246
+ 'text-emphasis-color',
247
+ 'text-emphasis-style',
248
+ 'text-emphasis-position',
249
+ 'text-decoration',
250
+ 'text-decoration-line',
251
+ 'text-decoration-thickness',
252
+ 'text-decoration-skip',
253
+ 'text-decoration-skip-ink',
254
+ 'text-decoration-style',
255
+ 'text-decoration-color',
256
+ 'text-underline-offset',
257
+ 'text-underline-position',
258
+ 'text-indent',
259
+ 'text-justify',
260
+ 'text-outline',
261
+ 'text-overflow',
262
+ 'text-overflow-ellipsis',
263
+ 'text-overflow-mode',
264
+ 'block-ellipsis',
265
+ 'text-shadow',
266
+ 'text-transform',
267
+ 'text-wrap',
268
+ 'text-size-adjust',
269
+ 'text-align-all',
270
+ 'text-combine-upright',
271
+ 'text-decoration-skip',
272
+ 'text-decoration-skip-box',
273
+ 'text-decoration-skip-ink',
274
+ 'text-decoration-skip-inset',
275
+ 'text-decoration-skip-self',
276
+ 'text-decoration-skip-spaces',
277
+ 'text-edge',
278
+ 'text-emphasis-skip',
279
+ 'text-group-align',
280
+ 'text-orientation',
281
+ 'text-space-collapse',
282
+ 'text-space-trim',
283
+ 'text-spacing',
284
+ 'letter-spacing',
285
+ 'word-break',
286
+ 'word-spacing',
287
+ 'word-wrap',
288
+ 'word-boundary-detection',
289
+ 'word-boundary-expansion',
290
+ 'hyphens',
291
+ 'hyphenate-character',
292
+ 'hyphenate-limit-chars',
293
+ 'hyphenate-limit-last',
294
+ 'hyphenate-limit-lines',
295
+ 'hyphenate-limit-zone',
296
+ 'tab-size',
297
+ 'white-space',
298
+ 'vertical-align',
299
+ 'list-style',
300
+ 'list-style-position',
301
+ 'list-style-type',
302
+ 'list-style-image',
303
+ 'counter-reset',
304
+ 'counter-increment',
305
+ 'counter-set',
306
+ ],
307
+ },
308
+ {
309
+ groupName: 'SVG Presentation Attributes',
310
+ properties: [
311
+ 'alignment-baseline',
312
+ 'baseline-shift',
313
+ 'dominant-baseline',
314
+ 'text-anchor',
315
+ 'word-spacing',
316
+ 'writing-mode',
317
+ 'fill',
318
+ 'fill-opacity',
319
+ 'fill-rule',
320
+ 'fill-break',
321
+ 'fill-color',
322
+ 'fill-image',
323
+ 'fill-origin',
324
+ 'fill-position',
325
+ 'fill-repeat',
326
+ 'fill-size',
327
+ 'stroke',
328
+ 'stroke-dasharray',
329
+ 'stroke-dashoffset',
330
+ 'stroke-linecap',
331
+ 'stroke-linejoin',
332
+ 'stroke-miterlimit',
333
+ 'stroke-opacity',
334
+ 'stroke-width',
335
+ 'stroke-align',
336
+ 'stroke-alignment',
337
+ 'stroke-break',
338
+ 'stroke-color',
339
+ 'stroke-dash-corner',
340
+ 'stroke-dash-justify',
341
+ 'stroke-dashadjust',
342
+ 'stroke-dashcorner',
343
+ 'stroke-image',
344
+ 'stroke-origin',
345
+ 'stroke-position',
346
+ 'stroke-repeat',
347
+ 'stroke-size',
348
+ 'color-interpolation',
349
+ 'color-interpolation-filters',
350
+ 'color-profile',
351
+ 'color-rendering',
352
+ 'color-adjust',
353
+ 'color-scheme',
354
+ 'flood-color',
355
+ 'flood-opacity',
356
+ 'image-rendering',
357
+ 'image-orientation',
358
+ 'image-resolution',
359
+ 'lighting-color',
360
+ 'marker',
361
+ 'marker-start',
362
+ 'marker-mid',
363
+ 'marker-end',
364
+ 'marker-knockout-left',
365
+ 'marker-knockout-right',
366
+ 'marker-pattern',
367
+ 'marker-segment',
368
+ 'marker-side',
369
+ 'mask',
370
+ 'mask-border',
371
+ 'mask-border-mode',
372
+ 'mask-border-outset',
373
+ 'mask-border-repeat',
374
+ 'mask-border-slice',
375
+ 'mask-border-source',
376
+ 'mask-border-width',
377
+ 'mask-clip',
378
+ 'mask-composite',
379
+ 'mask-image',
380
+ 'mask-mode',
381
+ 'mask-origin',
382
+ 'mask-position',
383
+ 'mask-repeat',
384
+ 'mask-size',
385
+ 'mask-type',
386
+ 'shape-rendering',
387
+ 'shape-image-threshold',
388
+ 'shape-inside',
389
+ 'shape-margin',
390
+ 'shape-outside',
391
+ 'stop-color',
392
+ 'stop-opacity',
393
+ ],
394
+ },
395
+ {
396
+ groupName: 'Accessibility & Interactions',
397
+ properties: [
398
+ 'pointer-events',
399
+ 'touch-action',
400
+ 'cursor',
401
+ 'zoom',
402
+ 'table-layout',
403
+ 'empty-cells',
404
+ 'caption-side',
405
+ 'border-spacing',
406
+ 'border-collapse',
407
+ 'quotes',
408
+ 'resize',
409
+ 'user-select',
410
+ 'nav-index',
411
+ 'nav-up',
412
+ 'nav-right',
413
+ 'nav-down',
414
+ 'nav-left',
415
+ 'scroll-behavior',
416
+ 'scroll-margin',
417
+ 'scroll-margin-block',
418
+ 'scroll-margin-block-end',
419
+ 'scroll-margin-block-start',
420
+ 'scroll-margin-bottom',
421
+ 'scroll-margin-inline',
422
+ 'scroll-margin-inline-end',
423
+ 'scroll-margin-inline-start',
424
+ 'scroll-margin-left',
425
+ 'scroll-margin-right',
426
+ 'scroll-margin-top',
427
+ 'scroll-padding',
428
+ 'scroll-padding-block',
429
+ 'scroll-padding-block-end',
430
+ 'scroll-padding-block-start',
431
+ 'scroll-padding-bottom',
432
+ 'scroll-padding-inline',
433
+ 'scroll-padding-inline-end',
434
+ 'scroll-padding-inline-start',
435
+ 'scroll-padding-left',
436
+ 'scroll-padding-right',
437
+ 'scroll-padding-top',
438
+ 'scroll-snap-align',
439
+ 'scroll-snap-stop',
440
+ 'scroll-snap-type',
441
+ 'scrollbar-color',
442
+ 'scrollbar-gutter',
443
+ 'scrollbar-width',
444
+ 'speak',
445
+ 'speak-as',
446
+ 'speak-header',
447
+ 'speak-numeral',
448
+ 'speak-punctuation',
449
+ 'speech-rate',
450
+ 'voice-balance',
451
+ 'voice-duration',
452
+ 'voice-family',
453
+ 'voice-pitch',
454
+ 'voice-range',
455
+ 'voice-rate',
456
+ 'voice-stress',
457
+ 'voice-volume',
458
+ 'pitch',
459
+ 'pitch-range',
460
+ 'volume',
461
+ 'play-during',
462
+ 'pause',
463
+ 'pause-after',
464
+ 'pause-before',
465
+ ],
466
+ },
467
+ {
468
+ groupName: 'Positioning',
469
+ properties: [
470
+ 'position',
471
+ 'inset',
472
+ 'inset-block',
473
+ 'inset-block-start',
474
+ 'inset-block-end',
475
+ 'inset-inline',
476
+ 'inset-inline-start',
477
+ 'inset-inline-end',
478
+ 'anchor-name',
479
+ 'anchor-scope',
480
+ 'position-anchor',
481
+ 'position-area',
482
+ 'position-fallback',
483
+ 'position-fallbacks',
484
+ 'position-try',
485
+ 'position-try-fallbacks',
486
+ 'position-visibility',
487
+ 'z-index',
488
+ ],
489
+ },
490
+ {
491
+ groupName: 'Transforms',
492
+ properties: [
493
+ 'rotate',
494
+ 'scale',
495
+ 'translate',
496
+ 'transform',
497
+ 'transform-origin',
498
+ 'transform-box',
499
+ 'transform-style',
500
+ 'offset',
501
+ 'offset-anchor',
502
+ 'offset-distance',
503
+ 'offset-path',
504
+ 'offset-position',
505
+ 'offset-rotate',
506
+ ],
507
+ },
508
+ {
509
+ groupName: 'Transitions & Animation',
510
+ properties: [
511
+ 'transition',
512
+ 'transition-delay',
513
+ 'transition-timing-function',
514
+ 'transition-duration',
515
+ 'transition-property',
516
+ 'animation',
517
+ 'animation-name',
518
+ 'animation-duration',
519
+ 'animation-play-state',
520
+ 'animation-timing-function',
521
+ 'animation-delay',
522
+ 'animation-iteration-count',
523
+ 'animation-direction',
524
+ 'animation-fill-mode',
525
+ 'animation-composition',
526
+ 'animation-range',
527
+ 'animation-range-end',
528
+ 'animation-range-start',
529
+ 'animation-timeline',
530
+ 'will-change',
531
+ ],
532
+ },
533
+ {
534
+ groupName: 'Misc',
535
+ properties: [
536
+ 'accent-color',
537
+ 'azimuth',
538
+ 'baseline-source',
539
+ 'block-step',
540
+ 'block-step-align',
541
+ 'block-step-insert',
542
+ 'block-step-round',
543
+ 'block-step-size',
544
+ 'bookmark-label',
545
+ 'bookmark-level',
546
+ 'bookmark-state',
547
+ 'border-boundary',
548
+ 'box-decoration-break',
549
+ 'box-snap',
550
+ 'break-after',
551
+ 'break-before',
552
+ 'break-inside',
553
+ 'caret',
554
+ 'caret-color',
555
+ 'caret-shape',
556
+ 'chains',
557
+ 'columns',
558
+ 'contain',
559
+ 'contain-intrinsic-block-size',
560
+ 'contain-intrinsic-height',
561
+ 'contain-intrinsic-inline-size',
562
+ 'contain-intrinsic-size',
563
+ 'contain-intrinsic-width',
564
+ 'content-visibility',
565
+ 'continue',
566
+ 'cue',
567
+ 'cue-after',
568
+ 'cue-before',
569
+ 'direction',
570
+ 'elevation',
571
+ 'flow',
572
+ 'flow-from',
573
+ 'flow-into',
574
+ 'footnote-display',
575
+ 'footnote-policy',
576
+ 'forced-color-adjust',
577
+ 'glyph-orientation-vertical',
578
+ 'hanging-punctuation',
579
+ 'leading-trim',
580
+ 'max-lines',
581
+ 'orphans',
582
+ 'page',
583
+ 'page-break-after',
584
+ 'page-break-before',
585
+ 'page-break-inside',
586
+ 'perspective',
587
+ 'perspective-origin',
588
+ 'print-color-adjust',
589
+ 'region-fragment',
590
+ 'rest',
591
+ 'rest-after',
592
+ 'rest-before',
593
+ 'richness',
594
+ 'ruby-align',
595
+ 'ruby-merge',
596
+ 'ruby-overhang',
597
+ 'ruby-position',
598
+ 'running',
599
+ 'spatial-navigation-action',
600
+ 'spatial-navigation-contain',
601
+ 'spatial-navigation-function',
602
+ 'stress',
603
+ 'string-set',
604
+ 'unicode-bidi',
605
+ 'widows',
606
+ 'wrap-after',
607
+ 'wrap-before',
608
+ 'wrap-flow',
609
+ 'wrap-inside',
610
+ 'wrap-through',
611
+ ],
612
+ },
613
+ ];
package/index.js ADDED
@@ -0,0 +1,74 @@
1
+ import declarations from './declarations.js';
2
+ import propertyGroups from './groups.js';
3
+
4
+ const config = {
5
+ extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
6
+ plugins: [
7
+ '@stylistic/stylelint-plugin',
8
+ 'stylelint-order',
9
+ 'stylelint-use-logical-spec',
10
+ 'stylelint-high-performance-animation',
11
+ ],
12
+ ignoreFiles: ['*.min.css', 'wwwroot/css/*.css'],
13
+ rules: {
14
+ 'at-rule-empty-line-before': [
15
+ 'always',
16
+ {
17
+ except: ['blockless-after-same-name-blockless', 'first-nested'],
18
+ ignore: ['after-comment'],
19
+ ignoreAtRules: ['else'],
20
+ },
21
+ ],
22
+ 'at-rule-no-unknown': null,
23
+ 'color-no-hex': true,
24
+ 'comment-empty-line-before': null,
25
+ 'custom-media-pattern': null,
26
+ 'declaration-block-no-redundant-longhand-properties': [
27
+ true,
28
+ {
29
+ ignoreShorthands: ['grid-template', 'flex', 'flex-flow'],
30
+ },
31
+ ],
32
+ 'declaration-empty-line-before': 'never',
33
+ 'font-weight-notation': [
34
+ 'numeric',
35
+ {
36
+ ignore: ['relative'],
37
+ },
38
+ ],
39
+ 'function-no-unknown': null,
40
+ 'import-notation': 'string',
41
+ 'no-descending-specificity': null,
42
+ 'no-duplicate-selectors': true,
43
+ 'no-empty-source': [
44
+ true,
45
+ {
46
+ severity: 'warning',
47
+ },
48
+ ],
49
+ 'number-max-precision': null,
50
+ 'selector-class-pattern': null,
51
+ 'selector-pseudo-class-no-unknown': [
52
+ true,
53
+ {
54
+ ignorePseudoClasses: ['global', 'deep'],
55
+ },
56
+ ],
57
+ // Plugin rules
58
+ 'liberty/use-logical-spec': 'always',
59
+ '@stylistic/block-closing-brace-newline-before': 'always',
60
+ '@stylistic/block-opening-brace-newline-after': 'always',
61
+ '@stylistic/declaration-block-semicolon-newline-after': 'always',
62
+ 'order/order': declarations,
63
+ 'order/properties-order': propertyGroups,
64
+ 'plugin/no-low-performance-animation-properties': [
65
+ true,
66
+ {
67
+ ignore: 'paint-properties',
68
+ severity: 'warning',
69
+ },
70
+ ],
71
+ },
72
+ };
73
+
74
+ export default config;
package/package.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "name": "@perplex-digital/stylelint-config",
3
+ "version": "1.0.0",
4
+ "description": "Box model-based property sort order for Stylelint.",
5
+ "keywords": [
6
+ "logical properties",
7
+ "properties-order",
8
+ "property order",
9
+ "box model",
10
+ "stylelint",
11
+ "stylelint-config",
12
+ "stylelint-order"
13
+ ],
14
+ "homepage": "https://github.com/PerplexDigital/stylelint-config",
15
+ "bugs": "https://github.com/PerplexDigital/stylelint-config/issues",
16
+ "repository": "PerplexDigital/stylelint-config",
17
+ "license": "ISC",
18
+ "author": "Tobias Boekwijt (https://perplex.nl/en/perplexers#tobias-boekwijt)",
19
+ "type": "module",
20
+ "exports": {
21
+ ".": "./index.js",
22
+ "./declarations": "./declarations.js",
23
+ "./groups": "./groups.js"
24
+ },
25
+ "main": "index.js",
26
+ "files": [
27
+ "index.js",
28
+ "declarations.js",
29
+ "groups.js"
30
+ ],
31
+ "scripts": {
32
+ "changeset": "changeset add",
33
+ "lint": "eslint '**/*.js'",
34
+ "prepare": "husky",
35
+ "release": "changeset publish",
36
+ "test": "node --test"
37
+ },
38
+ "lint-staged": {
39
+ "*.js": [
40
+ "eslint --fix",
41
+ "prettier --write"
42
+ ],
43
+ "package.json": "prettier --write"
44
+ },
45
+ "dependencies": {
46
+ "stylelint-order": "^6.0.4"
47
+ },
48
+ "devDependencies": {
49
+ "@commitlint/cli": "^19.6.0",
50
+ "@commitlint/config-conventional": "^19.6.0",
51
+ "@changesets/cli": "^2.27.10",
52
+ "@zazen/changesets-changelog": "^2.0.3",
53
+ "@nuxt/eslint-config": "^0.7.2",
54
+ "@stylistic/stylelint-plugin": "^3.1.1",
55
+ "eslint-config-prettier": "^9.1.0",
56
+ "eslint-plugin-prettier": "^5.2.1",
57
+ "husky": "^9.1.7",
58
+ "lint-staged": "^15.2.10",
59
+ "prettier": "^3.4.2",
60
+ "stylelint": "^16.11.0",
61
+ "stylelint-config-recommended-vue": "^1.5.0",
62
+ "stylelint-config-standard": "^36.0.1",
63
+ "stylelint-high-performance-animation": "^1.10.0",
64
+ "stylelint-order": "^6.0.4",
65
+ "stylelint-use-logical-spec": "^5.0.1",
66
+ "typescript": "^5.7.2"
67
+ },
68
+ "peerDependencies": {
69
+ "stylelint": ">=16"
70
+ },
71
+ "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
72
+ }