@salesforce-ux/eslint-plugin-slds 1.0.8-internal → 1.0.9-internal

package/build/utils/property-matcher.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/property-matcher.ts"],
-  "sourcesContent": ["///stylelint-sds/packages/stylelint-plugin-slds/src/utils/property-matcher.ts\n/**\n * Check if any of the hook properties match the provided cssProperty using wildcard matching.\n * @param hookProperties - Array of property patterns (can contain wildcards like `*`)\n * @param cssProperty - The CSS property to be checked\n * @returns true if a match is found, otherwise false\n */\nexport function matchesCssProperty(\n  hookProperties: string[],\n  cssProperty: string\n): boolean {\n  return hookProperties.some((propertyPattern: string) => {\n    const regexPattern = new RegExp(\n      '^' + propertyPattern.replace(/\\*/g, '.*') + '$'\n    );\n    return regexPattern.test(cssProperty);\n  });\n}\n\n// Directions & Corners\nconst DIRECTION_VALUES = '(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)';\nconst CORNER_VALUES = '(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)';\nconst INSET_VALUES = '(?:inline|block|inline-start|inline-end|block-start|block-end)';\n\n\n// Pre-compiled regex patterns for better performance\nconst BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);\nconst BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);\nconst MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);\nconst PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);\nconst BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);\nconst INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);\n\nexport function isBorderColorProperty(cssProperty: string): boolean {\n  return BORDER_COLOR_REGEX.test(cssProperty);\n}\n\nexport function isBorderWidthProperty(cssProperty: string): boolean {\n  return BORDER_WIDTH_REGEX.test(cssProperty);\n}\n\nexport function isMarginProperty(cssProperty: string): boolean {\n  return MARGIN_REGEX.test(cssProperty);\n}\n\nexport function isPaddingProperty(cssProperty: string): boolean {\n  return PADDING_REGEX.test(cssProperty);\n}\n\nexport function isBorderRadius(cssProperty: string): boolean {\n  return BORDER_RADIUS_REGEX.test(cssProperty);\n}\n\nexport function isDimensionProperty(cssProperty: string): boolean {\n  return ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height'].includes(cssProperty);\n}\n\nexport function isInsetProperty(cssProperty: string): boolean {\n  return INSET_REGEX.test(cssProperty);\n}\n\nexport const fontProperties = [\n  'font',\n  'font-size', \n  'font-weight'\n];\n\nexport const colorProperties = [\n  'color',\n  'fill',\n  'background',\n  'background-color',\n  'stroke',\n  'border',\n  'border*',\n  'border*-color',\n  'outline',\n  'outline-color',\n];\n\nexport const densificationProperties = [\n  'border*',\n  'margin*',\n  'padding*',\n  'width',\n  'height',\n  'min-width',\n  'max-width',\n  'min-height',\n  'max-height',\n  'inset',\n  'top',\n  'right',\n  'left',\n  'bottom',\n  'outline',\n  'outline-width',\n  'line-height'\n]; \n\n/**\n * Convert property patterns to CSS AST selector patterns\n * Handles wildcards (*) and creates proper ESLint CSS selector syntax\n */\nexport function toSelector(properties: string[]): string {\n  const selectorParts = properties.map(prop => {\n    if (prop.includes('*')) {\n      // Convert wildcards to regex patterns for CSS AST selectors\n      // Anchor to start of string to prevent matching CSS custom properties\n      const regexPattern = prop.replace(/\\*/g, '.*');\n      return `Declaration[property=/^${regexPattern}$/]`;\n    } else {\n      // Exact property match\n      return `Declaration[property='${prop}']`;\n    }\n  });\n  \n  return selectorParts.join(', ');\n}\n\nexport function resolveDensityPropertyToMatch(cssProperty:string){\n  const propertyToMatch = cssProperty.toLowerCase();\n  if(isOutlineWidthProperty(propertyToMatch) || isBorderWidthProperty(propertyToMatch)){\n    return 'border-width';\n  } else if(isMarginProperty(propertyToMatch)){\n    return 'margin';\n  } else if(isPaddingProperty(propertyToMatch)){\n    return 'padding';\n  } else if(isBorderRadius(propertyToMatch)){\n    return 'border-radius';\n  } else if(isDimensionProperty(propertyToMatch)){\n    // Stylinghooks includes only width as property to match, for all other dimensions we need to match width\n    return 'width';\n  } else if(isInsetProperty(propertyToMatch)){\n    // Stylinghooks includes only top/left/right/bottom as property to match, for all other insets we need to match top\n    return 'top';\n  }\n  return propertyToMatch;\n}\n\nexport function resolveColorPropertyToMatch(cssProperty:string){\n  const propertyToMatch = cssProperty.toLowerCase();\n  if(propertyToMatch === 'outline' || propertyToMatch === 'outline-color'){\n    return 'border-color';\n  } else if(propertyToMatch === 'background' || propertyToMatch === 'background-color'){\n    return 'background-color';\n  } else if(isBorderColorProperty(propertyToMatch)){\n    return 'border-color';\n  }\n  return propertyToMatch;\n}\n\nexport function isOutlineWidthProperty(propertyToMatch:string){\n  return propertyToMatch === 'outline' || propertyToMatch === 'outline-width';\n}"],
-  "mappings": "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",
+  "sourcesContent": ["///stylelint-sds/packages/stylelint-plugin-slds/src/utils/property-matcher.ts\n/**\n * Check if any of the hook properties match the provided cssProperty using wildcard matching.\n * @param hookProperties - Array of property patterns (can contain wildcards like `*`)\n * @param cssProperty - The CSS property to be checked\n * @returns true if a match is found, otherwise false\n */\nexport function matchesCssProperty(\n  hookProperties: string[],\n  cssProperty: string\n): boolean {\n  return hookProperties.some((propertyPattern: string) => {\n    const regexPattern = new RegExp(\n      '^' + propertyPattern.replace(/\\*/g, '.*') + '$'\n    );\n    return regexPattern.test(cssProperty);\n  });\n}\n\n// Directions & Corners\nconst DIRECTION_VALUES = '(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)';\nconst CORNER_VALUES = '(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)';\nconst INSET_VALUES = '(?:inline|block|inline-start|inline-end|block-start|block-end)';\n\n\n// Pre-compiled regex patterns for better performance\nconst BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);\nconst BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);\nconst MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);\nconst PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);\nconst BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);\nconst INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);\n\nexport function isBorderColorProperty(cssProperty: string): boolean {\n  return cssProperty === 'border' || BORDER_COLOR_REGEX.test(cssProperty);\n}\n\nexport function isBorderWidthProperty(cssProperty: string): boolean {\n  return cssProperty === 'border' || BORDER_WIDTH_REGEX.test(cssProperty);\n}\n\nexport function isMarginProperty(cssProperty: string): boolean {\n  return MARGIN_REGEX.test(cssProperty);\n}\n\nexport function isPaddingProperty(cssProperty: string): boolean {\n  return PADDING_REGEX.test(cssProperty);\n}\n\nexport function isBorderRadius(cssProperty: string): boolean {\n  return BORDER_RADIUS_REGEX.test(cssProperty);\n}\n\nexport function isDimensionProperty(cssProperty: string): boolean {\n  return ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height'].includes(cssProperty);\n}\n\nexport function isInsetProperty(cssProperty: string): boolean {\n  return INSET_REGEX.test(cssProperty);\n}\n\nexport const fontProperties = [\n  'font',\n  'font-size', \n  'font-weight'\n];\n\nexport const colorProperties = [\n  'color',\n  'fill',\n  'background',\n  'background-color',\n  'stroke',\n  'border',\n  'border*',\n  'border*-color',\n  'outline',\n  'outline-color',\n];\n\nexport const densificationProperties = [\n  'border*',\n  'margin*',\n  'padding*',\n  'width',\n  'height',\n  'min-width',\n  'max-width',\n  'min-height',\n  'max-height',\n  'inset',\n  'top',\n  'right',\n  'left',\n  'bottom',\n  'outline',\n  'outline-width',\n  'line-height'\n]; \n\n/**\n * Convert property patterns to CSS AST selector patterns\n * Handles wildcards (*) and creates proper ESLint CSS selector syntax\n */\nexport function toSelector(properties: string[]): string {\n  const selectorParts = properties.map(prop => {\n    if (prop.includes('*')) {\n      // Convert wildcards to regex patterns for CSS AST selectors\n      // Anchor to start of string to prevent matching CSS custom properties\n      const regexPattern = prop.replace(/\\*/g, '.*');\n      return `Declaration[property=/^${regexPattern}$/]`;\n    } else {\n      // Exact property match\n      return `Declaration[property='${prop}']`;\n    }\n  });\n  \n  return selectorParts.join(', ');\n}\n\nexport function resolveDensityPropertyToMatch(cssProperty:string){\n  const propertyToMatch = cssProperty.toLowerCase();\n  if(isOutlineWidthProperty(propertyToMatch) || isBorderWidthProperty(propertyToMatch)){\n    return 'border-width';\n  } else if(isMarginProperty(propertyToMatch)){\n    return 'margin';\n  } else if(isPaddingProperty(propertyToMatch)){\n    return 'padding';\n  } else if(isBorderRadius(propertyToMatch)){\n    return 'border-radius';\n  } else if(isDimensionProperty(propertyToMatch)){\n    // Stylinghooks includes only width as property to match, for all other dimensions we need to match width\n    return 'width';\n  } else if(isInsetProperty(propertyToMatch)){\n    // Stylinghooks includes only top/left/right/bottom as property to match, for all other insets we need to match top\n    return 'top';\n  }\n  return propertyToMatch;\n}\n\nexport function resolveColorPropertyToMatch(cssProperty:string){\n  const propertyToMatch = cssProperty.toLowerCase();\n  if(propertyToMatch === 'outline' || propertyToMatch === 'outline-color'){\n    return 'border-color';\n  } else if(propertyToMatch === 'background' || propertyToMatch === 'background-color'){\n    return 'background-color';\n  } else if(isBorderColorProperty(propertyToMatch)){\n    return 'border-color';\n  }\n  return propertyToMatch;\n}\n\nexport function isOutlineWidthProperty(propertyToMatch:string){\n  return propertyToMatch === 'outline' || propertyToMatch === 'outline-width';\n}"],
+  "mappings": "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",
   "names": []
 }

package/build/utils/styling-hook-utils.js

@@ -22,54 +22,31 @@ __export(styling_hook_utils_exports, {
   getStylingHooksForDensityValue: () => getStylingHooksForDensityValue
 });
 module.exports = __toCommonJS(styling_hook_utils_exports);
-
-// src/utils/value-utils.ts
-var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
-function parseUnitValue(value) {
-  if (!value) return null;
-  const unitsPattern = ALLOWED_UNITS.join("|");
-  const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
-  const match = value.match(regex);
-  if (!match) return null;
-  const number = parseFloat(match[1]);
-  const unit = match[2] ? match[2] : null;
-  if (isNaN(number)) return null;
-  return { number, unit };
-}
-function toAlternateUnitValue(numberVal, unitType) {
-  if (unitType === "px") {
-    let floatValue = parseFloat(`${numberVal / 16}`);
-    if (!isNaN(floatValue)) {
-      return {
-        unit: "rem",
-        number: parseFloat(floatValue.toFixed(4))
-      };
-    }
-  } else if (unitType === "rem") {
-    const intValue = parseInt(`${numberVal * 16}`);
-    if (!isNaN(intValue)) {
-      return {
-        unit: "px",
-        number: intValue
-      };
-    }
-  }
-  return null;
-}
-
-// src/utils/styling-hook-utils.ts
+var import_value_utils = require("./value-utils");
 function isValueMatch(valueToMatch, sldsValue) {
   if (!valueToMatch || !sldsValue) {
     return false;
   }
-  return valueToMatch.unit == sldsValue.unit && valueToMatch.number === sldsValue.number;
+  return valueToMatch.unit == sldsValue.unit && valueToMatch.value === sldsValue.value;
+}
+function isKeywordValue(parsedValue) {
+  return parsedValue !== null && typeof parsedValue.value === "string";
 }
 function getStylingHooksForDensityValue(parsedValue, supportedStylinghooks, cssProperty) {
   if (!parsedValue) return [];
-  const alternateValue = toAlternateUnitValue(parsedValue.number, parsedValue.unit);
   const matchedHooks = [];
+  if (isKeywordValue(parsedValue)) {
+    const keywordLower = parsedValue.value.toLowerCase();
+    for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {
+      if (sldsValue.toLowerCase() === keywordLower) {
+        hooks.filter((hook) => hook.properties.includes(cssProperty)).forEach((hook) => matchedHooks.push(hook.name));
+      }
+    }
+    return matchedHooks;
+  }
+  const alternateValue = typeof parsedValue.value === "number" ? (0, import_value_utils.toAlternateUnitValue)(parsedValue.value, parsedValue.unit) : null;
   for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {
-    const parsedSldsValue = parseUnitValue(sldsValue);
+    const parsedSldsValue = (0, import_value_utils.parseUnitValue)(sldsValue);
     if (isValueMatch(parsedValue, parsedSldsValue) || alternateValue && isValueMatch(alternateValue, parsedSldsValue)) {
       hooks.filter((hook) => hook.properties.includes(cssProperty)).forEach((hook) => matchedHooks.push(hook.name));
     }

package/build/utils/styling-hook-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/utils/styling-hook-utils.ts", "../../src/utils/value-utils.ts"],
-  "sourcesContent": ["import type { ValueToStylingHookEntry, ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata/next';\nimport { ParsedUnitValue, parseUnitValue, toAlternateUnitValue } from './value-utils';\n\nfunction isValueMatch(valueToMatch: ParsedUnitValue, sldsValue: ParsedUnitValue): boolean {\n  if (!valueToMatch || !sldsValue) {\n    return false;\n  }\n  return valueToMatch.unit == sldsValue.unit && valueToMatch.number === sldsValue.number;\n}\n\n/**\n * Get styling hooks for a density value using structured data from CSS AST\n * Eliminates regex parsing by accepting pre-parsed dimension data\n */\nexport function getStylingHooksForDensityValue(\n  parsedValue: ParsedUnitValue,\n  supportedStylinghooks: ValueToStylingHooksMapping,\n  cssProperty: string\n): string[] {\n  if (!parsedValue) return [];\n  \n  const alternateValue = toAlternateUnitValue(parsedValue.number, parsedValue.unit);\n  const matchedHooks = [];\n\n  for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {\n    // parsing SLDS metadata values\n    const parsedSldsValue = parseUnitValue(sldsValue);\n    if (isValueMatch(parsedValue, parsedSldsValue) || (alternateValue && isValueMatch(alternateValue, parsedSldsValue))) {\n      hooks\n        .filter((hook: ValueToStylingHookEntry) => hook.properties.includes(cssProperty))\n        .forEach((hook) => matchedHooks.push(hook.name));\n    }\n  }\n  return matchedHooks;\n}", "// Simplified value parsing\n\n/**\n * Checks if a value is a CSS global value.\n *\n * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:\n * - initial: Resets the property to its initial value as defined by the CSS specification.\n * - inherit: Inherits the value from the parent element.\n * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.\n * - revert: Rolls back the property to the value established by the user-agent or user styles.\n * - revert-layer: Rolls back the property to the value established by the previous cascade layer.\n *\n * All CSS properties accept these global values, including but not limited to:\n *   - color\n *   - background\n *   - font-size\n *   - margin\n *   - padding\n *   - border\n *   - display\n *   - position\n *   - z-index\n *   - and many more\n *\n * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.\n *\n * @param value The CSS value to check.\n * @returns True if the value is a CSS global value, false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer\n */\nexport function isGlobalValue(value: string): boolean {\n    return value === 'initial' || value === 'inherit' || value === 'unset' || value === 'revert' || value === 'revert-layer';\n  }\n\n// Configurable list of allowed CSS units\nexport const ALLOWED_UNITS = ['px', 'em', 'rem', '%', 'ch'];\n\nexport type ParsedUnitValue = {\n  unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;\n  number: number;\n} | null;\n\nexport function parseUnitValue(value: string): ParsedUnitValue {\n  if (!value) return null;\n  \n  // Create regex pattern from allowed units\n  const unitsPattern = ALLOWED_UNITS.join('|');\n  const regex = new RegExp(`^(-?\\\\d*\\\\.?\\\\d+)(${unitsPattern})?$`);\n  const match = value.match(regex);\n  if (!match) return null;\n  \n  const number = parseFloat(match[1]);\n  const unit = match[2] ? (match[2] as 'px' | 'rem' | '%' | 'em' | 'ch') : null; // Keep unitless values as null\n  \n  if (isNaN(number)) return null;\n  \n  return { number, unit };\n}\n\nexport function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue {\n    if (unitType === 'px') {\n      let floatValue = parseFloat(`${numberVal / 16}`);\n      if (!isNaN(floatValue)) {\n        return {\n          unit: 'rem',\n          number: parseFloat(floatValue.toFixed(4))\n        }\n      }\n    } else if (unitType === 'rem') {\n      const intValue = parseInt(`${numberVal * 16}`);\n      if (!isNaN(intValue)) {\n        return {\n          unit: 'px',\n          number: intValue\n        }\n      }\n    }\n    // For other units (%, em, ch) and unitless values, no alternate unit conversion available\n    // These units are context-dependent and don't have standard conversion ratios\n    return null;\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACwCO,IAAM,gBAAgB,CAAC,MAAM,MAAM,OAAO,KAAK,IAAI;AAOnD,SAAS,eAAe,OAAgC;AAC7D,MAAI,CAAC,MAAO,QAAO;AAGnB,QAAM,eAAe,cAAc,KAAK,GAAG;AAC3C,QAAM,QAAQ,IAAI,OAAO,qBAAqB,YAAY,KAAK;AAC/D,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,SAAS,WAAW,MAAM,CAAC,CAAC;AAClC,QAAM,OAAO,MAAM,CAAC,IAAK,MAAM,CAAC,IAAyC;AAEzE,MAAI,MAAM,MAAM,EAAG,QAAO;AAE1B,SAAO,EAAE,QAAQ,KAAK;AACxB;AAEO,SAAS,qBAAqB,WAAmB,UAAoE;AACxH,MAAI,aAAa,MAAM;AACrB,QAAI,aAAa,WAAW,GAAG,YAAY,EAAE,EAAE;AAC/C,QAAI,CAAC,MAAM,UAAU,GAAG;AACtB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ,WAAW,WAAW,QAAQ,CAAC,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF,WAAW,aAAa,OAAO;AAC7B,UAAM,WAAW,SAAS,GAAG,YAAY,EAAE,EAAE;AAC7C,QAAI,CAAC,MAAM,QAAQ,GAAG;AACpB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACX;;;ADlFA,SAAS,aAAa,cAA+B,WAAqC;AACxF,MAAI,CAAC,gBAAgB,CAAC,WAAW;AAC/B,WAAO;AAAA,EACT;AACA,SAAO,aAAa,QAAQ,UAAU,QAAQ,aAAa,WAAW,UAAU;AAClF;AAMO,SAAS,+BACd,aACA,uBACA,aACU;AACV,MAAI,CAAC,YAAa,QAAO,CAAC;AAE1B,QAAM,iBAAiB,qBAAqB,YAAY,QAAQ,YAAY,IAAI;AAChF,QAAM,eAAe,CAAC;AAEtB,aAAW,CAAC,WAAW,KAAK,KAAK,OAAO,QAAQ,qBAAqB,GAAG;AAEtE,UAAM,kBAAkB,eAAe,SAAS;AAChD,QAAI,aAAa,aAAa,eAAe,KAAM,kBAAkB,aAAa,gBAAgB,eAAe,GAAI;AACnH,YACG,OAAO,CAAC,SAAkC,KAAK,WAAW,SAAS,WAAW,CAAC,EAC/E,QAAQ,CAAC,SAAS,aAAa,KAAK,KAAK,IAAI,CAAC;AAAA,IACnD;AAAA,EACF;AACA,SAAO;AACT;",
+  "sources": ["../../src/utils/styling-hook-utils.ts"],
+  "sourcesContent": ["import type { ValueToStylingHookEntry, ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata/next';\nimport { ParsedUnitValue, parseUnitValue, toAlternateUnitValue } from './value-utils';\n\nfunction isValueMatch(valueToMatch: ParsedUnitValue, sldsValue: ParsedUnitValue): boolean {\n  if (!valueToMatch || !sldsValue) {\n    return false;\n  }\n  return valueToMatch.unit == sldsValue.unit && valueToMatch.value === sldsValue.value;\n}\n\n/**\n * Check if a parsed value is a keyword (string) rather than a numeric value\n */\nfunction isKeywordValue(parsedValue: ParsedUnitValue): parsedValue is { value: string; unit: null } {\n  return parsedValue !== null && typeof parsedValue.value === 'string';\n}\n\n/**\n * Get styling hooks for a density value using structured data from CSS AST\n * Eliminates regex parsing by accepting pre-parsed dimension data\n */\nexport function getStylingHooksForDensityValue(\n  parsedValue: ParsedUnitValue,\n  supportedStylinghooks: ValueToStylingHooksMapping,\n  cssProperty: string\n): string[] {\n  if (!parsedValue) return [];\n  \n  const matchedHooks: string[] = [];\n\n  // Handle keyword values (e.g., 'bold', 'normal') with direct string match\n  if (isKeywordValue(parsedValue)) {\n    const keywordLower = parsedValue.value.toLowerCase();\n    for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {\n      if (sldsValue.toLowerCase() === keywordLower) {\n        hooks\n          .filter((hook: ValueToStylingHookEntry) => hook.properties.includes(cssProperty))\n          .forEach((hook) => matchedHooks.push(hook.name));\n      }\n    }\n    return matchedHooks;\n  }\n\n  // Handle numeric values with unit conversion\n  const alternateValue = typeof parsedValue.value === 'number' \n    ? toAlternateUnitValue(parsedValue.value, parsedValue.unit)\n    : null;\n\n  for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {\n    const parsedSldsValue = parseUnitValue(sldsValue);\n    if (isValueMatch(parsedValue, parsedSldsValue) || (alternateValue && isValueMatch(alternateValue, parsedSldsValue))) {\n      hooks\n        .filter((hook: ValueToStylingHookEntry) => hook.properties.includes(cssProperty))\n        .forEach((hook) => matchedHooks.push(hook.name));\n    }\n  }\n  return matchedHooks;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAAsE;AAEtE,SAAS,aAAa,cAA+B,WAAqC;AACxF,MAAI,CAAC,gBAAgB,CAAC,WAAW;AAC/B,WAAO;AAAA,EACT;AACA,SAAO,aAAa,QAAQ,UAAU,QAAQ,aAAa,UAAU,UAAU;AACjF;AAKA,SAAS,eAAe,aAA4E;AAClG,SAAO,gBAAgB,QAAQ,OAAO,YAAY,UAAU;AAC9D;AAMO,SAAS,+BACd,aACA,uBACA,aACU;AACV,MAAI,CAAC,YAAa,QAAO,CAAC;AAE1B,QAAM,eAAyB,CAAC;AAGhC,MAAI,eAAe,WAAW,GAAG;AAC/B,UAAM,eAAe,YAAY,MAAM,YAAY;AACnD,eAAW,CAAC,WAAW,KAAK,KAAK,OAAO,QAAQ,qBAAqB,GAAG;AACtE,UAAI,UAAU,YAAY,MAAM,cAAc;AAC5C,cACG,OAAO,CAAC,SAAkC,KAAK,WAAW,SAAS,WAAW,CAAC,EAC/E,QAAQ,CAAC,SAAS,aAAa,KAAK,KAAK,IAAI,CAAC;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAGA,QAAM,iBAAiB,OAAO,YAAY,UAAU,eAChD,yCAAqB,YAAY,OAAO,YAAY,IAAI,IACxD;AAEJ,aAAW,CAAC,WAAW,KAAK,KAAK,OAAO,QAAQ,qBAAqB,GAAG;AACtE,UAAM,sBAAkB,mCAAe,SAAS;AAChD,QAAI,aAAa,aAAa,eAAe,KAAM,kBAAkB,aAAa,gBAAgB,eAAe,GAAI;AACnH,YACG,OAAO,CAAC,SAAkC,KAAK,WAAW,SAAS,WAAW,CAAC,EAC/E,QAAQ,CAAC,SAAS,aAAa,KAAK,KAAK,IAAI,CAAC;AAAA,IACnD;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/build/{src/utils → utils}/value-utils.d.ts

@@ -35,7 +35,7 @@ export declare function isGlobalValue(value: string): boolean;
 export declare const ALLOWED_UNITS: string[];
 export type ParsedUnitValue = {
     unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;
-    number: number;
+    value: number | string;
 } | null;
-export declare function parseUnitValue(value: string): ParsedUnitValue;
+export declare function parseUnitValue(valueStr: string): ParsedUnitValue;
 export declare function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue;

package/build/utils/value-utils.js

@@ -29,16 +29,16 @@ function isGlobalValue(value) {
   return value === "initial" || value === "inherit" || value === "unset" || value === "revert" || value === "revert-layer";
 }
 var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
-function parseUnitValue(value) {
-  if (!value) return null;
+function parseUnitValue(valueStr) {
+  if (!valueStr) return null;
   const unitsPattern = ALLOWED_UNITS.join("|");
   const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
-  const match = value.match(regex);
+  const match = valueStr.match(regex);
   if (!match) return null;
-  const number = parseFloat(match[1]);
+  const numValue = parseFloat(match[1]);
   const unit = match[2] ? match[2] : null;
-  if (isNaN(number)) return null;
-  return { number, unit };
+  if (isNaN(numValue)) return null;
+  return { value: numValue, unit };
 }
 function toAlternateUnitValue(numberVal, unitType) {
   if (unitType === "px") {
@@ -46,7 +46,7 @@ function toAlternateUnitValue(numberVal, unitType) {
     if (!isNaN(floatValue)) {
       return {
         unit: "rem",
-        number: parseFloat(floatValue.toFixed(4))
+        value: parseFloat(floatValue.toFixed(4))
       };
     }
   } else if (unitType === "rem") {
@@ -54,7 +54,7 @@ function toAlternateUnitValue(numberVal, unitType) {
     if (!isNaN(intValue)) {
       return {
         unit: "px",
-        number: intValue
+        value: intValue
       };
     }
   }

package/build/utils/value-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/value-utils.ts"],
-  "sourcesContent": ["// Simplified value parsing\n\n/**\n * Checks if a value is a CSS global value.\n *\n * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:\n * - initial: Resets the property to its initial value as defined by the CSS specification.\n * - inherit: Inherits the value from the parent element.\n * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.\n * - revert: Rolls back the property to the value established by the user-agent or user styles.\n * - revert-layer: Rolls back the property to the value established by the previous cascade layer.\n *\n * All CSS properties accept these global values, including but not limited to:\n *   - color\n *   - background\n *   - font-size\n *   - margin\n *   - padding\n *   - border\n *   - display\n *   - position\n *   - z-index\n *   - and many more\n *\n * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.\n *\n * @param value The CSS value to check.\n * @returns True if the value is a CSS global value, false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer\n */\nexport function isGlobalValue(value: string): boolean {\n    return value === 'initial' || value === 'inherit' || value === 'unset' || value === 'revert' || value === 'revert-layer';\n  }\n\n// Configurable list of allowed CSS units\nexport const ALLOWED_UNITS = ['px', 'em', 'rem', '%', 'ch'];\n\nexport type ParsedUnitValue = {\n  unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;\n  number: number;\n} | null;\n\nexport function parseUnitValue(value: string): ParsedUnitValue {\n  if (!value) return null;\n  \n  // Create regex pattern from allowed units\n  const unitsPattern = ALLOWED_UNITS.join('|');\n  const regex = new RegExp(`^(-?\\\\d*\\\\.?\\\\d+)(${unitsPattern})?$`);\n  const match = value.match(regex);\n  if (!match) return null;\n  \n  const number = parseFloat(match[1]);\n  const unit = match[2] ? (match[2] as 'px' | 'rem' | '%' | 'em' | 'ch') : null; // Keep unitless values as null\n  \n  if (isNaN(number)) return null;\n  \n  return { number, unit };\n}\n\nexport function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue {\n    if (unitType === 'px') {\n      let floatValue = parseFloat(`${numberVal / 16}`);\n      if (!isNaN(floatValue)) {\n        return {\n          unit: 'rem',\n          number: parseFloat(floatValue.toFixed(4))\n        }\n      }\n    } else if (unitType === 'rem') {\n      const intValue = parseInt(`${numberVal * 16}`);\n      if (!isNaN(intValue)) {\n        return {\n          unit: 'px',\n          number: intValue\n        }\n      }\n    }\n    // For other units (%, em, ch) and unitless values, no alternate unit conversion available\n    // These units are context-dependent and don't have standard conversion ratios\n    return null;\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCO,SAAS,cAAc,OAAwB;AAClD,SAAO,UAAU,aAAa,UAAU,aAAa,UAAU,WAAW,UAAU,YAAY,UAAU;AAC5G;AAGK,IAAM,gBAAgB,CAAC,MAAM,MAAM,OAAO,KAAK,IAAI;AAOnD,SAAS,eAAe,OAAgC;AAC7D,MAAI,CAAC,MAAO,QAAO;AAGnB,QAAM,eAAe,cAAc,KAAK,GAAG;AAC3C,QAAM,QAAQ,IAAI,OAAO,qBAAqB,YAAY,KAAK;AAC/D,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,SAAS,WAAW,MAAM,CAAC,CAAC;AAClC,QAAM,OAAO,MAAM,CAAC,IAAK,MAAM,CAAC,IAAyC;AAEzE,MAAI,MAAM,MAAM,EAAG,QAAO;AAE1B,SAAO,EAAE,QAAQ,KAAK;AACxB;AAEO,SAAS,qBAAqB,WAAmB,UAAoE;AACxH,MAAI,aAAa,MAAM;AACrB,QAAI,aAAa,WAAW,GAAG,YAAY,EAAE,EAAE;AAC/C,QAAI,CAAC,MAAM,UAAU,GAAG;AACtB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ,WAAW,WAAW,QAAQ,CAAC,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF,WAAW,aAAa,OAAO;AAC7B,UAAM,WAAW,SAAS,GAAG,YAAY,EAAE,EAAE;AAC7C,QAAI,CAAC,MAAM,QAAQ,GAAG;AACpB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACX;",
+  "sourcesContent": ["// Simplified value parsing\n\n/**\n * Checks if a value is a CSS global value.\n *\n * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:\n * - initial: Resets the property to its initial value as defined by the CSS specification.\n * - inherit: Inherits the value from the parent element.\n * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.\n * - revert: Rolls back the property to the value established by the user-agent or user styles.\n * - revert-layer: Rolls back the property to the value established by the previous cascade layer.\n *\n * All CSS properties accept these global values, including but not limited to:\n *   - color\n *   - background\n *   - font-size\n *   - margin\n *   - padding\n *   - border\n *   - display\n *   - position\n *   - z-index\n *   - and many more\n *\n * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.\n *\n * @param value The CSS value to check.\n * @returns True if the value is a CSS global value, false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer\n */\nexport function isGlobalValue(value: string): boolean {\n    return value === 'initial' || value === 'inherit' || value === 'unset' || value === 'revert' || value === 'revert-layer';\n  }\n\n// Configurable list of allowed CSS units\nexport const ALLOWED_UNITS = ['px', 'em', 'rem', '%', 'ch'];\n\nexport type ParsedUnitValue = {\n  unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;\n  value: number | string;  // string for keyword values like 'bold', 'normal'\n} | null;\n\nexport function parseUnitValue(valueStr: string): ParsedUnitValue {\n  if (!valueStr) return null;\n  \n  // Create regex pattern from allowed units\n  const unitsPattern = ALLOWED_UNITS.join('|');\n  const regex = new RegExp(`^(-?\\\\d*\\\\.?\\\\d+)(${unitsPattern})?$`);\n  const match = valueStr.match(regex);\n  if (!match) return null;\n  \n  const numValue = parseFloat(match[1]);\n  const unit = match[2] ? (match[2] as 'px' | 'rem' | '%' | 'em' | 'ch') : null; // Keep unitless values as null\n  \n  if (isNaN(numValue)) return null;\n  \n  return { value: numValue, unit };\n}\n\nexport function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue {\n    if (unitType === 'px') {\n      let floatValue = parseFloat(`${numberVal / 16}`);\n      if (!isNaN(floatValue)) {\n        return {\n          unit: 'rem',\n          value: parseFloat(floatValue.toFixed(4))\n        }\n      }\n    } else if (unitType === 'rem') {\n      const intValue = parseInt(`${numberVal * 16}`);\n      if (!isNaN(intValue)) {\n        return {\n          unit: 'px',\n          value: intValue\n        }\n      }\n    }\n    // For other units (%, em, ch) and unitless values, no alternate unit conversion available\n    // These units are context-dependent and don't have standard conversion ratios\n    return null;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCO,SAAS,cAAc,OAAwB;AAClD,SAAO,UAAU,aAAa,UAAU,aAAa,UAAU,WAAW,UAAU,YAAY,UAAU;AAC5G;AAGK,IAAM,gBAAgB,CAAC,MAAM,MAAM,OAAO,KAAK,IAAI;AAOnD,SAAS,eAAe,UAAmC;AAChE,MAAI,CAAC,SAAU,QAAO;AAGtB,QAAM,eAAe,cAAc,KAAK,GAAG;AAC3C,QAAM,QAAQ,IAAI,OAAO,qBAAqB,YAAY,KAAK;AAC/D,QAAM,QAAQ,SAAS,MAAM,KAAK;AAClC,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,WAAW,WAAW,MAAM,CAAC,CAAC;AACpC,QAAM,OAAO,MAAM,CAAC,IAAK,MAAM,CAAC,IAAyC;AAEzE,MAAI,MAAM,QAAQ,EAAG,QAAO;AAE5B,SAAO,EAAE,OAAO,UAAU,KAAK;AACjC;AAEO,SAAS,qBAAqB,WAAmB,UAAoE;AACxH,MAAI,aAAa,MAAM;AACrB,QAAI,aAAa,WAAW,GAAG,YAAY,EAAE,EAAE;AAC/C,QAAI,CAAC,MAAM,UAAU,GAAG;AACtB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,WAAW,WAAW,QAAQ,CAAC,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,EACF,WAAW,aAAa,OAAO;AAC7B,UAAM,WAAW,SAAS,GAAG,YAAY,EAAE,EAAE;AAC7C,QAAI,CAAC,MAAM,QAAQ,GAAG;AACpB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACX;",
   "names": []
 }

package/package.json

@@ -1,25 +1,20 @@
 {
   "name": "@salesforce-ux/eslint-plugin-slds",
-  "version": "1.0.8-internal",
+  "version": "1.0.9-internal",
   "main": "build/index.js",
   "exports": {
     ".": {
       "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
+      "default": "./build/index.js"
     },
-    "./config": {
-      "import": "./eslint.config.mjs",
-      "require": "./eslint.config.mjs"
-    },
-    "./rule-messages.yml": "./src/config/rule-messages.yml"
+    "./config": "./eslint.config.mjs",
+    "./rule-messages": "./build/config/rule-messages.js"
   },
   "files": [
     "build/**",
     "README.md",
     "RULES.md",
-    "eslint.config.mjs",
-    "src/config/rule-messages.yml"
+    "eslint.config.mjs"
   ],
   "engines": {
     "node": ">=18.18.0"

package/src/config/rule-messages.yml

@@ -1,143 +0,0 @@
-# ESLint Rule Messages - Complete Configuration
-# This file contains all rule metadata: descriptions, documentation URLs, user-facing messages etc.
-
-# =============================================================================
-# CSS Rules (ESLint v9 with @eslint/css)
-# =============================================================================
-
-no-slds-class-overrides:
-  description: "Create new custom CSS classes instead of overriding SLDS selectors"
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-class-overrides"
-  type: "problem"
-  messages:
-    sldsClassOverride: "Overriding .{{className}} isn't supported. To differentiate SLDS and custom classes, create a CSS class in your namespace. Examples: myapp-input, myapp-button."
-
-no-deprecated-slds-classes:
-  description: "Please replace the deprecated classes with a modern equivalent"
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-slds-classes"
-  type: "problem"
-  messages:
-    deprecatedClass: "The class {{className}} is deprecated and not available in SLDS2. Please update to a supported class."
-
-no-deprecated-tokens-slds1:
-  description: "Update outdated design tokens to SLDS 2 styling hooks with similar values. For more information, see Styling Hooks on lightningdesignsystem.com."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-tokens-slds1"
-  type: "problem"
-  messages:
-    deprecatedToken: "Consider removing {{oldValue}} or replacing it with {{newValue}}. Set the fallback to {{oldValue}}. For more info, see Styling Hooks on lightningdesignsystem.com."
-    noReplacement: "Update outdated design tokens to SLDS 2 styling hooks with similar values. For more information, see Styling Hooks on lightningdesignsystem.com."
-
-enforce-sds-to-slds-hooks:
-  description: "Convert your existing --sds styling hooks to --slds styling hooks. See lightningdesignsystem.com for more info."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-sds-to-slds-hooks"
-  type: "problem"
-  messages:
-    replaceSdsWithSlds: "Replace {{oldValue}} with {{suggestedMatch}} styling hook."
-  
-# =============================================================================
-# HTML/Component Rules (ESLint v8 & v9)
-# =============================================================================
-
-enforce-bem-usage:
-  description: "Replace BEM double-dash syntax in class names with single underscore syntax"
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-bem-usage"
-  type: "problem"
-  messages:
-    bemDoubleDash: "{{actual}} has been retired. Update it to the new name {{newValue}}."
-    fixBemNaming: "Update to correct BEM naming convention"
-
-modal-close-button-issue:
-  description: "Update component attributes or CSS classes for the modal close button to comply with the modal component blueprint"
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#modal-close-button-issue"
-  type: "problem"
-  messages:
-    modalCloseButtonIssue: "Update component attributes or CSS classes for the modal close button to comply with the modal component blueprint."
-    removeClass: "Remove the slds-button_icon-inverse class from the modal close button in components that use the SLDS modal blueprint."
-    changeVariant: "Change the variant attribute value from bare-inverse to bare in <lightning-button-icon> or <lightning-icon>."
-    removeVariant: "Remove the variant attribute from the <lightning-icon> component inside the <button> element."
-    ensureButtonClasses: "Add or move slds-button and slds-button_icon to the class attribute of the <button> element or <lightning-button-icon> component."
-    ensureSizeAttribute: "To size icons properly, set the size attribute ‌to large in the <lightning-icon> and <lightning-button-icon> components."
-
-no-deprecated-classes-slds2:
-  description: "Replace classes that aren't available with SLDS 2 classes"
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-classes-slds2"
-  type: "problem"
-  messages:
-    deprecatedClass: "The class {{className}} isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information."
-    updateToModernClass: "Replace deprecated class with modern equivalent"
-    checkDocumentation: "See lightningdesignsystem.com for SLDS 2 class alternatives"
-
-lwc-token-to-slds-hook:
-  description: "Replace the deprecated --lwc tokens with the latest --slds tokens. See lightningdesignsystem.com for more info."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#lwc-token-to-slds-hook"
-  type: "problem"
-  messages:
-    errorWithReplacement: "The '{{oldValue}}' design token is deprecated. Replace it with '{{newValue}}'. For more info, see Global Styling Hooks on lightningdesignsystem.com."
-    errorWithStyleHooks: "The '{{oldValue}}' design token is deprecated. Replace it with the SLDS 2 '{{newValue}}' styling hook and set the fallback to '{{oldValue}}'. For more info, see Global Styling Hooks on lightningdesignsystem.com."
-    errorWithNoRecommendation: "The '{{oldValue}}' design token is deprecated. For more info, see the New Global Styling Hook Guidance on lightningdesignsystem.com."
-
-no-sldshook-fallback-for-lwctoken:
-  description: "Avoid using --slds styling hooks as fallback values for --lwc tokens."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-sldshook-fallback-for-lwctoken"
-  type: "problem"
-  messages:
-    unsupportedFallback: "Remove the {{sldsToken}} styling hook that is used as a fallback value for {{lwcToken}}."
-
-no-unsupported-hooks-slds2:
-  description: "Identifies styling hooks that aren't present in SLDS 2. They must be replaced with styling hooks that have a similar effect, or they must be removed."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-unsupported-hooks-slds2"
-  type: "problem"
-  messages:
-    deprecated: "The {{token}} styling hook isn't present in SLDS 2 and there's no equivalent replacement. Remove it or replace it with a styling hook with a similar effect."
-
-no-slds-var-without-fallback:
-  description: "Add fallback values to SLDS styling hooks. The fallback values are used in Salesforce environments where styling hooks are unavailable."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-var-without-fallback"
-  type: "problem"
-  messages:
-    varWithoutFallback: "Your code uses the {{cssVar}} styling hook without a fallback value. Styling hooks are unavailable in some Salesforce environments. To render your component correctly in all environments, add this fallback value: var({{cssVar}}, {{recommendation}}). To make this fallback value brand-aware, use a branded design token instead of a static value. See Design Tokens on v1.lightningdesignsystem.com."
-
-no-slds-namespace-for-custom-hooks:
-  description: "To differentiate custom styling hooks from SLDS styling hooks, create custom styling hooks in your namespace."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-namespace-for-custom-hooks"
-  type: "problem"
-  messages:
-    customHookNamespace: "Using the --slds namespace for {{token}} isn't supported. Create the custom styling hook in your namespace. Example: --myapp-{{tokenWithoutNamespace}}"
-
-no-slds-private-var:
-  description: "Some SLDS styling hooks are private and reserved only for internal Salesforce use. Private SLDS styling hooks have prefixes --_slds- and --slds-s-. For more information, look up private CSS in lightningdesignsystem.com."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-private-var"
-  type: "problem"
-  messages:
-    privateVar: "This styling hook is reserved for internal Salesforce use. Remove the --_slds- or –slds-s private variable within selector {{prop}}. For more information, look up private CSS in lightningdesignsystem.com."
-
-enforce-component-hook-naming-convention:
-  description: "Replace component styling hooks that use a deprecated naming convention."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-component-hook-naming-convention"
-  type: "problem"
-  messages:
-    replace: "Replace the deprecated {{oldValue}} component styling hook with {{suggestedMatch}}."
-
-no-hardcoded-values-slds1:
-  description: "Replace static values with SLDS 1 design tokens. For more information, look up design tokens on lightningdesignsystem.com."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-hardcoded-value"
-  type: "suggestion"
-  messages:
-    hardcodedValue: "Replace the {{oldValue}} static value with an SLDS 1 styling hook: {{newValue}}."
-    noReplacement: "There's no replacement styling hook for the {{oldValue}} static value. Remove the static value."
-
-no-hardcoded-values-slds2:
-  description: "Replace static values with SLDS 2 styling hooks. For more information, look up design tokens on lightningdesignsystem.com."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-hardcoded-values-slds2"
-  type: "suggestion"
-  messages:
-    hardcodedValue: "Consider replacing the {{oldValue}} static value with an SLDS 2 styling hook that has a similar value: {{newValue}}."
-    noReplacement: "There's no replacement styling hook for the {{oldValue}} static value. Remove the static value."
-
-reduce-annotations:
-  description: "Remove your annotations and update your code."
-  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#reduce-annotations"
-  type: "problem"
-  messages:
-    removeAnnotation: "Remove this annotation and update the code to SLDS best practices. For help, file an issue at https://github.com/salesforce-ux/slds-linter/"
-