@tenphi/eslint-plugin-tasty 1.5.1 → 1.6.0

package/dist/rules/consistent-token-usage.js

@@ -1,8 +1,10 @@
 import { createRule } from "../create-rule.js";
-import { LOGICAL_BORDER_STYLES } from "../constants.js";
-import { getKeyName, getStringValue } from "../utils.js";
-import { TastyContext, styleObjectListeners } from "../context.js";
-import { replaceInStringValue, replaceStringValue } from "../fix-utils.js";
+import { LOGICAL_BORDER_STYLES, LOGICAL_STYLES } from "../constants.js";
+import { getStringValue } from "../utils.js";
+import { TastyContext } from "../context.js";
+import { styleValueListeners } from "../style-values.js";
+import { scanValueWords } from "../value-words.js";
+import { replaceInStringValue } from "../fix-utils.js";
 
 //#region src/rules/consistent-token-usage.ts
 /**
@@ -15,6 +17,49 @@ import { replaceInStringValue, replaceStringValue } from "../fix-utils.js";
 * happened to use.
 */
 const BORDER_WIDTH_PROPERTIES = new Set(["border", ...LOGICAL_BORDER_STYLES]);
+/** Enhanced handlers that convert numeric inputs to pixels. Unitless CSS stays out. */
+const NUMERIC_PIXEL_PROPERTIES = new Set([
+	...LOGICAL_STYLES,
+	"gap",
+	"radius",
+	"outlineOffset",
+	"width",
+	"minWidth",
+	"maxWidth",
+	"height",
+	"minHeight",
+	"maxHeight",
+	"padding",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"inset",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"border",
+	"borderTop",
+	"borderRight",
+	"borderBottom",
+	"borderLeft",
+	"scrollPadding",
+	"scrollPaddingTop",
+	"scrollPaddingRight",
+	"scrollPaddingBottom",
+	"scrollPaddingLeft",
+	"scrollMargin",
+	"scrollMarginTop",
+	"scrollMarginRight",
+	"scrollMarginBottom",
+	"scrollMarginLeft"
+]);
 const PX_TO_UNIT = {
 	"8px": "1x",
 	"16px": "2x",
@@ -32,7 +77,8 @@ var consistent_token_usage_default = createRule({
 		hasSuggestions: true,
 		docs: { description: "Suggest using design tokens and custom units instead of raw CSS values" },
 		messages: {
-			preferToken: "Consider using '{{suggestion}}' instead of '{{raw}}'.",
+			rawPixelValue: "Use a design token or custom unit instead of raw pixel value '{{raw}}'. For an intentional pixel value, explicitly disable tasty/consistent-token-usage on this line with a reason.",
+			preferToken: "Consider using '{{suggestion}}' instead of '{{raw}}'. For an intentional pixel value, explicitly disable tasty/consistent-token-usage on this line with a reason.",
 			replaceWithToken: "Replace '{{raw}}' with '{{suggestion}}'"
 		},
 		schema: []
@@ -41,104 +87,59 @@ var consistent_token_usage_default = createRule({
 	create(context) {
 		const ctx = new TastyContext(context);
 		function checkValue(property, value, node) {
-			const trimmed = value.trim();
-			if (trimmed in PX_TO_UNIT) {
-				const suggestion = PX_TO_UNIT[trimmed];
-				context.report({
-					node,
-					messageId: "preferToken",
-					data: {
-						suggestion,
-						raw: trimmed
-					},
-					suggest: [{
-						messageId: "replaceWithToken",
-						data: {
-							raw: trimmed,
-							suggestion
-						},
-						fix(fixer) {
-							return replaceStringValue(fixer, node, suggestion);
-						}
-					}]
+			if (/^[#$]/.test(property)) return;
+			const pixels = /* @__PURE__ */ new Map();
+			for (const word of scanValueWords(value)) {
+				if (!/^[+-]?(?:\d*\.\d+|\d+\.?\d*)(?:e[+-]?\d+)?px$/i.test(word.value)) continue;
+				const amount = Number(word.value.slice(0, -2));
+				if (amount === 0) continue;
+				const raw = word.value;
+				const canonical = `${amount}px`;
+				const suggestion = property === "radius" && amount === 6 ? "1r" : BORDER_WIDTH_PROPERTIES.has(property) && amount === 1 ? "1bw" : PX_TO_UNIT[canonical];
+				const edits = pixels.get(raw) ?? [];
+				edits.push({
+					start: word.offset,
+					end: word.offset + raw.length,
+					replacement: suggestion ?? ""
 				});
-				return;
+				pixels.set(raw, edits);
 			}
-			if (property === "radius" && trimmed === "6px") {
-				context.report({
-					node,
-					messageId: "preferToken",
-					data: {
-						suggestion: "1r",
-						raw: "6px"
-					},
-					suggest: [{
-						messageId: "replaceWithToken",
-						data: {
-							raw: "6px",
-							suggestion: "1r"
-						},
-						fix(fixer) {
-							return replaceStringValue(fixer, node, "1r");
-						}
-					}]
-				});
-				return;
-			}
-			if (BORDER_WIDTH_PROPERTIES.has(property) && trimmed.includes("1px")) {
-				const edits = [];
-				const re = /\b1px\b/g;
-				let match;
-				while ((match = re.exec(value)) !== null) edits.push({
-					start: match.index,
-					end: match.index + match[0].length,
-					replacement: "1bw"
-				});
-				if (edits.length === 0) return;
+			for (const [raw, edits] of pixels) {
+				const suggestion = edits[0].replacement;
+				if (!suggestion) {
+					context.report({
+						node,
+						messageId: "rawPixelValue",
+						data: { raw }
+					});
+					continue;
+				}
 				context.report({
 					node,
 					messageId: "preferToken",
 					data: {
-						suggestion: "1bw",
-						raw: "1px"
+						suggestion,
+						raw
 					},
 					suggest: [{
 						messageId: "replaceWithToken",
 						data: {
-							raw: "1px",
-							suggestion: "1bw"
+							raw,
+							suggestion
 						},
-						fix(fixer) {
-							return replaceInStringValue(fixer, node, edits, context.sourceCode);
-						}
+						fix: (fixer) => getStringValue(node) === null ? fixer.replaceText(node, `'${suggestion}'`) : replaceInStringValue(fixer, node, edits, context.sourceCode)
 					}]
 				});
 			}
 		}
-		function handleStyleObject(node) {
-			if (!ctx.isStyleObject(node)) return;
-			for (const prop of node.properties) {
-				if (prop.type !== "Property" || prop.computed) continue;
-				const key = getKeyName(prop.key);
-				if (key === null) continue;
-				const str = getStringValue(prop.value);
-				if (str) {
-					checkValue(key, str, prop.value);
-					continue;
-				}
-				if (prop.value.type === "ObjectExpression" && ctx.isStateMap(prop.value, prop)) for (const stateProp of prop.value.properties) {
-					if (stateProp.type !== "Property") continue;
-					const stateStr = getStringValue(stateProp.value);
-					if (stateStr) checkValue(key, stateStr, stateProp.value);
-				}
+		return styleValueListeners(ctx, (property, node) => {
+			const value = getStringValue(node);
+			if (value !== null) checkValue(property, value, node);
+			else if (NUMERIC_PIXEL_PROPERTIES.has(property)) {
+				if (node.type === "Literal" && typeof node.value === "number") checkValue(property, `${node.value}px`, node);
+				else if (node.type === "UnaryExpression" && (node.operator === "-" || node.operator === "+") && node.argument.type === "Literal" && typeof node.argument.value === "number") checkValue(property, `${node.operator === "-" ? -node.argument.value : node.argument.value}px`, node);
 			}
-		}
-		return {
-			ImportDeclaration(node) {
-				ctx.trackImport(node);
-			},
-			...styleObjectListeners(handleStyleObject)
-		};
+		});
 	}
 });
 

package/dist/rules/consistent-token-usage.js.map

@@ -1 +1 @@
-{"version":3,"file":"consistent-token-usage.js","names":[],"sources":["../../src/rules/consistent-token-usage.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getKeyName, getStringValue } from '../utils.js';\nimport { LOGICAL_BORDER_STYLES } from '../constants.js';\nimport { replaceStringValue, replaceInStringValue } from '../fix-utils.js';\n\ntype MessageIds = 'preferToken' | 'replaceWithToken';\n\n/**\n * Properties whose value carries a border width, so a `1px` in one is the\n * `1bw` token spelled out.\n *\n * The logical axes belong here for the same reason `border` does: they take the\n * same width/style/colour value, parsed by the same `parseBorderValue`. Leaving\n * them out would make the advice depend on which axis vocabulary the author\n * happened to use.\n */\nconst BORDER_WIDTH_PROPERTIES = new Set<string>([\n  'border',\n  ...LOGICAL_BORDER_STYLES,\n]);\n\nconst PX_TO_UNIT: Record<string, string> = {\n  '8px': '1x',\n  '16px': '2x',\n  '24px': '3x',\n  '32px': '4x',\n  '40px': '5x',\n  '48px': '6x',\n  '56px': '7x',\n  '64px': '8x',\n};\n\nexport default createRule<[], MessageIds>({\n  name: 'consistent-token-usage',\n  meta: {\n    type: 'suggestion',\n    hasSuggestions: true,\n    docs: {\n      description:\n        'Suggest using design tokens and custom units instead of raw CSS values',\n    },\n    messages: {\n      preferToken: \"Consider using '{{suggestion}}' instead of '{{raw}}'.\",\n      replaceWithToken: \"Replace '{{raw}}' with '{{suggestion}}'\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function checkValue(\n      property: string,\n      value: string,\n      node: TSESTree.Node,\n    ): void {\n      const trimmed = value.trim();\n\n      // Check pixel values that map to gap multiples\n      if (trimmed in PX_TO_UNIT) {\n        const suggestion = PX_TO_UNIT[trimmed];\n        context.report({\n          node,\n          messageId: 'preferToken',\n          data: { suggestion, raw: trimmed },\n          suggest: [\n            {\n              messageId: 'replaceWithToken',\n              data: { raw: trimmed, suggestion },\n              fix(fixer) {\n                return replaceStringValue(fixer, node, suggestion);\n              },\n            },\n          ],\n        });\n        return;\n      }\n\n      // Check 6px in radius context\n      if (property === 'radius' && trimmed === '6px') {\n        context.report({\n          node,\n          messageId: 'preferToken',\n          data: { suggestion: '1r', raw: '6px' },\n          suggest: [\n            {\n              messageId: 'replaceWithToken',\n              data: { raw: '6px', suggestion: '1r' },\n              fix(fixer) {\n                return replaceStringValue(fixer, node, '1r');\n              },\n            },\n          ],\n        });\n        return;\n      }\n\n      // Check 1px in border context\n      if (BORDER_WIDTH_PROPERTIES.has(property) && trimmed.includes('1px')) {\n        const edits: { start: number; end: number; replacement: string }[] = [];\n        const re = /\\b1px\\b/g;\n        let match: RegExpExecArray | null;\n        while ((match = re.exec(value)) !== null) {\n          edits.push({\n            start: match.index,\n            end: match.index + match[0].length,\n            replacement: '1bw',\n          });\n        }\n        if (edits.length === 0) return;\n        context.report({\n          node,\n          messageId: 'preferToken',\n          data: { suggestion: '1bw', raw: '1px' },\n          suggest: [\n            {\n              messageId: 'replaceWithToken',\n              data: { raw: '1px', suggestion: '1bw' },\n              fix(fixer) {\n                return replaceInStringValue(\n                  fixer,\n                  node,\n                  edits,\n                  context.sourceCode,\n                );\n              },\n            },\n          ],\n        });\n      }\n    }\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (!ctx.isStyleObject(node)) return;\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property' || prop.computed) continue;\n\n        const key = getKeyName(prop.key);\n        if (key === null) continue;\n\n        const str = getStringValue(prop.value);\n        if (str) {\n          checkValue(key, str, prop.value);\n          continue;\n        }\n\n        // Only recurse into genuine state maps. Sub-element objects\n        // (`Icon: { … }`) are style objects in their own right and are visited\n        // separately by the listener, so treating them as state maps here both\n        // double-reports and attributes the value to the wrong property.\n        if (\n          prop.value.type === 'ObjectExpression' &&\n          ctx.isStateMap(prop.value, prop)\n        ) {\n          for (const stateProp of prop.value.properties) {\n            if (stateProp.type !== 'Property') continue;\n            const stateStr = getStringValue(stateProp.value);\n            if (stateStr) {\n              checkValue(key, stateStr, stateProp.value);\n            }\n          }\n        }\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,0BAA0B,IAAI,IAAY,CAC9C,UACA,GAAG,sBACJ,CAAC;AAEF,MAAM,aAAqC;CACzC,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACT;AAED,qCAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM,EACJ,aACE,0EACH;EACD,UAAU;GACR,aAAa;GACb,kBAAkB;GACnB;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,WACP,UACA,OACA,MACM;GACN,MAAM,UAAU,MAAM,MAAM;AAG5B,OAAI,WAAW,YAAY;IACzB,MAAM,aAAa,WAAW;AAC9B,YAAQ,OAAO;KACb;KACA,WAAW;KACX,MAAM;MAAE;MAAY,KAAK;MAAS;KAClC,SAAS,CACP;MACE,WAAW;MACX,MAAM;OAAE,KAAK;OAAS;OAAY;MAClC,IAAI,OAAO;AACT,cAAO,mBAAmB,OAAO,MAAM,WAAW;;MAErD,CACF;KACF,CAAC;AACF;;AAIF,OAAI,aAAa,YAAY,YAAY,OAAO;AAC9C,YAAQ,OAAO;KACb;KACA,WAAW;KACX,MAAM;MAAE,YAAY;MAAM,KAAK;MAAO;KACtC,SAAS,CACP;MACE,WAAW;MACX,MAAM;OAAE,KAAK;OAAO,YAAY;OAAM;MACtC,IAAI,OAAO;AACT,cAAO,mBAAmB,OAAO,MAAM,KAAK;;MAE/C,CACF;KACF,CAAC;AACF;;AAIF,OAAI,wBAAwB,IAAI,SAAS,IAAI,QAAQ,SAAS,MAAM,EAAE;IACpE,MAAM,QAA+D,EAAE;IACvE,MAAM,KAAK;IACX,IAAI;AACJ,YAAQ,QAAQ,GAAG,KAAK,MAAM,MAAM,KAClC,OAAM,KAAK;KACT,OAAO,MAAM;KACb,KAAK,MAAM,QAAQ,MAAM,GAAG;KAC5B,aAAa;KACd,CAAC;AAEJ,QAAI,MAAM,WAAW,EAAG;AACxB,YAAQ,OAAO;KACb;KACA,WAAW;KACX,MAAM;MAAE,YAAY;MAAO,KAAK;MAAO;KACvC,SAAS,CACP;MACE,WAAW;MACX,MAAM;OAAE,KAAK;OAAO,YAAY;OAAO;MACvC,IAAI,OAAO;AACT,cAAO,qBACL,OACA,MACA,OACA,QAAQ,WACT;;MAEJ,CACF;KACF,CAAC;;;EAIN,SAAS,kBAAkB,MAAiC;AAC1D,OAAI,CAAC,IAAI,cAAc,KAAK,CAAE;AAE9B,QAAK,MAAM,QAAQ,KAAK,YAAY;AAClC,QAAI,KAAK,SAAS,cAAc,KAAK,SAAU;IAE/C,MAAM,MAAM,WAAW,KAAK,IAAI;AAChC,QAAI,QAAQ,KAAM;IAElB,MAAM,MAAM,eAAe,KAAK,MAAM;AACtC,QAAI,KAAK;AACP,gBAAW,KAAK,KAAK,KAAK,MAAM;AAChC;;AAOF,QACE,KAAK,MAAM,SAAS,sBACpB,IAAI,WAAW,KAAK,OAAO,KAAK,CAEhC,MAAK,MAAM,aAAa,KAAK,MAAM,YAAY;AAC7C,SAAI,UAAU,SAAS,WAAY;KACnC,MAAM,WAAW,eAAe,UAAU,MAAM;AAChD,SAAI,SACF,YAAW,KAAK,UAAU,UAAU,MAAM;;;;AAOpD,SAAO;GACL,kBAAkB,MAAM;AACtB,QAAI,YAAY,KAAK;;GAEvB,GAAG,qBAAqB,kBAAkB;GAC3C;;CAEJ,CAAC"}
+{"version":3,"file":"consistent-token-usage.js","names":[],"sources":["../../src/rules/consistent-token-usage.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext } from '../context.js';\nimport { styleValueListeners } from '../style-values.js';\nimport { LOGICAL_BORDER_STYLES, LOGICAL_STYLES } from '../constants.js';\nimport { getStringValue } from '../utils.js';\nimport { replaceInStringValue } from '../fix-utils.js';\nimport { scanValueWords } from '../value-words.js';\n\ntype MessageIds = 'preferToken' | 'rawPixelValue' | 'replaceWithToken';\n\n/**\n * Properties whose value carries a border width, so a `1px` in one is the\n * `1bw` token spelled out.\n *\n * The logical axes belong here for the same reason `border` does: they take the\n * same width/style/colour value, parsed by the same `parseBorderValue`. Leaving\n * them out would make the advice depend on which axis vocabulary the author\n * happened to use.\n */\nconst BORDER_WIDTH_PROPERTIES = new Set<string>([\n  'border',\n  ...LOGICAL_BORDER_STYLES,\n]);\n\n/** Enhanced handlers that convert numeric inputs to pixels. Unitless CSS stays out. */\nconst NUMERIC_PIXEL_PROPERTIES = new Set<string>([\n  ...LOGICAL_STYLES,\n  'gap',\n  'radius',\n  'outlineOffset',\n  'width',\n  'minWidth',\n  'maxWidth',\n  'height',\n  'minHeight',\n  'maxHeight',\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'inset',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'border',\n  'borderTop',\n  'borderRight',\n  'borderBottom',\n  'borderLeft',\n  'scrollPadding',\n  'scrollPaddingTop',\n  'scrollPaddingRight',\n  'scrollPaddingBottom',\n  'scrollPaddingLeft',\n  'scrollMargin',\n  'scrollMarginTop',\n  'scrollMarginRight',\n  'scrollMarginBottom',\n  'scrollMarginLeft',\n]);\n\nconst PX_TO_UNIT: Record<string, string> = {\n  '8px': '1x',\n  '16px': '2x',\n  '24px': '3x',\n  '32px': '4x',\n  '40px': '5x',\n  '48px': '6x',\n  '56px': '7x',\n  '64px': '8x',\n};\n\nexport default createRule<[], MessageIds>({\n  name: 'consistent-token-usage',\n  meta: {\n    type: 'suggestion',\n    hasSuggestions: true,\n    docs: {\n      description:\n        'Suggest using design tokens and custom units instead of raw CSS values',\n    },\n    messages: {\n      rawPixelValue:\n        \"Use a design token or custom unit instead of raw pixel value '{{raw}}'. For an intentional pixel value, explicitly disable tasty/consistent-token-usage on this line with a reason.\",\n      preferToken:\n        \"Consider using '{{suggestion}}' instead of '{{raw}}'. For an intentional pixel value, explicitly disable tasty/consistent-token-usage on this line with a reason.\",\n      replaceWithToken: \"Replace '{{raw}}' with '{{suggestion}}'\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function checkValue(\n      property: string,\n      value: string,\n      node: TSESTree.Node,\n    ): void {\n      // Definitions establish the scale itself; quoted text and URLs are opaque.\n      if (/^[#$]/.test(property)) return;\n      const pixels = new Map<\n        string,\n        { start: number; end: number; replacement: string }[]\n      >();\n      for (const word of scanValueWords(value)) {\n        if (!/^[+-]?(?:\\d*\\.\\d+|\\d+\\.?\\d*)(?:e[+-]?\\d+)?px$/i.test(word.value))\n          continue;\n        const amount = Number(word.value.slice(0, -2));\n        if (amount === 0) continue;\n        const raw = word.value;\n        const canonical = `${amount}px`;\n        const suggestion =\n          property === 'radius' && amount === 6\n            ? '1r'\n            : BORDER_WIDTH_PROPERTIES.has(property) && amount === 1\n              ? '1bw'\n              : PX_TO_UNIT[canonical];\n        const edits = pixels.get(raw) ?? [];\n        edits.push({\n          start: word.offset,\n          end: word.offset + raw.length,\n          replacement: suggestion ?? '',\n        });\n        pixels.set(raw, edits);\n      }\n      for (const [raw, edits] of pixels) {\n        const suggestion = edits[0].replacement;\n        if (!suggestion) {\n          context.report({ node, messageId: 'rawPixelValue', data: { raw } });\n          continue;\n        }\n        context.report({\n          node,\n          messageId: 'preferToken',\n          data: { suggestion, raw },\n          suggest: [\n            {\n              messageId: 'replaceWithToken',\n              data: { raw, suggestion },\n              fix: (fixer) =>\n                getStringValue(node) === null\n                  ? fixer.replaceText(node, `'${suggestion}'`)\n                  : replaceInStringValue(\n                      fixer,\n                      node,\n                      edits,\n                      context.sourceCode,\n                    ),\n            },\n          ],\n        });\n      }\n    }\n\n    return styleValueListeners(ctx, (property, node) => {\n      const value = getStringValue(node);\n      if (value !== null) {\n        checkValue(property, value, node);\n      } else if (NUMERIC_PIXEL_PROPERTIES.has(property)) {\n        if (node.type === 'Literal' && typeof node.value === 'number') {\n          checkValue(property, `${node.value}px`, node);\n        } else if (\n          node.type === 'UnaryExpression' &&\n          (node.operator === '-' || node.operator === '+') &&\n          node.argument.type === 'Literal' &&\n          typeof node.argument.value === 'number'\n        ) {\n          const amount =\n            node.operator === '-' ? -node.argument.value : node.argument.value;\n          checkValue(property, `${amount}px`, node);\n        }\n      }\n    });\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0B,IAAI,IAAY,CAC9C,UACA,GAAG,sBACJ,CAAC;;AAGF,MAAM,2BAA2B,IAAI,IAAY;CAC/C,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,MAAM,aAAqC;CACzC,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACT;AAED,qCAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM,EACJ,aACE,0EACH;EACD,UAAU;GACR,eACE;GACF,aACE;GACF,kBAAkB;GACnB;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,WACP,UACA,OACA,MACM;AAEN,OAAI,QAAQ,KAAK,SAAS,CAAE;GAC5B,MAAM,yBAAS,IAAI,KAGhB;AACH,QAAK,MAAM,QAAQ,eAAe,MAAM,EAAE;AACxC,QAAI,CAAC,iDAAiD,KAAK,KAAK,MAAM,CACpE;IACF,MAAM,SAAS,OAAO,KAAK,MAAM,MAAM,GAAG,GAAG,CAAC;AAC9C,QAAI,WAAW,EAAG;IAClB,MAAM,MAAM,KAAK;IACjB,MAAM,YAAY,GAAG,OAAO;IAC5B,MAAM,aACJ,aAAa,YAAY,WAAW,IAChC,OACA,wBAAwB,IAAI,SAAS,IAAI,WAAW,IAClD,QACA,WAAW;IACnB,MAAM,QAAQ,OAAO,IAAI,IAAI,IAAI,EAAE;AACnC,UAAM,KAAK;KACT,OAAO,KAAK;KACZ,KAAK,KAAK,SAAS,IAAI;KACvB,aAAa,cAAc;KAC5B,CAAC;AACF,WAAO,IAAI,KAAK,MAAM;;AAExB,QAAK,MAAM,CAAC,KAAK,UAAU,QAAQ;IACjC,MAAM,aAAa,MAAM,GAAG;AAC5B,QAAI,CAAC,YAAY;AACf,aAAQ,OAAO;MAAE;MAAM,WAAW;MAAiB,MAAM,EAAE,KAAK;MAAE,CAAC;AACnE;;AAEF,YAAQ,OAAO;KACb;KACA,WAAW;KACX,MAAM;MAAE;MAAY;MAAK;KACzB,SAAS,CACP;MACE,WAAW;MACX,MAAM;OAAE;OAAK;OAAY;MACzB,MAAM,UACJ,eAAe,KAAK,KAAK,OACrB,MAAM,YAAY,MAAM,IAAI,WAAW,GAAG,GAC1C,qBACE,OACA,MACA,OACA,QAAQ,WACT;MACR,CACF;KACF,CAAC;;;AAIN,SAAO,oBAAoB,MAAM,UAAU,SAAS;GAClD,MAAM,QAAQ,eAAe,KAAK;AAClC,OAAI,UAAU,KACZ,YAAW,UAAU,OAAO,KAAK;YACxB,yBAAyB,IAAI,SAAS,EAC/C;QAAI,KAAK,SAAS,aAAa,OAAO,KAAK,UAAU,SACnD,YAAW,UAAU,GAAG,KAAK,MAAM,KAAK,KAAK;aAE7C,KAAK,SAAS,sBACb,KAAK,aAAa,OAAO,KAAK,aAAa,QAC5C,KAAK,SAAS,SAAS,aACvB,OAAO,KAAK,SAAS,UAAU,SAI/B,YAAW,UAAU,GADnB,KAAK,aAAa,MAAM,CAAC,KAAK,SAAS,QAAQ,KAAK,SAAS,MAChC,KAAK,KAAK;;IAG7C;;CAEL,CAAC"}

package/dist/rules/no-classname-prop.js

@@ -0,0 +1,27 @@
+import { createRule } from "../create-rule.js";
+import { TastyContext } from "../context.js";
+import { tastyComponentPropListeners } from "./tasty-component-props.js";
+
+//#region src/rules/no-classname-prop.ts
+var no_classname_prop_default = createRule({
+	name: "no-classname-prop",
+	meta: {
+		type: "suggestion",
+		docs: { description: "Prefer Tasty styling and data-element identities over className" },
+		messages: { noClassNameProp: "Avoid the 'className' prop on Tasty components. Keep styling in Tasty; for sub-element styling, use data-element=\"Name\" and define the matching capitalized sub-element in the parent's styles. If a third-party library requires classes, explicitly disable tasty/no-classname-prop for this usage with an ESLint comment and a reason." },
+		schema: []
+	},
+	defaultOptions: [],
+	create(context) {
+		return tastyComponentPropListeners(new TastyContext(context), (name, node) => {
+			if (name === "className") context.report({
+				node,
+				messageId: "noClassNameProp"
+			});
+		});
+	}
+});
+
+//#endregion
+export { no_classname_prop_default as default };
+//# sourceMappingURL=no-classname-prop.js.map

package/dist/rules/no-classname-prop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-classname-prop.js","names":[],"sources":["../../src/rules/no-classname-prop.ts"],"sourcesContent":["import { createRule } from '../create-rule.js';\nimport { TastyContext } from '../context.js';\nimport { tastyComponentPropListeners } from './tasty-component-props.js';\n\nexport default createRule<[], 'noClassNameProp'>({\n  name: 'no-classname-prop',\n  meta: {\n    type: 'suggestion',\n    docs: {\n      description:\n        'Prefer Tasty styling and data-element identities over className',\n    },\n    messages: {\n      noClassNameProp:\n        \"Avoid the 'className' prop on Tasty components. Keep styling in Tasty; for sub-element styling, use data-element=\\\"Name\\\" and define the matching capitalized sub-element in the parent's styles. If a third-party library requires classes, explicitly disable tasty/no-classname-prop for this usage with an ESLint comment and a reason.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n    return tastyComponentPropListeners(ctx, (name, node) => {\n      if (name === 'className')\n        context.report({ node, messageId: 'noClassNameProp' });\n    });\n  },\n});\n"],"mappings":";;;;;AAIA,gCAAe,WAAkC;CAC/C,MAAM;CACN,MAAM;EACJ,MAAM;EACN,MAAM,EACJ,aACE,mEACH;EACD,UAAU,EACR,iBACE,+UACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;AAEd,SAAO,4BADK,IAAI,aAAa,QAAQ,GACI,MAAM,SAAS;AACtD,OAAI,SAAS,YACX,SAAQ,OAAO;IAAE;IAAM,WAAW;IAAmB,CAAC;IACxD;;CAEL,CAAC"}

package/dist/rules/no-important.js

@@ -1,7 +1,9 @@
 import { createRule } from "../create-rule.js";
 import { getStringValue } from "../utils.js";
-import { TastyContext, styleObjectListeners } from "../context.js";
-import { replaceStringValue } from "../fix-utils.js";
+import { TastyContext } from "../context.js";
+import { stringStyleValueListeners } from "../style-values.js";
+import { maskValueLiterals } from "../value-words.js";
+import { replaceInStringValue } from "../fix-utils.js";
 
 //#region src/rules/no-important.ts
 var no_important_default = createRule({
@@ -18,33 +20,26 @@ var no_important_default = createRule({
 		const ctx = new TastyContext(context);
 		function checkNode(node) {
 			const str = getStringValue(node);
-			if (str && str.includes("!important")) {
-				const stripped = str.replace(/\s*!important\s*/g, "").trim();
-				context.report({
-					node,
-					messageId: "noImportant",
-					fix(fixer) {
-						return replaceStringValue(fixer, node, stripped);
-					}
-				});
-			}
+			if (!str) return;
+			const edits = [...maskValueLiterals(str).matchAll(/!important\b(?!-)/gi)].map((match) => {
+				let start = match.index;
+				while (start > 0 && /\s/.test(str[start - 1])) start--;
+				return {
+					start,
+					end: match.index + match[0].length,
+					replacement: ""
+				};
+			});
+			if (!edits.length) return;
+			context.report({
+				node,
+				messageId: "noImportant",
+				fix: (fixer) => replaceInStringValue(fixer, node, edits, context.sourceCode)
+			});
 		}
-		function handleStyleObject(node) {
-			if (!ctx.isStyleObject(node)) return;
-			for (const prop of node.properties) {
-				if (prop.type !== "Property") continue;
-				checkNode(prop.value);
-				if (prop.value.type === "ObjectExpression" && ctx.isStateMap(prop.value, prop)) {
-					for (const stateProp of prop.value.properties) if (stateProp.type === "Property") checkNode(stateProp.value);
-				}
-			}
-		}
-		return {
-			ImportDeclaration(node) {
-				ctx.trackImport(node);
-			},
-			...styleObjectListeners(handleStyleObject)
-		};
+		return stringStyleValueListeners(ctx, (_value, node) => {
+			checkNode(node);
+		});
 	}
 });
 

package/dist/rules/no-important.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-important.js","names":[],"sources":["../../src/rules/no-important.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getStringValue } from '../utils.js';\nimport { replaceStringValue } from '../fix-utils.js';\n\ntype MessageIds = 'noImportant';\n\nexport default createRule<[], MessageIds>({\n  name: 'no-important',\n  meta: {\n    type: 'problem',\n    fixable: 'code',\n    docs: {\n      description: 'Disallow !important in tasty style values',\n    },\n    messages: {\n      noImportant:\n        'Do not use !important in tasty styles. The tasty system manages specificity via doubled selectors and state ordering.',\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function checkNode(node: TSESTree.Node): void {\n      const str = getStringValue(node);\n      if (str && str.includes('!important')) {\n        const stripped = str.replace(/\\s*!important\\s*/g, '').trim();\n        context.report({\n          node,\n          messageId: 'noImportant',\n          fix(fixer) {\n            return replaceStringValue(fixer, node, stripped);\n          },\n        });\n      }\n    }\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (!ctx.isStyleObject(node)) return;\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n\n        checkNode(prop.value);\n\n        // Only recurse into genuine state maps. Sub-element objects\n        // (`Icon: { … }`) are style objects in their own right and are visited\n        // separately by the listener, so recursing here reports them twice.\n        if (\n          prop.value.type === 'ObjectExpression' &&\n          ctx.isStateMap(prop.value, prop)\n        ) {\n          for (const stateProp of prop.value.properties) {\n            if (stateProp.type === 'Property') {\n              checkNode(stateProp.value);\n            }\n          }\n        }\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":";;;;;;AAQA,2BAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,SAAS;EACT,MAAM,EACJ,aAAa,6CACd;EACD,UAAU,EACR,aACE,yHACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,UAAU,MAA2B;GAC5C,MAAM,MAAM,eAAe,KAAK;AAChC,OAAI,OAAO,IAAI,SAAS,aAAa,EAAE;IACrC,MAAM,WAAW,IAAI,QAAQ,qBAAqB,GAAG,CAAC,MAAM;AAC5D,YAAQ,OAAO;KACb;KACA,WAAW;KACX,IAAI,OAAO;AACT,aAAO,mBAAmB,OAAO,MAAM,SAAS;;KAEnD,CAAC;;;EAIN,SAAS,kBAAkB,MAAiC;AAC1D,OAAI,CAAC,IAAI,cAAc,KAAK,CAAE;AAE9B,QAAK,MAAM,QAAQ,KAAK,YAAY;AAClC,QAAI,KAAK,SAAS,WAAY;AAE9B,cAAU,KAAK,MAAM;AAKrB,QACE,KAAK,MAAM,SAAS,sBACpB,IAAI,WAAW,KAAK,OAAO,KAAK,EAEhC;UAAK,MAAM,aAAa,KAAK,MAAM,WACjC,KAAI,UAAU,SAAS,WACrB,WAAU,UAAU,MAAM;;;;AAOpC,SAAO;GACL,kBAAkB,MAAM;AACtB,QAAI,YAAY,KAAK;;GAEvB,GAAG,qBAAqB,kBAAkB;GAC3C;;CAEJ,CAAC"}
+{"version":3,"file":"no-important.js","names":[],"sources":["../../src/rules/no-important.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext } from '../context.js';\nimport { stringStyleValueListeners } from '../style-values.js';\nimport { getStringValue } from '../utils.js';\nimport { replaceInStringValue } from '../fix-utils.js';\nimport { maskValueLiterals } from '../value-words.js';\n\ntype MessageIds = 'noImportant';\n\nexport default createRule<[], MessageIds>({\n  name: 'no-important',\n  meta: {\n    type: 'problem',\n    fixable: 'code',\n    docs: {\n      description: 'Disallow !important in tasty style values',\n    },\n    messages: {\n      noImportant:\n        'Do not use !important in tasty styles. The tasty system manages specificity via doubled selectors and state ordering.',\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function checkNode(node: TSESTree.Node): void {\n      const str = getStringValue(node);\n      if (!str) return;\n      const masked = maskValueLiterals(str);\n      const edits = [...masked.matchAll(/!important\\b(?!-)/gi)].map((match) => {\n        let start = match.index;\n        while (start > 0 && /\\s/.test(str[start - 1])) start--;\n        return { start, end: match.index + match[0].length, replacement: '' };\n      });\n      if (!edits.length) return;\n      context.report({\n        node,\n        messageId: 'noImportant',\n        fix: (fixer) =>\n          replaceInStringValue(fixer, node, edits, context.sourceCode),\n      });\n    }\n\n    return stringStyleValueListeners(ctx, (_value, node) => {\n      checkNode(node);\n    });\n  },\n});\n"],"mappings":";;;;;;;;AAUA,2BAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,SAAS;EACT,MAAM,EACJ,aAAa,6CACd;EACD,UAAU,EACR,aACE,yHACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,UAAU,MAA2B;GAC5C,MAAM,MAAM,eAAe,KAAK;AAChC,OAAI,CAAC,IAAK;GAEV,MAAM,QAAQ,CAAC,GADA,kBAAkB,IAAI,CACZ,SAAS,sBAAsB,CAAC,CAAC,KAAK,UAAU;IACvE,IAAI,QAAQ,MAAM;AAClB,WAAO,QAAQ,KAAK,KAAK,KAAK,IAAI,QAAQ,GAAG,CAAE;AAC/C,WAAO;KAAE;KAAO,KAAK,MAAM,QAAQ,MAAM,GAAG;KAAQ,aAAa;KAAI;KACrE;AACF,OAAI,CAAC,MAAM,OAAQ;AACnB,WAAQ,OAAO;IACb;IACA,WAAW;IACX,MAAM,UACJ,qBAAqB,OAAO,MAAM,OAAO,QAAQ,WAAW;IAC/D,CAAC;;AAGJ,SAAO,0BAA0B,MAAM,QAAQ,SAAS;AACtD,aAAU,KAAK;IACf;;CAEL,CAAC"}

package/dist/rules/no-raw-color-values.js

@@ -1,21 +1,37 @@
 import { createRule } from "../create-rule.js";
 import { COLOR_BEARING_PROPERTIES, NAMED_CSS_COLORS } from "../constants.js";
-import { getKeyName, getStringValue } from "../utils.js";
-import { TastyContext, styleObjectListeners } from "../context.js";
+import { getStringValue, isRawHexColor } from "../utils.js";
+import { TastyContext } from "../context.js";
+import { stringStyleValueListeners } from "../style-values.js";
+import { scanValueWords } from "../value-words.js";
 
 //#region src/rules/no-raw-color-values.ts
-const HEX_COLOR_REGEX = /#([0-9a-fA-F]{3,8})\b/g;
-const COLOR_FUNC_REGEX = /\b(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|okhsl|okhsv|okhst|color|device-cmyk|light-dark)\s*\(/gi;
-const NAMED_COLOR_REGEX = new RegExp(`\\b(${[...NAMED_CSS_COLORS].sort((a, b) => b.length - a.length).join("|")})\\b`, "gi");
+const COLOR_FUNCTIONS = new Set([
+	"rgb",
+	"rgba",
+	"hsl",
+	"hsla",
+	"hwb",
+	"lab",
+	"lch",
+	"oklab",
+	"oklch",
+	"okhsl",
+	"okhsv",
+	"okhst",
+	"color",
+	"device-cmyk",
+	"light-dark"
+]);
 var no_raw_color_values_default = createRule({
 	name: "no-raw-color-values",
 	meta: {
 		type: "suggestion",
 		docs: { description: "Suggest using color tokens instead of raw hex/rgb/okhsl/named colors" },
 		messages: {
-			rawHexColor: "Use a color token instead of raw hex color '{{value}}'.",
-			rawColorFunction: "Use a color token instead of raw {{func}}() color.",
-			rawNamedColor: "Use a color token instead of raw named color '{{name}}'."
+			rawHexColor: "Use a color token instead of raw hex color '{{value}}'. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason.",
+			rawColorFunction: "Use a color token instead of raw {{func}}() color. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason.",
+			rawNamedColor: "Use a color token instead of raw named color '{{name}}'. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason."
 		},
 		schema: []
 	},
@@ -38,61 +54,26 @@ var no_raw_color_values_default = createRule({
 			return false;
 		}
 		function checkValue(value, node, propertyKey) {
-			if (isInTokenDefinition(node)) return;
-			HEX_COLOR_REGEX.lastIndex = 0;
-			let match;
-			while ((match = HEX_COLOR_REGEX.exec(value)) !== null) {
-				const hex = match[1];
-				if ([
-					3,
-					4,
-					6,
-					8
-				].includes(hex.length)) context.report({
-					node,
-					messageId: "rawHexColor",
-					data: { value: match[0] }
-				});
-			}
-			COLOR_FUNC_REGEX.lastIndex = 0;
-			while ((match = COLOR_FUNC_REGEX.exec(value)) !== null) context.report({
+			if (isInTokenDefinition(node) || propertyKey && /^[#$]/.test(propertyKey)) return;
+			for (const word of scanValueWords(value)) if (isRawHexColor(word.value)) context.report({
+				node,
+				messageId: "rawHexColor",
+				data: { value: word.value }
+			});
+			else if (word.isFunction && COLOR_FUNCTIONS.has(word.value.toLowerCase())) context.report({
 				node,
 				messageId: "rawColorFunction",
-				data: { func: match[1] }
+				data: { func: word.value }
+			});
+			else if (!word.isFunction && propertyKey && COLOR_BEARING_PROPERTIES.has(propertyKey) && NAMED_CSS_COLORS.has(word.value.toLowerCase())) context.report({
+				node,
+				messageId: "rawNamedColor",
+				data: { name: word.value }
 			});
-			if (propertyKey && COLOR_BEARING_PROPERTIES.has(propertyKey)) {
-				NAMED_COLOR_REGEX.lastIndex = 0;
-				while ((match = NAMED_COLOR_REGEX.exec(value)) !== null) {
-					const prev = match.index > 0 ? value[match.index - 1] : "";
-					if (prev === "#" || prev === "$") continue;
-					context.report({
-						node,
-						messageId: "rawNamedColor",
-						data: { name: match[1] }
-					});
-				}
-			}
-		}
-		function handleStyleObject(node) {
-			if (!ctx.isStyleObject(node)) return;
-			for (const prop of node.properties) {
-				if (prop.type !== "Property") continue;
-				const key = getKeyName(prop.key);
-				const str = getStringValue(prop.value);
-				if (str) checkValue(str, prop.value, key);
-				if (prop.value.type === "ObjectExpression" && ctx.isStateMap(prop.value, prop)) for (const stateProp of prop.value.properties) {
-					if (stateProp.type !== "Property") continue;
-					const stateStr = getStringValue(stateProp.value);
-					if (stateStr) checkValue(stateStr, stateProp.value, key);
-				}
-			}
 		}
-		return {
-			ImportDeclaration(node) {
-				ctx.trackImport(node);
-			},
-			...styleObjectListeners(handleStyleObject)
-		};
+		return stringStyleValueListeners(ctx, (value, node, property) => {
+			checkValue(value, node, property);
+		});
 	}
 });
 

package/dist/rules/no-raw-color-values.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-raw-color-values.js","names":[],"sources":["../../src/rules/no-raw-color-values.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getStringValue, getKeyName } from '../utils.js';\nimport { COLOR_BEARING_PROPERTIES, NAMED_CSS_COLORS } from '../constants.js';\n\ntype MessageIds = 'rawHexColor' | 'rawColorFunction' | 'rawNamedColor';\n\nconst HEX_COLOR_REGEX = /#([0-9a-fA-F]{3,8})\\b/g;\nconst COLOR_FUNC_REGEX =\n  /\\b(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|okhsl|okhsv|okhst|color|device-cmyk|light-dark)\\s*\\(/gi;\nconst NAMED_COLOR_REGEX = new RegExp(\n  `\\\\b(${[...NAMED_CSS_COLORS].sort((a, b) => b.length - a.length).join('|')})\\\\b`,\n  'gi',\n);\n\nexport default createRule<[], MessageIds>({\n  name: 'no-raw-color-values',\n  meta: {\n    type: 'suggestion',\n    docs: {\n      description:\n        'Suggest using color tokens instead of raw hex/rgb/okhsl/named colors',\n    },\n    messages: {\n      rawHexColor: \"Use a color token instead of raw hex color '{{value}}'.\",\n      rawColorFunction: 'Use a color token instead of raw {{func}}() color.',\n      rawNamedColor: \"Use a color token instead of raw named color '{{name}}'.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function isInTokenDefinition(node: TSESTree.Node): boolean {\n      // Check if this is inside a :root or token-defining context\n      let current: TSESTree.Node | undefined = node;\n      while (current) {\n        if (current.type === 'CallExpression') {\n          const imp = ctx.isTastyCall(current);\n          if (imp && imp.importedName === 'tastyStatic') {\n            const firstArg = current.arguments[0];\n            const selectorStr = getStringValue(firstArg);\n            if (selectorStr === ':root') return true;\n          }\n          break;\n        }\n        current = current.parent;\n      }\n      return false;\n    }\n\n    function checkValue(\n      value: string,\n      node: TSESTree.Node,\n      propertyKey?: string | null,\n    ): void {\n      if (isInTokenDefinition(node)) return;\n\n      // Check hex colors\n      HEX_COLOR_REGEX.lastIndex = 0;\n      let match;\n      while ((match = HEX_COLOR_REGEX.exec(value)) !== null) {\n        const hex = match[1];\n        if ([3, 4, 6, 8].includes(hex.length)) {\n          context.report({\n            node,\n            messageId: 'rawHexColor',\n            data: { value: match[0] },\n          });\n        }\n      }\n\n      // Check color functions (rgb, hsl, okhsl, okhst, oklch, …)\n      COLOR_FUNC_REGEX.lastIndex = 0;\n      while ((match = COLOR_FUNC_REGEX.exec(value)) !== null) {\n        context.report({\n          node,\n          messageId: 'rawColorFunction',\n          data: { func: match[1] },\n        });\n      }\n\n      // Check named CSS colors — scoped to color-bearing properties to avoid\n      // false positives on string properties like `content` or `cursor`. Skip\n      // matches that are part of a `#token` or `$prop` reference (e.g. `#purple`,\n      // `$red`) — those are Tasty tokens/custom properties, not raw colors.\n      if (propertyKey && COLOR_BEARING_PROPERTIES.has(propertyKey)) {\n        NAMED_COLOR_REGEX.lastIndex = 0;\n        while ((match = NAMED_COLOR_REGEX.exec(value)) !== null) {\n          const prev = match.index > 0 ? value[match.index - 1] : '';\n          if (prev === '#' || prev === '$') continue;\n          context.report({\n            node,\n            messageId: 'rawNamedColor',\n            data: { name: match[1] },\n          });\n        }\n      }\n    }\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (!ctx.isStyleObject(node)) return;\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n        const key = getKeyName(prop.key);\n\n        const str = getStringValue(prop.value);\n        if (str) checkValue(str, prop.value, key);\n\n        // Only recurse into genuine state maps. Sub-element objects\n        // (`Icon: { … }`) are style objects in their own right and are visited\n        // separately by the listener, so treating them as state maps here both\n        // double-reports and passes the sub-element name as the property.\n        if (\n          prop.value.type === 'ObjectExpression' &&\n          ctx.isStateMap(prop.value, prop)\n        ) {\n          for (const stateProp of prop.value.properties) {\n            if (stateProp.type !== 'Property') continue;\n            const stateStr = getStringValue(stateProp.value);\n            if (stateStr) checkValue(stateStr, stateProp.value, key);\n          }\n        }\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;AACxB,MAAM,mBACJ;AACF,MAAM,oBAAoB,IAAI,OAC5B,OAAO,CAAC,GAAG,iBAAiB,CAAC,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,OAC3E,KACD;AAED,kCAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,MAAM,EACJ,aACE,wEACH;EACD,UAAU;GACR,aAAa;GACb,kBAAkB;GAClB,eAAe;GAChB;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,oBAAoB,MAA8B;GAEzD,IAAI,UAAqC;AACzC,UAAO,SAAS;AACd,QAAI,QAAQ,SAAS,kBAAkB;KACrC,MAAM,MAAM,IAAI,YAAY,QAAQ;AACpC,SAAI,OAAO,IAAI,iBAAiB,eAAe;MAC7C,MAAM,WAAW,QAAQ,UAAU;AAEnC,UADoB,eAAe,SAAS,KACxB,QAAS,QAAO;;AAEtC;;AAEF,cAAU,QAAQ;;AAEpB,UAAO;;EAGT,SAAS,WACP,OACA,MACA,aACM;AACN,OAAI,oBAAoB,KAAK,CAAE;AAG/B,mBAAgB,YAAY;GAC5B,IAAI;AACJ,WAAQ,QAAQ,gBAAgB,KAAK,MAAM,MAAM,MAAM;IACrD,MAAM,MAAM,MAAM;AAClB,QAAI;KAAC;KAAG;KAAG;KAAG;KAAE,CAAC,SAAS,IAAI,OAAO,CACnC,SAAQ,OAAO;KACb;KACA,WAAW;KACX,MAAM,EAAE,OAAO,MAAM,IAAI;KAC1B,CAAC;;AAKN,oBAAiB,YAAY;AAC7B,WAAQ,QAAQ,iBAAiB,KAAK,MAAM,MAAM,KAChD,SAAQ,OAAO;IACb;IACA,WAAW;IACX,MAAM,EAAE,MAAM,MAAM,IAAI;IACzB,CAAC;AAOJ,OAAI,eAAe,yBAAyB,IAAI,YAAY,EAAE;AAC5D,sBAAkB,YAAY;AAC9B,YAAQ,QAAQ,kBAAkB,KAAK,MAAM,MAAM,MAAM;KACvD,MAAM,OAAO,MAAM,QAAQ,IAAI,MAAM,MAAM,QAAQ,KAAK;AACxD,SAAI,SAAS,OAAO,SAAS,IAAK;AAClC,aAAQ,OAAO;MACb;MACA,WAAW;MACX,MAAM,EAAE,MAAM,MAAM,IAAI;MACzB,CAAC;;;;EAKR,SAAS,kBAAkB,MAAiC;AAC1D,OAAI,CAAC,IAAI,cAAc,KAAK,CAAE;AAE9B,QAAK,MAAM,QAAQ,KAAK,YAAY;AAClC,QAAI,KAAK,SAAS,WAAY;IAC9B,MAAM,MAAM,WAAW,KAAK,IAAI;IAEhC,MAAM,MAAM,eAAe,KAAK,MAAM;AACtC,QAAI,IAAK,YAAW,KAAK,KAAK,OAAO,IAAI;AAMzC,QACE,KAAK,MAAM,SAAS,sBACpB,IAAI,WAAW,KAAK,OAAO,KAAK,CAEhC,MAAK,MAAM,aAAa,KAAK,MAAM,YAAY;AAC7C,SAAI,UAAU,SAAS,WAAY;KACnC,MAAM,WAAW,eAAe,UAAU,MAAM;AAChD,SAAI,SAAU,YAAW,UAAU,UAAU,OAAO,IAAI;;;;AAMhE,SAAO;GACL,kBAAkB,MAAM;AACtB,QAAI,YAAY,KAAK;;GAEvB,GAAG,qBAAqB,kBAAkB;GAC3C;;CAEJ,CAAC"}
+{"version":3,"file":"no-raw-color-values.js","names":[],"sources":["../../src/rules/no-raw-color-values.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext } from '../context.js';\nimport { stringStyleValueListeners } from '../style-values.js';\nimport { getStringValue, isRawHexColor } from '../utils.js';\nimport { scanValueWords } from '../value-words.js';\nimport { COLOR_BEARING_PROPERTIES, NAMED_CSS_COLORS } from '../constants.js';\n\ntype MessageIds = 'rawHexColor' | 'rawColorFunction' | 'rawNamedColor';\n\nconst COLOR_FUNCTIONS = new Set([\n  'rgb',\n  'rgba',\n  'hsl',\n  'hsla',\n  'hwb',\n  'lab',\n  'lch',\n  'oklab',\n  'oklch',\n  'okhsl',\n  'okhsv',\n  'okhst',\n  'color',\n  'device-cmyk',\n  'light-dark',\n]);\n\nexport default createRule<[], MessageIds>({\n  name: 'no-raw-color-values',\n  meta: {\n    type: 'suggestion',\n    docs: {\n      description:\n        'Suggest using color tokens instead of raw hex/rgb/okhsl/named colors',\n    },\n    messages: {\n      rawHexColor:\n        \"Use a color token instead of raw hex color '{{value}}'. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason.\",\n      rawColorFunction:\n        'Use a color token instead of raw {{func}}() color. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason.',\n      rawNamedColor:\n        \"Use a color token instead of raw named color '{{name}}'. For an intentional one-off color, explicitly disable tasty/no-raw-color-values on this line with a reason.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function isInTokenDefinition(node: TSESTree.Node): boolean {\n      // Check if this is inside a :root or token-defining context\n      let current: TSESTree.Node | undefined = node;\n      while (current) {\n        if (current.type === 'CallExpression') {\n          const imp = ctx.isTastyCall(current);\n          if (imp && imp.importedName === 'tastyStatic') {\n            const firstArg = current.arguments[0];\n            const selectorStr = getStringValue(firstArg);\n            if (selectorStr === ':root') return true;\n          }\n          break;\n        }\n        current = current.parent;\n      }\n      return false;\n    }\n\n    function checkValue(\n      value: string,\n      node: TSESTree.Node,\n      propertyKey?: string | null,\n    ): void {\n      if (\n        isInTokenDefinition(node) ||\n        (propertyKey && /^[#$]/.test(propertyKey))\n      )\n        return;\n      for (const word of scanValueWords(value)) {\n        if (isRawHexColor(word.value)) {\n          context.report({\n            node,\n            messageId: 'rawHexColor',\n            data: { value: word.value },\n          });\n        } else if (\n          word.isFunction &&\n          COLOR_FUNCTIONS.has(word.value.toLowerCase())\n        ) {\n          context.report({\n            node,\n            messageId: 'rawColorFunction',\n            data: { func: word.value },\n          });\n        } else if (\n          !word.isFunction &&\n          propertyKey &&\n          COLOR_BEARING_PROPERTIES.has(propertyKey) &&\n          NAMED_CSS_COLORS.has(word.value.toLowerCase())\n        ) {\n          context.report({\n            node,\n            messageId: 'rawNamedColor',\n            data: { name: word.value },\n          });\n        }\n      }\n    }\n\n    return stringStyleValueListeners(ctx, (value, node, property) => {\n      checkValue(value, node, property);\n    });\n  },\n});\n"],"mappings":";;;;;;;;AAUA,MAAM,kBAAkB,IAAI,IAAI;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,kCAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,MAAM,EACJ,aACE,wEACH;EACD,UAAU;GACR,aACE;GACF,kBACE;GACF,eACE;GACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,oBAAoB,MAA8B;GAEzD,IAAI,UAAqC;AACzC,UAAO,SAAS;AACd,QAAI,QAAQ,SAAS,kBAAkB;KACrC,MAAM,MAAM,IAAI,YAAY,QAAQ;AACpC,SAAI,OAAO,IAAI,iBAAiB,eAAe;MAC7C,MAAM,WAAW,QAAQ,UAAU;AAEnC,UADoB,eAAe,SAAS,KACxB,QAAS,QAAO;;AAEtC;;AAEF,cAAU,QAAQ;;AAEpB,UAAO;;EAGT,SAAS,WACP,OACA,MACA,aACM;AACN,OACE,oBAAoB,KAAK,IACxB,eAAe,QAAQ,KAAK,YAAY,CAEzC;AACF,QAAK,MAAM,QAAQ,eAAe,MAAM,CACtC,KAAI,cAAc,KAAK,MAAM,CAC3B,SAAQ,OAAO;IACb;IACA,WAAW;IACX,MAAM,EAAE,OAAO,KAAK,OAAO;IAC5B,CAAC;YAEF,KAAK,cACL,gBAAgB,IAAI,KAAK,MAAM,aAAa,CAAC,CAE7C,SAAQ,OAAO;IACb;IACA,WAAW;IACX,MAAM,EAAE,MAAM,KAAK,OAAO;IAC3B,CAAC;YAEF,CAAC,KAAK,cACN,eACA,yBAAyB,IAAI,YAAY,IACzC,iBAAiB,IAAI,KAAK,MAAM,aAAa,CAAC,CAE9C,SAAQ,OAAO;IACb;IACA,WAAW;IACX,MAAM,EAAE,MAAM,KAAK,OAAO;IAC3B,CAAC;;AAKR,SAAO,0BAA0B,MAAM,OAAO,MAAM,aAAa;AAC/D,cAAW,OAAO,MAAM,SAAS;IACjC;;CAEL,CAAC"}

package/dist/rules/no-raw-motion-duration.js

@@ -1,6 +1,6 @@
 import { createRule } from "../create-rule.js";
-import { getKeyName, getStringValue } from "../utils.js";
-import { TastyContext, styleObjectListeners } from "../context.js";
+import { TastyContext } from "../context.js";
+import { stringStyleValueListeners } from "../style-values.js";
 import { scanTokens } from "../parsers/utils.js";
 import { replaceInStringValue } from "../fix-utils.js";
 import { getDurationTokens, hasRawTimeInExpression, isNonzeroTime, isTimeExpression, isTimeLiteral, isZeroTime } from "./motion-duration-utils.js";
@@ -18,7 +18,7 @@ var no_raw_motion_duration_default = createRule({
 		hasSuggestions: true,
 		docs: { description: "Suggest motion tokens for animation and explicit CSS duration properties" },
 		messages: {
-			rawMotionDuration: "{{property}} duration '{{duration}}' is hardcoded. Use a duration token.",
+			rawMotionDuration: "{{property}} duration '{{duration}}' is hardcoded. Use a duration token. For intentional custom timing, explicitly disable tasty/no-raw-motion-duration on this line with a reason.",
 			useDurationToken: "Replace '{{duration}}' with '{{token}}'"
 		},
 		schema: []
@@ -76,27 +76,9 @@ var no_raw_motion_duration_default = createRule({
 			}
 			checkGroup(group, property, node);
 		}
-		function handleStyleObject(node) {
-			if (!ctx.isStyleObject(node)) return;
-			for (const prop of node.properties) {
-				if (prop.type !== "Property" || prop.computed) continue;
-				const key = getKeyName(prop.key);
-				if (!key || !PROPERTIES.has(key)) continue;
-				const value = getStringValue(prop.value);
-				if (value) checkValue(value, key, prop.value);
-				else if (prop.value.type === "ObjectExpression" && ctx.isStateMap(prop.value, prop)) for (const stateProp of prop.value.properties) {
-					if (stateProp.type !== "Property") continue;
-					const stateValue = getStringValue(stateProp.value);
-					if (stateValue) checkValue(stateValue, key, stateProp.value);
-				}
-			}
-		}
-		return {
-			ImportDeclaration(node) {
-				ctx.trackImport(node);
-			},
-			...styleObjectListeners(handleStyleObject)
-		};
+		return stringStyleValueListeners(ctx, (value, node, property) => {
+			if (PROPERTIES.has(property)) checkValue(value, property, node);
+		});
 	}
 });