From 28ff9d3ee1c955462370081de30592e17f0c446d Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 2 Sep 2026 17:47:13 +0500
Subject: [PATCH] chore: update lint rules - css property shorthand fix

---
 web/eslint-plugins/design-tokens/lists.js        | 14 ++++++++++++++
 .../design-tokens/no-category-mismatch.js        | 16 +++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/eslint-plugins/design-tokens/lists.js b/web/eslint-plugins/design-tokens/lists.js
index bc16ccb..c5222e1 100644
--- a/web/eslint-plugins/design-tokens/lists.js
+++ b/web/eslint-plugins/design-tokens/lists.js
@@ -15,6 +15,20 @@ export const COLOR_PROPS =
 export const SIZE_PROPS =
 	/^(width|height|min-width|max-width|min-height|max-height|padding|padding-top|padding-right|padding-bottom|padding-left|margin|margin-top|margin-right|margin-bottom|margin-left|gap|column-gap|row-gap|top|right|bottom|left|inset|font-size|letter-spacing|word-spacing|line-height|border-radius|border-top-left-radius|border-top-right-radius|border-bottom-left-radius|border-bottom-right-radius|border-width|border-top-width|border-right-width|border-bottom-width|border-left-width|flex-basis|background-size|border-spacing)$/;
 
+// =====================================================================
+// SHORTHAND properties that accept BOTH a color and a size. The browser
+// assigns their sub-properties by value type at runtime (length -> width,
+// color -> ...-color), so they cannot be category-checked positionally.
+//      border      -> border-width + border-color
+//      outline     -> outline-width + outline-color
+//      text-decoration -> text-decoration-line/-color/...
+//      column-rule     -> column-rule-width + column-rule-color
+// The longhands they expand to (border-width, border-color, ...) are already
+// covered individually by SIZE_PROPS / COLOR_PROPS.
+// =====================================================================
+export const MIXED_PROPS =
+	/^(border|border-top|border-right|border-bottom|border-left|outline|text-decoration|column-rule)$/;
+
 // =====================================================================
 // Properties that carry a DURATION (ms/s) — transitions/animations.
 // =====================================================================
diff --git a/web/eslint-plugins/design-tokens/no-category-mismatch.js b/web/eslint-plugins/design-tokens/no-category-mismatch.js
index 455df90..e9929d4 100644
--- a/web/eslint-plugins/design-tokens/no-category-mismatch.js
+++ b/web/eslint-plugins/design-tokens/no-category-mismatch.js
@@ -5,7 +5,13 @@
 // (--color-*, --brand-*). Crossing categories (e.g. padding: var(--color-x))
 // is a sign the wrong token is being reused.
 
-import { COLOR_PROPS, COLOR_TOKEN, SIZE_PROPS, SIZE_TOKEN } from "./lists.js";
+import {
+	COLOR_PROPS,
+	COLOR_TOKEN,
+	MIXED_PROPS,
+	SIZE_PROPS,
+	SIZE_TOKEN,
+} from "./lists.js";
 import { getStyleNodeLoc, getStyleRoot } from "./style-context.js";
 
 // Collect the token names referenced by var() in a value.
@@ -50,6 +56,14 @@ export default {
 					const prop = decl.prop ?? "";
 					const value = decl.value ?? "";
 
+					// Mixed shorthands (border, outline, text-decoration,
+					// column-rule) legitimately take BOTH a size and a color.
+					// The browser assigns sub-properties by value type at runtime,
+					// not by position, so skip category checks for them.
+					// Their longhands (border-width, border-color, ...) are still
+					// covered individually.
+					if (MIXED_PROPS.test(prop)) return;
+
 					const isSizeProp = SIZE_PROPS.test(prop);
 					const isColorProp = COLOR_PROPS.test(prop);
 					if (!isSizeProp && !isColorProp) return;