uilint-eslint 0.2.21 → 0.2.23
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/dist/index.js +66 -140
- package/dist/index.js.map +1 -1
- package/dist/rules/consistent-dark-mode.js +62 -136
- package/dist/rules/consistent-dark-mode.js.map +1 -1
- package/dist/rules/enforce-absolute-imports.js.map +1 -1
- package/dist/rules/no-any-in-props.js +1 -1
- package/dist/rules/no-any-in-props.js.map +1 -1
- package/dist/rules/no-prop-drilling-depth.js +3 -16
- package/dist/rules/no-prop-drilling-depth.js.map +1 -1
- package/package.json +2 -2
- package/src/rules/consistent-dark-mode.test.ts +61 -25
- package/src/rules/consistent-dark-mode.ts +86 -160
- package/src/rules/enforce-absolute-imports.ts +3 -2
- package/src/rules/no-any-in-props.ts +5 -2
- package/src/rules/no-prop-drilling-depth.ts +4 -10
package/dist/index.js
CHANGED
|
@@ -379,7 +379,7 @@ warns when a file uses color classes without any dark mode theming.
|
|
|
379
379
|
|
|
380
380
|
- **Prevents broken dark mode**: Catches cases where some colors change in dark mode but others don't
|
|
381
381
|
- **Encourages completeness**: Prompts you to add dark mode support where it's missing
|
|
382
|
-
- **
|
|
382
|
+
- **No false positives**: Only flags explicit Tailwind colors, not custom/CSS variable colors
|
|
383
383
|
|
|
384
384
|
## Examples
|
|
385
385
|
|
|
@@ -401,8 +401,10 @@ warns when a file uses color classes without any dark mode theming.
|
|
|
401
401
|
// All color classes have dark variants
|
|
402
402
|
<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
|
|
403
403
|
|
|
404
|
-
// Using semantic colors (automatically themed)
|
|
404
|
+
// Using semantic/custom colors (automatically themed via CSS variables)
|
|
405
405
|
<div className="bg-background text-foreground">
|
|
406
|
+
<div className="bg-brand text-brand-foreground">
|
|
407
|
+
<div className="bg-primary text-primary-foreground">
|
|
406
408
|
|
|
407
409
|
// Consistent theming
|
|
408
410
|
<button className="bg-blue-500 dark:bg-blue-600 border-gray-300 dark:border-gray-600">
|
|
@@ -419,7 +421,9 @@ warns when a file uses color classes without any dark mode theming.
|
|
|
419
421
|
|
|
420
422
|
## Notes
|
|
421
423
|
|
|
422
|
-
-
|
|
424
|
+
- Only explicit Tailwind colors (like \`blue-500\`, \`white\`, \`slate-900\`) require dark variants
|
|
425
|
+
- Custom/semantic colors (\`background\`, \`foreground\`, \`brand\`, \`primary\`, etc.) are exempt
|
|
426
|
+
- These are assumed to be CSS variables that handle dark mode automatically
|
|
423
427
|
- Transparent, inherit, and current values are exempt
|
|
424
428
|
- Non-color utilities (like \`text-lg\`, \`border-2\`) are correctly ignored
|
|
425
429
|
`
|
|
@@ -450,129 +454,38 @@ var COLOR_PREFIXES = [
|
|
|
450
454
|
"to-"
|
|
451
455
|
];
|
|
452
456
|
var EXEMPT_SUFFIXES = ["transparent", "inherit", "current", "auto", "none"];
|
|
453
|
-
var
|
|
454
|
-
//
|
|
455
|
-
"
|
|
456
|
-
"
|
|
457
|
-
|
|
458
|
-
"
|
|
459
|
-
"
|
|
460
|
-
|
|
461
|
-
"
|
|
462
|
-
"
|
|
463
|
-
|
|
464
|
-
"
|
|
465
|
-
"
|
|
466
|
-
"
|
|
467
|
-
"
|
|
468
|
-
|
|
469
|
-
"
|
|
470
|
-
"
|
|
471
|
-
"
|
|
472
|
-
"
|
|
473
|
-
|
|
474
|
-
"
|
|
475
|
-
"
|
|
476
|
-
"
|
|
477
|
-
"
|
|
478
|
-
|
|
479
|
-
"
|
|
480
|
-
"
|
|
481
|
-
"
|
|
482
|
-
"
|
|
483
|
-
"
|
|
484
|
-
"ellipsis",
|
|
485
|
-
"clip",
|
|
486
|
-
// border- utilities that aren't colors
|
|
487
|
-
"0",
|
|
488
|
-
"2",
|
|
489
|
-
"4",
|
|
490
|
-
"8",
|
|
491
|
-
"solid",
|
|
492
|
-
"dashed",
|
|
493
|
-
"dotted",
|
|
494
|
-
"double",
|
|
495
|
-
"hidden",
|
|
496
|
-
"collapse",
|
|
497
|
-
"separate",
|
|
498
|
-
// shadow- utilities that aren't colors
|
|
499
|
-
// Note: "sm", "lg", "xl", "2xl" already included above
|
|
500
|
-
"md",
|
|
501
|
-
"inner",
|
|
502
|
-
// ring- utilities that aren't colors
|
|
503
|
-
// Note: "0", "2", "4", "8" already included above
|
|
504
|
-
"1",
|
|
505
|
-
"inset",
|
|
506
|
-
// outline- utilities that aren't colors
|
|
507
|
-
// Note: numeric values already included
|
|
508
|
-
"offset-0",
|
|
509
|
-
"offset-1",
|
|
510
|
-
"offset-2",
|
|
511
|
-
"offset-4",
|
|
512
|
-
"offset-8",
|
|
513
|
-
// decoration- utilities that aren't colors
|
|
514
|
-
// Note: "solid", "double", "dotted", "dashed" already included
|
|
515
|
-
"wavy",
|
|
516
|
-
"from-font",
|
|
517
|
-
"clone",
|
|
518
|
-
"slice",
|
|
519
|
-
// divide- utilities that aren't colors
|
|
520
|
-
"x",
|
|
521
|
-
"y",
|
|
522
|
-
"x-0",
|
|
523
|
-
"x-2",
|
|
524
|
-
"x-4",
|
|
525
|
-
"x-8",
|
|
526
|
-
"y-0",
|
|
527
|
-
"y-2",
|
|
528
|
-
"y-4",
|
|
529
|
-
"y-8",
|
|
530
|
-
"x-reverse",
|
|
531
|
-
"y-reverse",
|
|
532
|
-
// gradient direction utilities (from-, via-, to- prefixes)
|
|
533
|
-
"t",
|
|
534
|
-
"tr",
|
|
535
|
-
"r",
|
|
536
|
-
"br",
|
|
537
|
-
"b",
|
|
538
|
-
"bl",
|
|
539
|
-
"l",
|
|
540
|
-
"tl"
|
|
457
|
+
var TAILWIND_COLOR_NAMES = /* @__PURE__ */ new Set([
|
|
458
|
+
// Special colors
|
|
459
|
+
"white",
|
|
460
|
+
"black",
|
|
461
|
+
// Gray scale palettes
|
|
462
|
+
"slate",
|
|
463
|
+
"gray",
|
|
464
|
+
"zinc",
|
|
465
|
+
"neutral",
|
|
466
|
+
"stone",
|
|
467
|
+
// Warm colors
|
|
468
|
+
"red",
|
|
469
|
+
"orange",
|
|
470
|
+
"amber",
|
|
471
|
+
"yellow",
|
|
472
|
+
// Green colors
|
|
473
|
+
"lime",
|
|
474
|
+
"green",
|
|
475
|
+
"emerald",
|
|
476
|
+
"teal",
|
|
477
|
+
// Blue colors
|
|
478
|
+
"cyan",
|
|
479
|
+
"sky",
|
|
480
|
+
"blue",
|
|
481
|
+
"indigo",
|
|
482
|
+
// Purple/Pink colors
|
|
483
|
+
"violet",
|
|
484
|
+
"purple",
|
|
485
|
+
"fuchsia",
|
|
486
|
+
"pink",
|
|
487
|
+
"rose"
|
|
541
488
|
]);
|
|
542
|
-
var SEMANTIC_COLOR_NAMES = /* @__PURE__ */ new Set([
|
|
543
|
-
// Core shadcn colors
|
|
544
|
-
"background",
|
|
545
|
-
"foreground",
|
|
546
|
-
// Component colors
|
|
547
|
-
"card",
|
|
548
|
-
"card-foreground",
|
|
549
|
-
"popover",
|
|
550
|
-
"popover-foreground",
|
|
551
|
-
"primary",
|
|
552
|
-
"primary-foreground",
|
|
553
|
-
"secondary",
|
|
554
|
-
"secondary-foreground",
|
|
555
|
-
"muted",
|
|
556
|
-
"muted-foreground",
|
|
557
|
-
"accent",
|
|
558
|
-
"accent-foreground",
|
|
559
|
-
"destructive",
|
|
560
|
-
"destructive-foreground",
|
|
561
|
-
// Form/UI colors
|
|
562
|
-
"border",
|
|
563
|
-
"input",
|
|
564
|
-
"ring",
|
|
565
|
-
// Sidebar colors (shadcn sidebar component)
|
|
566
|
-
"sidebar",
|
|
567
|
-
"sidebar-foreground",
|
|
568
|
-
"sidebar-border",
|
|
569
|
-
"sidebar-primary",
|
|
570
|
-
"sidebar-primary-foreground",
|
|
571
|
-
"sidebar-accent",
|
|
572
|
-
"sidebar-accent-foreground",
|
|
573
|
-
"sidebar-ring"
|
|
574
|
-
]);
|
|
575
|
-
var CHART_COLOR_PATTERN = /^chart-\d+$/;
|
|
576
489
|
function hasDarkVariant(className) {
|
|
577
490
|
const parts = className.split(":");
|
|
578
491
|
const variants = parts.slice(0, -1);
|
|
@@ -588,12 +501,31 @@ function getColorPrefix(baseClass) {
|
|
|
588
501
|
);
|
|
589
502
|
return sortedPrefixes.find((p) => baseClass.startsWith(p)) || null;
|
|
590
503
|
}
|
|
591
|
-
function
|
|
592
|
-
|
|
504
|
+
function isTailwindColor(value) {
|
|
505
|
+
const valueWithoutOpacity = value.split("/")[0] || value;
|
|
506
|
+
if (TAILWIND_COLOR_NAMES.has(valueWithoutOpacity)) {
|
|
593
507
|
return true;
|
|
594
508
|
}
|
|
595
|
-
|
|
596
|
-
|
|
509
|
+
const match = valueWithoutOpacity.match(/^([a-z]+)-(\d+)$/);
|
|
510
|
+
if (match) {
|
|
511
|
+
const colorName = match[1];
|
|
512
|
+
const scale = match[2];
|
|
513
|
+
const validScales = [
|
|
514
|
+
"50",
|
|
515
|
+
"100",
|
|
516
|
+
"200",
|
|
517
|
+
"300",
|
|
518
|
+
"400",
|
|
519
|
+
"500",
|
|
520
|
+
"600",
|
|
521
|
+
"700",
|
|
522
|
+
"800",
|
|
523
|
+
"900",
|
|
524
|
+
"950"
|
|
525
|
+
];
|
|
526
|
+
if (colorName && TAILWIND_COLOR_NAMES.has(colorName) && validScales.includes(scale || "")) {
|
|
527
|
+
return true;
|
|
528
|
+
}
|
|
597
529
|
}
|
|
598
530
|
return false;
|
|
599
531
|
}
|
|
@@ -602,13 +534,7 @@ function isColorValue(baseClass, prefix) {
|
|
|
602
534
|
if (!value) {
|
|
603
535
|
return false;
|
|
604
536
|
}
|
|
605
|
-
|
|
606
|
-
return false;
|
|
607
|
-
}
|
|
608
|
-
if (NON_COLOR_UTILITIES.has(value)) {
|
|
609
|
-
return false;
|
|
610
|
-
}
|
|
611
|
-
return true;
|
|
537
|
+
return isTailwindColor(value);
|
|
612
538
|
}
|
|
613
539
|
function isExempt(baseClass) {
|
|
614
540
|
return EXEMPT_SUFFIXES.some((suffix) => baseClass.endsWith(suffix));
|
|
@@ -2921,7 +2847,7 @@ function containsAnyType(node, allowInGenericDefaults) {
|
|
|
2921
2847
|
}
|
|
2922
2848
|
}
|
|
2923
2849
|
for (const param of node.params) {
|
|
2924
|
-
if (param.
|
|
2850
|
+
if (param.type !== "RestElement" && param.type !== "TSParameterProperty" && "typeAnnotation" in param && param.typeAnnotation?.typeAnnotation) {
|
|
2925
2851
|
const result = containsAnyType(
|
|
2926
2852
|
param.typeAnnotation.typeAnnotation,
|
|
2927
2853
|
allowInGenericDefaults
|
|
@@ -3367,9 +3293,9 @@ var meta12 = defineRuleMeta({
|
|
|
3367
3293
|
{
|
|
3368
3294
|
key: "ignoredProps",
|
|
3369
3295
|
label: "Ignored props",
|
|
3370
|
-
type: "
|
|
3371
|
-
defaultValue:
|
|
3372
|
-
description: "
|
|
3296
|
+
type: "text",
|
|
3297
|
+
defaultValue: "className, style, children, key, ref, id",
|
|
3298
|
+
description: "Comma-separated prop names to ignore (common pass-through props)"
|
|
3373
3299
|
}
|
|
3374
3300
|
]
|
|
3375
3301
|
},
|