Skip to content

Commit 11ccc85

Browse files
tanhauhautanhauhau
committed
handle shorthand edge case
1 parent edd1353 commit 11ccc85

File tree

3 files changed

+251
-8
lines changed

3 files changed

+251
-8
lines changed

‎lib/rules/sort-styles.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const {
1616
getPropertiesChunks,
1717
getStylePropertyIdentifier,
1818
isStyleSheetDeclaration,
19+
isEitherShortHand,
1920
} = astHelpers;
2021

2122
//------------------------------------------------------------------------------
@@ -37,7 +38,9 @@ module.exports = (context) => {
3738
const identifierB = getStylePropertyIdentifier(b);
3839

3940
let sortOrder = 0;
40-
if (identifierA < identifierB) {
41+
if (isEitherShortHand(identifierA, identifierB)) {
42+
return a.range[0] - b.range[0];
43+
} else if (identifierA < identifierB) {
4144
sortOrder = -1;
4245
} else if (identifierA > identifierB) {
4346
sortOrder = 1;
@@ -91,6 +94,13 @@ module.exports = (context) => {
9194
const prevName = getStylePropertyIdentifier(previous);
9295
const currentName = getStylePropertyIdentifier(current);
9396

97+
if (
98+
arrayName === 'style properties' &&
99+
isEitherShortHand(prevName, currentName)
100+
) {
101+
return;
102+
}
103+
94104
if (!isValidOrder(prevName, currentName)) {
95105
return report(array, arrayName, node, previous, current);
96106
}

‎lib/util/stylesheet.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,16 @@ const astHelpers = {
477477
return [node.object.name, node.property.name].join('.');
478478
}
479479
},
480+
481+
isEitherShortHand: function (property1, property2) {
482+
const shorthands = ['margin', 'padding', 'border', 'flex'];
483+
if (shorthands.includes(property1)) {
484+
return property2.startsWith(property1);
485+
} else if (shorthands.includes(property2)) {
486+
return property1.startsWith(property2);
487+
}
488+
return false;
489+
},
480490
};
481491

482492
module.exports.astHelpers = astHelpers;

‎tests/lib/rules/sort-styles.js

Lines changed: 230 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,52 @@ const tests = {
142142
})
143143
`,
144144
},
145+
{
146+
code: `
147+
const styles = StyleSheet.create({
148+
a: {
149+
margin: 1,
150+
marginLeft: 1,
151+
},
152+
b: {
153+
border: 1,
154+
borderLeft: 1,
155+
},
156+
c: {
157+
padding: 1,
158+
paddingLeft: 1,
159+
},
160+
d: {
161+
flex: 1,
162+
flexGrow: 1,
163+
}
164+
})
165+
`,
166+
options: ['asc'],
167+
},
168+
{
169+
code: `
170+
const styles = StyleSheet.create({
171+
d: {
172+
marginLeft: 1,
173+
margin: 1,
174+
},
175+
c: {
176+
border: 1,
177+
borderLeft: 1,
178+
},
179+
b: {
180+
padding: 1,
181+
paddingLeft: 1,
182+
},
183+
a: {
184+
flex: 1,
185+
flexGrow: 1,
186+
}
187+
})
188+
`,
189+
options: ['desc'],
190+
},
145191
],
146192
invalid: [
147193
{
@@ -165,7 +211,8 @@ const tests = {
165211
`,
166212
errors: [
167213
{
168-
message: "Expected style properties to be in ascending order. 'x' should be before 'y'.",
214+
message:
215+
"Expected style properties to be in ascending order. 'x' should be before 'y'.",
169216
},
170217
],
171218
},
@@ -196,7 +243,8 @@ const tests = {
196243
`,
197244
errors: [
198245
{
199-
message: "Expected class names to be in ascending order. 'a' should be before 'b'.",
246+
message:
247+
"Expected class names to be in ascending order. 'a' should be before 'b'.",
200248
},
201249
],
202250
},
@@ -222,7 +270,8 @@ const tests = {
222270
`,
223271
errors: [
224272
{
225-
message: "Expected class names to be in ascending order. 'c' should be before 'd'.",
273+
message:
274+
"Expected class names to be in ascending order. 'c' should be before 'd'.",
226275
},
227276
],
228277
},
@@ -241,7 +290,8 @@ const tests = {
241290
`,
242291
errors: [
243292
{
244-
message: "Expected class names to be in ascending order. 'a' should be before 'b'.",
293+
message:
294+
"Expected class names to be in ascending order. 'a' should be before 'b'.",
245295
},
246296
],
247297
},
@@ -314,13 +364,16 @@ const tests = {
314364
`,
315365
errors: [
316366
{
317-
message: "Expected style properties to be in ascending order. 'x' should be before 'y'.",
367+
message:
368+
"Expected style properties to be in ascending order. 'x' should be before 'y'.",
318369
},
319370
{
320-
message: "Expected style properties to be in ascending order. 'c' should be before 'd'.",
371+
message:
372+
"Expected style properties to be in ascending order. 'c' should be before 'd'.",
321373
},
322374
{
323-
message: "Expected class names to be in ascending order. 'c' should be before 'd'.",
375+
message:
376+
"Expected class names to be in ascending order. 'c' should be before 'd'.",
324377
},
325378
],
326379
},
@@ -442,6 +495,176 @@ const tests = {
442495
},
443496
],
444497
},
498+
{
499+
code: `
500+
const styles = StyleSheet.create({
501+
a: {
502+
z: 1,
503+
margin: 1,
504+
b: 1,
505+
marginLeft: 1,
506+
a: 1,
507+
},
508+
b: {
509+
z: 1,
510+
b: 1,
511+
border: 1,
512+
borderLeft: 1,
513+
a: 1,
514+
},
515+
c: {
516+
z: 1,
517+
padding: 1,
518+
paddingLeft: 1,
519+
b: 1,
520+
a: 1,
521+
},
522+
d: {
523+
flex: 1,
524+
z: 1,
525+
b: 1,
526+
flexGrow: 1,
527+
a: 1,
528+
}
529+
})
530+
`,
531+
output: `
532+
const styles = StyleSheet.create({
533+
a: {
534+
a: 1,
535+
b: 1,
536+
margin: 1,
537+
marginLeft: 1,
538+
z: 1,
539+
},
540+
b: {
541+
a: 1,
542+
b: 1,
543+
border: 1,
544+
borderLeft: 1,
545+
z: 1,
546+
},
547+
c: {
548+
a: 1,
549+
b: 1,
550+
padding: 1,
551+
paddingLeft: 1,
552+
z: 1,
553+
},
554+
d: {
555+
a: 1,
556+
b: 1,
557+
flex: 1,
558+
flexGrow: 1,
559+
z: 1,
560+
}
561+
})
562+
`,
563+
options: ['asc'],
564+
errors: [
565+
{
566+
message:
567+
"Expected style properties to be in ascending order. 'margin' should be before 'z'.",
568+
},
569+
{
570+
message:
571+
"Expected style properties to be in ascending order. 'b' should be before 'z'.",
572+
},
573+
{
574+
message:
575+
"Expected style properties to be in ascending order. 'padding' should be before 'z'.",
576+
},
577+
{
578+
message:
579+
"Expected style properties to be in ascending order. 'b' should be before 'z'.",
580+
},
581+
],
582+
},
583+
{
584+
code: `
585+
const styles = StyleSheet.create({
586+
d: {
587+
a: 1,
588+
marginLeft: 1,
589+
b: 1,
590+
margin: 1,
591+
z: 1,
592+
},
593+
c: {
594+
a: 1,
595+
b: 1,
596+
border: 1,
597+
borderLeft: 1,
598+
z: 1,
599+
},
600+
b: {
601+
a: 1,
602+
padding: 1,
603+
paddingLeft: 1,
604+
b: 1,
605+
z: 1,
606+
},
607+
a: {
608+
flex: 1,
609+
a: 1,
610+
b: 1,
611+
flexGrow: 1,
612+
z: 1,
613+
}
614+
})
615+
`,
616+
output: `
617+
const styles = StyleSheet.create({
618+
d: {
619+
z: 1,
620+
marginLeft: 1,
621+
margin: 1,
622+
b: 1,
623+
a: 1,
624+
},
625+
c: {
626+
z: 1,
627+
border: 1,
628+
borderLeft: 1,
629+
b: 1,
630+
a: 1,
631+
},
632+
b: {
633+
z: 1,
634+
padding: 1,
635+
paddingLeft: 1,
636+
b: 1,
637+
a: 1,
638+
},
639+
a: {
640+
z: 1,
641+
flex: 1,
642+
flexGrow: 1,
643+
b: 1,
644+
a: 1,
645+
}
646+
})
647+
`,
648+
options: ['desc'],
649+
errors: [
650+
{
651+
message:
652+
"Expected style properties to be in descending order. 'marginLeft' should be before 'a'.",
653+
},
654+
{
655+
message:
656+
"Expected style properties to be in descending order. 'b' should be before 'a'.",
657+
},
658+
{
659+
message:
660+
"Expected style properties to be in descending order. 'padding' should be before 'a'.",
661+
},
662+
{
663+
message:
664+
"Expected style properties to be in descending order. 'b' should be before 'a'.",
665+
},
666+
],
667+
},
445668
],
446669
};
447670

0 commit comments

Comments
 (0)