@salesforce-ux/eslint-plugin-slds 1.0.0 → 1.0.2-internal

package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js

@@ -167,7 +167,7 @@ var require_rule_messages = __commonJS({
       },
       "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-value",
+        "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}}.",
@@ -192,7 +192,7 @@ __export(no_hardcoded_values_slds2_exports, {
   default: () => no_hardcoded_values_slds2_default
 });
 module.exports = __toCommonJS(no_hardcoded_values_slds2_exports);
-var import_sds_metadata = __toESM(require("@salesforce-ux/sds-metadata"));
+var import_next = __toESM(require("@salesforce-ux/sds-metadata/next"));
 var import_rule_messages = __toESM(require_rule_messages());
 
 // src/utils/color-lib-utils.ts
@@ -378,7 +378,7 @@ function toSelector(properties) {
   const selectorParts = properties.map((prop) => {
     if (prop.includes("*")) {
       const regexPattern = prop.replace(/\*/g, ".*");
-      return `Declaration[property=/${regexPattern}$/]`;
+      return `Declaration[property=/^${regexPattern}$/]`;
     } else {
       return `Declaration[property='${prop}']`;
     }
@@ -409,6 +409,42 @@ function resolvePropertyToMatch(cssProperty) {
 
 // src/utils/hardcoded-shared-utils.ts
 var import_css_tree2 = require("@eslint/css-tree");
+
+// 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/hardcoded-shared-utils.ts
 var FONT_WEIGHTS = [
   "normal",
   "bold",
@@ -518,7 +554,7 @@ function extractDimensionValue(valueNode, cssProperty) {
       const numValue = Number(valueNode.value);
       if (numValue === 0) return null;
       const unit = valueNode.unit.toLowerCase();
-      if (unit !== "px" && unit !== "rem" && unit !== "%") return null;
+      if (!ALLOWED_UNITS.includes(unit)) return null;
       return {
         number: numValue,
         unit
@@ -560,7 +596,7 @@ function extractFontValue(node) {
       const numValue = Number(node.value);
       if (numValue <= 0) return null;
       const unit = node.unit.toLowerCase();
-      if (unit !== "px" && unit !== "rem" && unit !== "%") return null;
+      if (!ALLOWED_UNITS.includes(unit)) return null;
       return {
         number: numValue,
         unit
@@ -605,6 +641,14 @@ function forEachFontValue(valueText, callback) {
   forEachValue(valueText, extractFontValue, shouldSkipFontNode, callback);
 }
 
+// src/utils/css-utils.ts
+function formatSuggestionHooks(hooks) {
+  if (hooks.length === 1) {
+    return `${hooks[0]}`;
+  }
+  return "\n" + hooks.map((hook, index) => `${index + 1}. ${hook}`).join("\n");
+}
+
 // src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts
 var handleColorDeclaration = (node, context) => {
   const cssProperty = node.property.toLowerCase();
@@ -647,9 +691,8 @@ function createColorReplacement(colorValue, cssProperty, context, positionInfo,
       end,
       replacement: originalValue,
       // Use original value to preserve spacing
-      displayValue: closestHooks.join(", "),
+      displayValue: formatSuggestionHooks(closestHooks),
       hasHook: true
-      // ← THE FIX: Multiple hooks still means "has hooks"
     };
   } else {
     return {
@@ -663,37 +706,6 @@ function createColorReplacement(colorValue, cssProperty, context, positionInfo,
   }
 }
 
-// src/utils/value-utils.ts
-function parseUnitValue(value) {
-  if (!value) return null;
-  const match = value.match(/^(-?\d*\.?\d+)(px|rem|%)?$/);
-  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
 function isValueMatch(valueToMatch, sldsValue) {
   if (!valueToMatch || !sldsValue) {
@@ -751,7 +763,7 @@ function createDimensionReplacement(parsedDimension, cssProperty, context, posit
       start,
       end,
       replacement: rawValue,
-      displayValue: closestHooks.join(", "),
+      displayValue: formatSuggestionHooks(closestHooks),
       hasHook: true
     };
   } else {
@@ -818,7 +830,7 @@ function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
       start,
       end,
       replacement: rawValue,
-      displayValue: closestHooks.join(", "),
+      displayValue: formatSuggestionHooks(closestHooks),
       hasHook: true
     };
   } else {
@@ -945,59 +957,51 @@ function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
 }
 
 // src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
-function containsCssVariable(valueText) {
-  return valueText.includes("var(");
-}
-var handleBoxShadowDeclaration = (node, context) => {
-  const cssProperty = node.property.toLowerCase();
-  const valueText = context.sourceCode.getText(node.value);
-  if (containsCssVariable(valueText)) {
-    return;
-  }
-  const replacements = [];
-  const parsedCssValue = parseAndValidateBoxShadow(valueText);
-  if (parsedCssValue) {
-    const shadowHooks = getBoxShadowHooks(context.valueToStylinghook);
-    const closestHooks = findMatchingBoxShadowHooks(parsedCssValue, shadowHooks);
-    const positionInfo = {
-      start: { offset: 0, line: 1, column: 1 },
-      end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
-    };
-    const replacement = createBoxShadowReplacement(
-      valueText,
-      closestHooks,
-      context,
-      positionInfo
-    );
-    if (replacement) {
-      replacements.push(replacement);
-    }
+function toBoxShadowValue(cssValue) {
+  const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
+  if (parsedCssValue.length === 0) {
+    return null;
   }
-  handleShorthandAutoFix(node, context, valueText, replacements);
-};
-function getBoxShadowHooks(supportedStylinghooks) {
+  return parsedCssValue;
+}
+function shadowValueToHookEntries(supportedStylinghooks) {
   return Object.entries(supportedStylinghooks).filter(([key, value]) => {
     return value.some((hook) => hook.properties.includes("box-shadow"));
   }).map(([key, value]) => {
     return [key, value.map((hook) => hook.name)];
   });
 }
-function parseAndValidateBoxShadow(cssValue) {
-  const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
-  if (parsedCssValue.length === 0) {
-    return null;
+var handleBoxShadowDeclaration = (node, context) => {
+  const cssProperty = node.property.toLowerCase();
+  const valueText = context.sourceCode.getText(node.value);
+  const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);
+  const parsedCssValue = toBoxShadowValue(valueText);
+  if (!parsedCssValue) {
+    return;
   }
-  return parsedCssValue;
-}
-function findMatchingBoxShadowHooks(parsedCssValue, shadowHooks) {
-  for (const [shadowHookValue, closestHooks] of shadowHooks) {
-    const parsedHookValue = parseAndValidateBoxShadow(shadowHookValue);
-    if (parsedHookValue && isBoxShadowMatch(parsedCssValue, parsedHookValue)) {
-      return closestHooks;
+  for (const [shadow, closestHooks] of shadowHooks) {
+    const parsedValueHook = toBoxShadowValue(shadow);
+    if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {
+      if (closestHooks.length > 0) {
+        const positionInfo = {
+          start: { offset: 0, line: 1, column: 1 },
+          end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
+        };
+        const replacement = createBoxShadowReplacement(
+          valueText,
+          closestHooks,
+          context,
+          positionInfo
+        );
+        if (replacement) {
+          const replacements = [replacement];
+          handleShorthandAutoFix(node, context, valueText, replacements);
+        }
+      }
+      return;
     }
   }
-  return [];
-}
+};
 function createBoxShadowReplacement(originalValue, hooks, context, positionInfo) {
   if (!positionInfo?.start) {
     return null;
@@ -1012,21 +1016,13 @@ function createBoxShadowReplacement(originalValue, hooks, context, positionInfo)
       displayValue: hooks[0],
       hasHook: true
     };
-  } else if (hooks.length > 1) {
-    return {
-      start,
-      end,
-      replacement: originalValue,
-      displayValue: hooks.join(", "),
-      hasHook: true
-    };
   } else {
     return {
       start,
       end,
       replacement: originalValue,
-      displayValue: originalValue,
-      hasHook: false
+      displayValue: formatSuggestionHooks(hooks),
+      hasHook: true
     };
   }
 }
@@ -1127,7 +1123,7 @@ function defineNoHardcodedValueRule(config) {
 var ruleName = "no-hardcoded-values-slds2";
 var ruleConfig = import_rule_messages.default[ruleName];
 var { type, description, url, messages } = ruleConfig;
-var valueToStylinghook = import_sds_metadata.default.valueToStylingHooksCosmos;
+var valueToStylinghook = import_next.default.valueToStylingHooksCosmos;
 var no_hardcoded_values_slds2_default = defineNoHardcodedValueRule({
   ruleConfig,
   valueToStylinghook,