@salesforce-ux/eslint-plugin-slds 1.0.2 → 1.0.3

package/build/index.js

@@ -45,9 +45,9 @@ var init_node = __esm({
   }
 });
 
-// yaml-file:/Users/ritesh.kumar2/Documents/projects/stylelint-sds/packages/eslint-plugin-slds/src/config/rule-messages.yml
+// yaml-file:rule-messages.yml
 var require_rule_messages = __commonJS({
-  "yaml-file:/Users/ritesh.kumar2/Documents/projects/stylelint-sds/packages/eslint-plugin-slds/src/config/rule-messages.yml"(exports2, module2) {
+  "yaml-file:rule-messages.yml"(exports2, module2) {
     module2.exports = {
       "no-slds-class-overrides": {
         "description": "Create new custom CSS classes instead of overriding SLDS selectors",
@@ -1056,7 +1056,7 @@ function forEachFontValue(valueText, callback) {
 }
 
 // src/utils/css-utils.ts
-function extractSldsVariable(node) {
+function extractCssVariable(node, filter) {
   if (!node || node.type !== "Function" || node.name !== "var") {
     return null;
   }
@@ -1072,19 +1072,31 @@ function extractSldsVariable(node) {
     return null;
   }
   const variableName = firstChild.name;
-  if (!variableName || !variableName.startsWith("--slds-")) {
+  if (!variableName) {
     return null;
   }
-  const hasFallback = childrenArray.some(
-    (child) => child.type === "Operator" && child.value === ","
-  );
-  return {
-    name: variableName,
-    hasFallback
-  };
+  return filter(variableName, childrenArray);
 }
 function forEachSldsVariable(valueText, callback) {
-  forEachValue(valueText, extractSldsVariable, () => false, callback);
+  const extractor = (node) => extractCssVariable(node, (variableName, childrenArray) => {
+    if (!variableName.startsWith("--slds-")) {
+      return null;
+    }
+    const hasFallback = childrenArray.some(
+      (child) => child.type === "Operator" && child.value === ","
+    );
+    return { name: variableName, hasFallback };
+  });
+  forEachValue(valueText, extractor, () => false, callback);
+}
+function forEachNamespacedVariable(valueText, callback) {
+  const extractor = (node) => extractCssVariable(node, (variableName) => {
+    if (variableName.startsWith("--slds-") || variableName.startsWith("--sds-")) {
+      return { name: variableName, hasFallback: false };
+    }
+    return null;
+  });
+  forEachValue(valueText, extractor, () => false, callback);
 }
 function formatSuggestionHooks(hooks) {
   if (hooks.length === 1) {
@@ -1119,6 +1131,32 @@ function getRecommendation(lwcToken) {
   const hasRecommendation = oldValue in lwcToSlds && replacementCategory !== "empty" /* EMPTY */;
   return { hasRecommendation, recommendation, replacementCategory };
 }
+function extractLwcVariableWithFallback(node, sourceCode) {
+  if (!node?.children || node.type !== "Function" || node.name !== "var") {
+    return null;
+  }
+  const children = Array.from(node.children);
+  const firstChild = children[0];
+  if (!firstChild?.name?.startsWith("--lwc-") || firstChild.type !== "Identifier") {
+    return null;
+  }
+  const commaIndex = children.findIndex(
+    (child) => child.type === "Operator" && child.value === ","
+  );
+  let fallbackValue = null;
+  if (commaIndex !== -1 && commaIndex + 1 < children.length) {
+    const fallbackStart = children[commaIndex + 1];
+    const fallbackEnd = children[children.length - 1];
+    if (fallbackStart?.loc && fallbackEnd?.loc) {
+      const fullText = sourceCode.getText();
+      fallbackValue = fullText.substring(fallbackStart.loc.start.offset, fallbackEnd.loc.end.offset).trim();
+    }
+  }
+  return {
+    lwcToken: firstChild.name,
+    fallbackValue
+  };
+}
 function getReportMessage(cssVar, replacementCategory, recommendation) {
   if (!recommendation) {
     return {
@@ -1168,6 +1206,12 @@ var lwc_token_to_slds_hook_default = {
             if (textAtPosition === oldValue) {
               return fixer.replaceTextRange([propertyStart, propertyEnd], suggestedMatch);
             }
+          } else if (node.type === "Function" && node.name === "var") {
+            const sourceCode = context.sourceCode;
+            const fullText = sourceCode.getText();
+            const nodeOffset = node.loc.start.offset;
+            const nodeEnd = node.loc.end.offset;
+            return fixer.replaceTextRange([nodeOffset, nodeEnd], suggestedMatch);
           } else {
             const sourceCode = context.sourceCode;
             const fullText = sourceCode.getText();
@@ -1206,23 +1250,27 @@ var lwc_token_to_slds_hook_default = {
         reportAndFix(node, property, suggestedMatch, messageId, data);
       },
       // LWC tokens inside var() functions: var(--lwc-*)
-      "Function[name='var'] Identifier[name=/^--lwc-/]"(node) {
-        const tokenName = node.name;
-        if (shouldIgnoreDetection(tokenName)) {
+      "Function[name='var']"(node) {
+        const lwcVarInfo = extractLwcVariableWithFallback(node, context.sourceCode);
+        if (!lwcVarInfo) {
+          return;
+        }
+        const { lwcToken, fallbackValue } = lwcVarInfo;
+        if (shouldIgnoreDetection(lwcToken)) {
           return;
         }
-        const { hasRecommendation, recommendation, replacementCategory } = getRecommendation(tokenName);
-        const { messageId, data } = getReportMessage(tokenName, replacementCategory, recommendation);
+        const { hasRecommendation, recommendation, replacementCategory } = getRecommendation(lwcToken);
+        const { messageId, data } = getReportMessage(lwcToken, replacementCategory, recommendation);
         let suggestedMatch = null;
         if (hasRecommendation) {
           if (replacementCategory === "slds_token" /* SLDS_TOKEN */) {
-            const originalVarCall = `var(${tokenName})`;
+            const originalVarCall = fallbackValue ? `var(${lwcToken}, ${fallbackValue})` : `var(${lwcToken})`;
             suggestedMatch = `var(${recommendation}, ${originalVarCall})`;
           } else if (replacementCategory === "raw_value" /* RAW_VALUE */) {
             suggestedMatch = recommendation;
           }
         }
-        reportAndFix(node, tokenName, suggestedMatch, messageId, data);
+        reportAndFix(node, lwcToken, suggestedMatch, messageId, data);
       }
     };
   }
@@ -1467,7 +1515,7 @@ var import_rule_messages10 = __toESM(require_rule_messages());
 var ruleConfig8 = import_rule_messages10.default["no-slds-namespace-for-custom-hooks"];
 var { type: type9, description: description9, url: url9, messages: messages9 } = ruleConfig8;
 var sldsPlusStylingHooks3 = import_sds_metadata10.default.sldsPlusStylingHooks;
-var allSldsHooks3 = [...sldsPlusStylingHooks3.global, ...sldsPlusStylingHooks3.component];
+var allSldsHooks3 = [...sldsPlusStylingHooks3.global, ...sldsPlusStylingHooks3.component, ...sldsPlusStylingHooks3.shared];
 var toSldsToken2 = (sdsToken) => sdsToken.replace("--sds-", "--slds-");
 function shouldIgnoreDetection4(sdsToken) {
   if (sdsToken.startsWith("--sds-") || sdsToken.startsWith("--slds-")) {
@@ -1486,33 +1534,54 @@ var no_slds_namespace_for_custom_hooks_default = {
     messages: messages9
   },
   create(context) {
-    function reportViolation(node, token) {
-      const tokenWithoutNamespace = token.replace("--slds-", "").replace("--sds-", "");
-      context.report({
-        node,
-        messageId: "customHookNamespace",
-        data: {
-          token,
-          tokenWithoutNamespace
-        }
-      });
-    }
     return {
-      // CSS custom property declarations: --slds-* and --sds-* properties
-      "Declaration[property=/^--s(lds|ds)-/]"(node) {
+      "Declaration"(node) {
         const property = node.property;
-        if (shouldIgnoreDetection4(property)) {
-          return;
+        if (property && (property.startsWith("--slds-") || property.startsWith("--sds-")) && !shouldIgnoreDetection4(property)) {
+          const tokenWithoutNamespace = property.replace("--slds-", "").replace("--sds-", "");
+          context.report({
+            node,
+            loc: node.loc,
+            // Use full declaration loc which includes the property
+            messageId: "customHookNamespace",
+            data: {
+              token: property,
+              tokenWithoutNamespace
+            }
+          });
         }
-        reportViolation(node, property);
-      },
-      // SLDS/SDS tokens inside var() functions: var(--slds-*) or var(--sds-*)
-      "Function[name='var'] Identifier[name=/^--s(lds|ds)-/]"(node) {
-        const tokenName = node.name;
-        if (shouldIgnoreDetection4(tokenName)) {
-          return;
+        const valueText = context.sourceCode.getText(node.value);
+        if (valueText) {
+          forEachNamespacedVariable(valueText, (variableInfo, positionInfo) => {
+            const { name: tokenName } = variableInfo;
+            if (!shouldIgnoreDetection4(tokenName)) {
+              const tokenWithoutNamespace = tokenName.replace("--slds-", "").replace("--sds-", "");
+              if (positionInfo.start && positionInfo.end && node.value.loc) {
+                context.report({
+                  node,
+                  loc: {
+                    start: {
+                      line: node.value.loc.start.line + positionInfo.start.line - 1,
+                      column: node.value.loc.start.column + positionInfo.start.column - 1
+                    },
+                    end: {
+                      line: node.value.loc.start.line + positionInfo.end.line - 1,
+                      column: node.value.loc.start.column + positionInfo.end.column - 1
+                    }
+                  },
+                  messageId: "customHookNamespace",
+                  data: { token: tokenName, tokenWithoutNamespace }
+                });
+              } else {
+                context.report({
+                  node,
+                  messageId: "customHookNamespace",
+                  data: { token: tokenName, tokenWithoutNamespace }
+                });
+              }
+            }
+          });
         }
-        reportViolation(node, tokenName);
       }
     };
   }
@@ -2313,7 +2382,7 @@ var rules = {
 var plugin = {
   meta: {
     name: "@salesforce-ux/eslint-plugin-slds",
-    version: "1.0.2"
+    version: "1.0.3"
   },
   rules,
   configs: {}