@salesforce-ux/eslint-plugin-slds 1.0.6-internal → 1.0.7-internal

package/build/index.js

@@ -780,7 +780,11 @@ function isCssColorFunction(value) {
 }
 
 // src/utils/color-lib-utils.ts
-var DELTAE_THRESHOLD = 10;
+var LAB_THRESHOLD = 25;
+var isHexCode = (color) => {
+  const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+  return hexPattern.test(color);
+};
 var convertToHex = (color) => {
   try {
     return (0, import_chroma_js.default)(color).hex();
@@ -788,40 +792,52 @@ var convertToHex = (color) => {
     return null;
   }
 };
-var isHookPropertyMatch = (hook, cssProperty) => {
-  return hook.properties.includes(cssProperty) || hook.properties.includes("*");
-};
-function getOrderByCssProp(cssProperty) {
-  if (cssProperty === "color" || cssProperty === "fill") {
-    return ["surface", "theme", "feedback", "reference"];
-  } else if (cssProperty.match(/background/)) {
-    return ["surface", "surface-inverse", "theme", "feedback", "reference"];
-  } else if (cssProperty.match(/border/) || cssProperty.match(/outline/) || cssProperty.match(/stroke/)) {
-    return ["borders", "borders-inverse", "feedback", "theme", "reference"];
-  }
-  return ["surface", "surface-inverse", "borders", "borders-inverse", "theme", "feedback", "reference"];
-}
 var findClosestColorHook = (color, supportedColors, cssProperty) => {
-  const closestHooks = [];
+  const returnStylingHooks = [];
+  const closestHooksWithSameProperty = [];
+  const closestHooksWithoutSameProperty = [];
+  const closestHooksWithAllProperty = [];
+  const labColor = (0, import_chroma_js.default)(color).lab();
   Object.entries(supportedColors).forEach(([sldsValue, data]) => {
-    if (sldsValue && isValidColor(sldsValue)) {
+    if (sldsValue && isHexCode(sldsValue)) {
       const hooks = data;
       hooks.forEach((hook) => {
-        const distance = sldsValue.toLowerCase() === color.toLowerCase() ? 0 : import_chroma_js.default.deltaE(sldsValue, color);
-        if (isHookPropertyMatch(hook, cssProperty) && distance <= DELTAE_THRESHOLD) {
-          closestHooks.push({ distance, group: hook.group, name: hook.name });
+        const labSupportedColor = (0, import_chroma_js.default)(sldsValue).lab();
+        const distance = JSON.stringify(labColor) === JSON.stringify(labSupportedColor) ? 0 : import_chroma_js.default.distance(import_chroma_js.default.lab(...labColor), import_chroma_js.default.lab(...labSupportedColor), "lab");
+        if (hook.properties.includes(cssProperty)) {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithSameProperty.push({ name: hook.name, distance });
+          }
+        } else if (hook.properties.includes("*")) {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithAllProperty.push({ name: hook.name, distance });
+          }
+        } else {
+          if (distance <= LAB_THRESHOLD) {
+            closestHooksWithoutSameProperty.push({ name: hook.name, distance });
+          }
         }
       });
     }
   });
-  const hooksByGroupMap = closestHooks.sort((a, b) => a.distance - b.distance).reduce((acc, hook) => {
-    if (!acc[hook.group]) {
-      acc[hook.group] = [];
+  const closesthookGroups = [
+    { hooks: closestHooksWithSameProperty, distance: 0 },
+    { hooks: closestHooksWithAllProperty, distance: 0 },
+    { hooks: closestHooksWithSameProperty, distance: Infinity },
+    // For hooks with distance > 0
+    { hooks: closestHooksWithAllProperty, distance: Infinity },
+    { hooks: closestHooksWithoutSameProperty, distance: Infinity }
+  ];
+  for (const group of closesthookGroups) {
+    const filteredHooks = group.hooks.filter(
+      (h) => group.distance === 0 ? h.distance === 0 : h.distance > 0
+    );
+    if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {
+      filteredHooks.sort((a, b) => a.distance - b.distance);
+      returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));
     }
-    acc[hook.group].push(hook.name);
-    return acc;
-  }, {});
-  return getOrderByCssProp(cssProperty).map((group) => hooksByGroupMap[group] || []).flat().slice(0, 5);
+  }
+  return Array.from(new Set(returnStylingHooks));
 };
 var isValidColor = (val) => import_chroma_js.default.valid(val);
 var extractColorValue = (node) => {
@@ -863,33 +879,13 @@ function isKnownFontWeight(value) {
   return FONT_WEIGHTS.includes(stringValue.toLowerCase());
 }
 function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
-  if (!replacements || replacements.length === 0) {
-    return;
-  }
-  const sortedReplacements = replacements.sort((a, b) => b.start - a.start);
-  const reportNumericValue = context.options?.reportNumericValue || "always";
-  const fixCallback = (start, originalValue, replacement) => {
-    let newValue = valueText;
-    newValue = newValue.substring(0, start) + replacement + newValue.substring(start + originalValue.length);
-    if (newValue !== valueText) {
-      return (fixer) => {
-        return fixer.replaceText(declarationNode.value, newValue);
-      };
-    }
-  };
-  sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook, isNumeric }) => {
+  const sortedReplacements = replacements.sort((a, b) => a.start - b.start);
+  const hasAnyHooks = sortedReplacements.some((r) => r.hasHook);
+  const canAutoFix = hasAnyHooks;
+  sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {
     const originalValue = valueText.substring(start, end);
-    if (isNumeric) {
-      if (reportNumericValue === "never") {
-        return;
-      }
-      if (reportNumericValue === "hasReplacement" && !hasHook) {
-        return;
-      }
-    }
-    const valueColumnStart = declarationNode.value.loc.start.column + start;
-    const valueColumnEnd = valueColumnStart + originalValue.length;
-    const canAutoFix = originalValue !== replacement;
+    const valueStartColumn = declarationNode.value.loc.start.column;
+    const valueColumn = valueStartColumn + start;
     const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
     const reportNode = {
       ...declarationNode.value,
@@ -897,16 +893,23 @@ function handleShorthandAutoFix(declarationNode, context, valueText, replacement
         ...declarationNode.value.loc,
         start: {
           ...locStart,
-          column: valueColumnStart
+          column: valueColumn
         },
         end: {
           ...locEnd,
-          column: valueColumnEnd
+          column: valueColumn + originalValue.length
         }
       }
     };
     if (hasHook) {
-      const fix = canAutoFix ? fixCallback(start, originalValue, replacement) : void 0;
+      const fix = canAutoFix ? (fixer) => {
+        let newValue = valueText;
+        for (let i = sortedReplacements.length - 1; i >= 0; i--) {
+          const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];
+          newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);
+        }
+        return fixer.replaceText(declarationNode.value, newValue);
+      } : void 0;
       context.context.report({
         node: reportNode,
         messageId: "hardcodedValue",
@@ -1787,9 +1790,9 @@ function toSelector(properties) {
   });
   return selectorParts.join(", ");
 }
-function resolveDensityPropertyToMatch(cssProperty) {
+function resolvePropertyToMatch(cssProperty) {
   const propertyToMatch = cssProperty.toLowerCase();
-  if (isOutlineWidthProperty(propertyToMatch) || isBorderWidthProperty(propertyToMatch)) {
+  if (propertyToMatch === "outline" || propertyToMatch === "outline-width" || isBorderWidthProperty(propertyToMatch)) {
     return "border-width";
   } else if (isMarginProperty(propertyToMatch)) {
     return "margin";
@@ -1801,58 +1804,13 @@ function resolveDensityPropertyToMatch(cssProperty) {
     return "width";
   } else if (isInsetProperty(propertyToMatch)) {
     return "top";
-  }
-  return propertyToMatch;
-}
-function resolveColorPropertyToMatch(cssProperty) {
-  const propertyToMatch = cssProperty.toLowerCase();
-  if (propertyToMatch === "outline" || propertyToMatch === "outline-color") {
-    return "border-color";
-  } else if (propertyToMatch === "background" || propertyToMatch === "background-color") {
+  } else if (cssProperty === "background" || cssProperty === "background-color") {
     return "background-color";
-  } else if (isBorderColorProperty(propertyToMatch)) {
+  } else if (cssProperty === "outline" || cssProperty === "outline-color" || isBorderColorProperty(cssProperty)) {
     return "border-color";
   }
   return propertyToMatch;
 }
-function isOutlineWidthProperty(propertyToMatch) {
-  return propertyToMatch === "outline" || propertyToMatch === "outline-width";
-}
-
-// src/utils/custom-mapping-utils.ts
-function matchesPropertyPattern(cssProperty, pattern) {
-  const normalizedProperty = cssProperty.toLowerCase();
-  const normalizedPattern = pattern.toLowerCase();
-  if (normalizedProperty === normalizedPattern) {
-    return true;
-  }
-  if (normalizedPattern.endsWith("*")) {
-    const prefix = normalizedPattern.slice(0, -1);
-    return normalizedProperty.startsWith(prefix);
-  }
-  return false;
-}
-function getCustomMapping(cssProperty, value, customMapping) {
-  if (!customMapping) {
-    return null;
-  }
-  const normalizedValue = value.toLowerCase().trim();
-  for (const [hookName, config] of Object.entries(customMapping)) {
-    const propertyMatches = config.properties.some(
-      (pattern) => matchesPropertyPattern(cssProperty, pattern)
-    );
-    if (!propertyMatches) {
-      continue;
-    }
-    const valueMatches = config.values.some(
-      (configValue) => configValue.toLowerCase().trim() === normalizedValue
-    );
-    if (valueMatches) {
-      return hookName;
-    }
-  }
-  return null;
-}
 
 // src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts
 var handleColorDeclaration = (node, context) => {
@@ -1877,32 +1835,24 @@ function createColorReplacement(colorValue, cssProperty, context, positionInfo,
   if (!hexValue) {
     return null;
   }
+  const propToMatch = resolvePropertyToMatch(cssProperty);
+  const closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);
   const start = positionInfo.start.offset;
   const end = positionInfo.end.offset;
   const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;
-  const customHook = getCustomMapping(cssProperty, colorValue, context.options?.customMapping);
-  let closestHooks = [];
-  if (customHook) {
-    closestHooks = [customHook];
-  } else {
-    const propToMatch = resolveColorPropertyToMatch(cssProperty);
-    closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);
-  }
-  let replacement = originalValue;
-  let paletteHook = null;
-  if (context.options?.preferPaletteHook && closestHooks.length > 1) {
-    paletteHook = closestHooks.filter((hook) => hook.includes("-palette-"))[0];
-  }
-  if (paletteHook) {
-    replacement = `var(${paletteHook}, ${colorValue})`;
-  } else if (closestHooks.length === 1) {
-    replacement = `var(${closestHooks[0]}, ${colorValue})`;
-  }
-  if (closestHooks.length > 0) {
+  if (closestHooks.length === 1) {
     return {
       start,
       end,
-      replacement,
+      replacement: `var(${closestHooks[0]}, ${colorValue})`,
+      displayValue: closestHooks[0],
+      hasHook: true
+    };
+  } else if (closestHooks.length > 1) {
+    return {
+      start,
+      end,
+      replacement: originalValue,
       // Use original value to preserve spacing
       displayValue: formatSuggestionHooks(closestHooks),
       hasHook: true
@@ -1911,7 +1861,7 @@ function createColorReplacement(colorValue, cssProperty, context, positionInfo,
     return {
       start,
       end,
-      replacement,
+      replacement: originalValue,
       // Use original value to preserve spacing
       displayValue: originalValue,
       hasHook: false
@@ -1959,14 +1909,8 @@ function createDimensionReplacement(parsedDimension, cssProperty, context, posit
     return null;
   }
   const rawValue = parsedDimension.unit ? `${parsedDimension.number}${parsedDimension.unit}` : parsedDimension.number.toString();
-  const customHook = getCustomMapping(cssProperty, rawValue, context.options?.customMapping);
-  let closestHooks = [];
-  if (customHook) {
-    closestHooks = [customHook];
-  } else {
-    const propToMatch = resolveDensityPropertyToMatch(cssProperty);
-    closestHooks = getStylingHooksForDensityValue(parsedDimension, context.valueToStylinghook, propToMatch);
-  }
+  const propToMatch = resolvePropertyToMatch(cssProperty);
+  const closestHooks = getStylingHooksForDensityValue(parsedDimension, context.valueToStylinghook, propToMatch);
   const start = positionInfo.start.offset;
   const end = positionInfo.end.offset;
   if (closestHooks.length === 1) {
@@ -1975,8 +1919,7 @@ function createDimensionReplacement(parsedDimension, cssProperty, context, posit
       end,
       replacement: `var(${closestHooks[0]}, ${rawValue})`,
       displayValue: closestHooks[0],
-      hasHook: true,
-      isNumeric: true
+      hasHook: true
     };
   } else if (closestHooks.length > 1) {
     return {
@@ -1984,8 +1927,7 @@ function createDimensionReplacement(parsedDimension, cssProperty, context, posit
       end,
       replacement: rawValue,
       displayValue: formatSuggestionHooks(closestHooks),
-      hasHook: true,
-      isNumeric: true
+      hasHook: true
     };
   } else {
     return {
@@ -1993,8 +1935,7 @@ function createDimensionReplacement(parsedDimension, cssProperty, context, posit
       end,
       replacement: rawValue,
       displayValue: rawValue,
-      hasHook: false,
-      isNumeric: true
+      hasHook: false
     };
   }
 }
@@ -2035,14 +1976,8 @@ function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
     return null;
   }
   const rawValue = fontValue.unit ? `${fontValue.number}${fontValue.unit}` : fontValue.number.toString();
-  const propToMatch = !fontValue.unit && isKnownFontWeight(fontValue.number) ? "font-weight" : "font-size";
-  const customHook = getCustomMapping(propToMatch, rawValue, context.options?.customMapping);
-  let closestHooks = [];
-  if (customHook) {
-    closestHooks = [customHook];
-  } else {
-    closestHooks = getStylingHooksForDensityValue(fontValue, context.valueToStylinghook, propToMatch);
-  }
+  const propToMatch = !fontValue.unit && isKnownFontWeight(fontValue.number) ? resolvePropertyToMatch("font-weight") : resolvePropertyToMatch("font-size");
+  const closestHooks = getStylingHooksForDensityValue(fontValue, context.valueToStylinghook, propToMatch);
   const start = positionInfo.start.offset;
   const end = positionInfo.end.offset;
   if (closestHooks.length === 1) {
@@ -2051,8 +1986,7 @@ function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
       end,
       replacement: `var(${closestHooks[0]}, ${rawValue})`,
       displayValue: closestHooks[0],
-      hasHook: true,
-      isNumeric: true
+      hasHook: true
     };
   } else if (closestHooks.length > 1) {
     return {
@@ -2060,8 +1994,7 @@ function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
       end,
       replacement: rawValue,
       displayValue: formatSuggestionHooks(closestHooks),
-      hasHook: true,
-      isNumeric: true
+      hasHook: true
     };
   } else {
     return {
@@ -2069,8 +2002,7 @@ function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
       end,
       replacement: rawValue,
       displayValue: rawValue,
-      hasHook: false,
-      isNumeric: true
+      hasHook: false
     };
   }
 }
@@ -2202,30 +2134,9 @@ function shadowValueToHookEntries(supportedStylinghooks) {
     return [key, value.map((hook) => hook.name)];
   });
 }
-function reportBoxShadowViolation(node, context, valueText, hooks) {
-  const positionInfo = {
-    start: { offset: 0, line: 1, column: 1 },
-    end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
-  };
-  const replacement = createBoxShadowReplacement(
-    valueText,
-    hooks,
-    context,
-    positionInfo
-  );
-  if (replacement) {
-    const replacements = [replacement];
-    handleShorthandAutoFix(node, context, valueText, replacements);
-  }
-}
 var handleBoxShadowDeclaration = (node, context) => {
   const cssProperty = node.property.toLowerCase();
   const valueText = context.sourceCode.getText(node.value);
-  const customHook = getCustomMapping(cssProperty, valueText, context.options?.customMapping);
-  if (customHook) {
-    reportBoxShadowViolation(node, context, valueText, [customHook]);
-    return;
-  }
   const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);
   const parsedCssValue = toBoxShadowValue(valueText);
   if (!parsedCssValue) {
@@ -2235,7 +2146,20 @@ var handleBoxShadowDeclaration = (node, context) => {
     const parsedValueHook = toBoxShadowValue(shadow);
     if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {
       if (closestHooks.length > 0) {
-        reportBoxShadowViolation(node, context, valueText, closestHooks);
+        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;
     }
@@ -2285,42 +2209,6 @@ function isRuleEnabled(context, ruleName3) {
   }
 }
 
-// src/rules/v9/no-hardcoded-values/ruleOptionsSchema.ts
-var ruleOptionsSchema = [
-  {
-    type: "object",
-    properties: {
-      reportNumericValue: {
-        type: "string",
-        enum: ["never", "always", "hasReplacement"],
-        default: "always"
-      },
-      customMapping: {
-        type: "object",
-        additionalProperties: {
-          type: "object",
-          properties: {
-            properties: {
-              type: "array",
-              items: { type: "string" }
-            },
-            values: {
-              type: "array",
-              items: { type: "string" }
-            }
-          },
-          required: ["properties", "values"]
-        }
-      },
-      preferPaletteHook: {
-        type: "boolean",
-        default: false
-      }
-    },
-    additionalProperties: false
-  }
-];
-
 // src/rules/v9/no-hardcoded-values/noHardcodedValueRule.ts
 function defineNoHardcodedValueRule(config) {
   const { ruleConfig: ruleConfig14, ruleName: ruleName3 } = config;
@@ -2334,24 +2222,16 @@ function defineNoHardcodedValueRule(config) {
         url: url15
       },
       fixable: "code",
-      messages: messages15,
-      schema: ruleOptionsSchema
+      messages: messages15
     },
     create(context) {
       if (ruleName3 === "no-hardcoded-values-slds1" && isRuleEnabled(context, "@salesforce-ux/slds/no-hardcoded-values-slds2")) {
         return {};
       }
-      const options = context.options[0] || {};
-      const ruleOptions = {
-        reportNumericValue: options.reportNumericValue || "always",
-        customMapping: options.customMapping || {},
-        preferPaletteHook: options.preferPaletteHook || false
-      };
       const handlerContext = {
         valueToStylinghook: config.valueToStylinghook,
         context,
-        sourceCode: context.sourceCode,
-        options: ruleOptions
+        sourceCode: context.sourceCode
       };
       const colorOnlySelector = toSelector(colorProperties);
       const densityOnlySelector = toSelector(densificationProperties);
@@ -2428,6 +2308,7 @@ var no_hardcoded_values_slds2_default = defineNoHardcodedValueRule({
 
 // src/index.ts
 var import_parser2 = __toESM(require("@html-eslint/parser"));
+var import_css = __toESM(require("@eslint/css"));
 
 // eslint.rules.internal.json
 var eslint_rules_internal_default = {
@@ -2444,24 +2325,8 @@ var eslint_rules_internal_default = {
     "@salesforce-ux/slds/no-slds-namespace-for-custom-hooks": "warn",
     "@salesforce-ux/slds/enforce-component-hook-naming-convention": "error",
     "@salesforce-ux/slds/no-slds-private-var": "warn",
-    "@salesforce-ux/slds/no-hardcoded-values-slds2": ["warn", {
-      reportNumericValue: "hasReplacement",
-      preferPaletteHook: true,
-      customMapping: {
-        "--slds-g-font-line-height-4": {
-          properties: ["line-height"],
-          values: ["1.5"]
-        },
-        "--slds-g-sizing-5": {
-          properties: ["width", "height", "max-width", "max-height", "border*"],
-          values: ["1rem", "16px"]
-        },
-        "--slds-g-sizing-content-1": {
-          properties: ["width", "height", "max-width", "max-height", "border*"],
-          values: ["20ch"]
-        }
-      }
-    }],
+    "@salesforce-ux/slds/no-hardcoded-values-slds1": "error",
+    "@salesforce-ux/slds/no-hardcoded-values-slds2": "warn",
     "@salesforce-ux/slds/reduce-annotations": "warn"
   },
   html: {
@@ -2494,30 +2359,29 @@ var rules = {
 var plugin = {
   meta: {
     name: "@salesforce-ux/eslint-plugin-slds",
-    version: "1.0.6-internal"
+    version: "1.0.7-internal"
   },
   rules,
   configs: {}
 };
-var cssConfigArray = [
-  // CSS config - Standard CSS files
-  {
-    files: ["**/*.{css,scss}"],
-    language: "css/css",
-    languageOptions: {
-      tolerant: true
-      // Allow recoverable parsing errors for SCSS syntax
-    },
-    plugins: {
-      "@salesforce-ux/slds": plugin
-    },
-    rules: eslint_rules_internal_default.css,
-    settings: {
-      // Pass rules configuration to context for runtime access
-      sldsRules: { ...eslint_rules_internal_default.css }
-    }
+var baseCssConfigWithPlugin = {
+  files: ["**/*.{css,scss}"],
+  language: "css/css",
+  languageOptions: {
+    tolerant: true
+    // Allow recoverable parsing errors for SCSS syntax
+  },
+  plugins: {
+    css: import_css.default,
+    "@salesforce-ux/slds": plugin
+  },
+  rules: eslint_rules_internal_default.css,
+  settings: {
+    // Pass rules configuration to context for runtime access
+    sldsRules: { ...eslint_rules_internal_default.css }
   }
-];
+};
+var cssConfigArray = [baseCssConfigWithPlugin];
 var htmlConfigArray = [
   // HTML/Component config
   {
@@ -2549,5 +2413,11 @@ Object.assign(plugin.configs, {
     }
   }
 });
+function sldsCssPlugin() {
+  return {
+    ...baseCssConfigWithPlugin.plugins
+  };
+}
 module.exports = plugin;
+module.exports.sldsCssPlugin = sldsCssPlugin;
 //# sourceMappingURL=index.js.map