@salesforce-ux/eslint-plugin-slds 1.0.1 → 1.0.2-alpha.0

package/README.md

@@ -67,6 +67,7 @@ By default, the latest version of the plugin supports legacy and flat config sys
 - `enforce-component-hook-naming-convention`: Identifies --slds-c component-level styling hooks that use a deprecated naming convention.
 - `no-deprecated-slds-classes`: Please replace the deprecated classes with a modern equivalent.
 - `reduce-annotations`: Identifies annotations that must be removed from the code.
+- `lwc-token-to-slds-hook`: Identifies the deprecated --lwc tokens that must be replaced with the latest --slds tokens. For more information, see lightningdesignsystem.com.
 
 ## License
 

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",
@@ -183,7 +183,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}}.",
@@ -1119,6 +1119,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 +1194,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 +1238,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);
       }
     };
   }
@@ -2272,6 +2308,7 @@ var eslint_rules_default = {
   css: {
     "@salesforce-ux/slds/no-slds-class-overrides": "warn",
     "@salesforce-ux/slds/no-deprecated-slds-classes": "warn",
+    "@salesforce-ux/slds/lwc-token-to-slds-hook": "error",
     "@salesforce-ux/slds/enforce-sds-to-slds-hooks": "warn",
     "@salesforce-ux/slds/no-sldshook-fallback-for-lwctoken": "warn",
     "@salesforce-ux/slds/no-unsupported-hooks-slds2": "warn",
@@ -2312,7 +2349,7 @@ var rules = {
 var plugin = {
   meta: {
     name: "@salesforce-ux/eslint-plugin-slds",
-    version: "1.0.1"
+    version: "1.0.2-alpha.0"
   },
   rules,
   configs: {}