Fix messages

package.json

@@ -6,7 +6,8 @@
   "workspaces": [
     "packages/eslint-plugin-slds",
     "packages/stylelint-plugin-slds",
-    "packages/cli"
+    "packages/cli",
+    "packages/shared-utils"
   ],
   "packageManager": "[email protected]",
   "engines": {

packages/eslint-plugin-slds/src/rules/enforce-bem-usage.ts

@@ -1,5 +1,6 @@
 import { findAttr, isAttributesEmpty } from "./utils/node";
 import metadata from '@salesforce-ux/sds-metadata';
+import { formatMessageWithSuggestions } from '../../../shared-utils/src';
 const bemMapping = metadata.bemNaming;
 const deprecatedClasses = metadata.deprecatedClasses;
 
@@ -72,7 +73,10 @@ export = {
                 actual: className,
                 newValue
               },
-              message: JSON.stringify({message: "{{actual}} has been retired. Update it to the new name {{newValue}}.", suggestions:[newValue]}),
+              message: formatMessageWithSuggestions(
+                "{{actual}} has been retired. Update it to the new name {{newValue}}.",
+                [newValue]
+              ),
               fix(fixer) {
                 if (newValue) {
                   const newClassValue = classAttr.value.value.replace(

packages/eslint-plugin-slds/src/rules/modal-close-button-issue.ts

@@ -1,5 +1,6 @@
 import { findAttr, isAttributesEmpty } from "./utils/node";
 import { messages } from "./utils/rule";
+import { formatMessageWithSuggestions } from '../../../shared-utils/src/message-formatter';
 
 // This rule specific to CVS, find more details here https://issues.salesforce.com/issue/a028c00000zh1iqAAA/modal-close-button-is-not-visible-with-the-new-white-background-after-winter-25-release
 export = {
@@ -43,7 +44,7 @@ export = {
                         context.report({
                             node,
                             loc: classAttr.loc,
-                            message: JSON.stringify({message: messages["removeClass"], suggestions: [`class="${newClassList}"`]}),
+                            message: formatMessageWithSuggestions(messages["removeClass"], [`class="${newClassList}"`]),
                             fix(fixer) {                         
                                 return fixer.replaceText(classAttr, // Replace the full attribute
                                 `class="${newClassList}"` // Updated class list
@@ -85,7 +86,7 @@ export = {
                             context.report({
                                 node,
                                 loc: attribute.loc,
-                                message: JSON.stringify({message:messages["removeClass"],suggestions:[`${attrName}="${newClassList}"`]}),
+                                message: formatMessageWithSuggestions(messages["removeClass"], [`${attrName}="${newClassList}"`]),
                                 fix(fixer) {
                                     return fixer.replaceText(attribute, // Replace the full attribute
                                     `${attrName}="${newClassList}"` // Correctly modifies the respective attribute
@@ -111,7 +112,7 @@ export = {
               context.report({
                 node: attribute,
                 loc: attribute.value.loc,
-                message: JSON.stringify({message:messages["ensureButtonClasses"],suggestions:[newClassList]}),
+                message: formatMessageWithSuggestions(messages["ensureButtonClasses"], [newClassList]),
                 fix(fixer) {
                   return fixer.replaceText(attribute.value, `${newClassList}`);
                 },
@@ -121,7 +122,7 @@ export = {
             if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
               context.report({
                 node: variantAttr,
-                message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}),
+                message: formatMessageWithSuggestions(messages["changeVariant"], ["bare"]),
                 loc: variantAttr.value.loc,
                 fix(fixer) {
                     return fixer.replaceText(variantAttr.value, `bare`);
@@ -166,7 +167,7 @@ export = {
           if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
             context.report({
               node: variantAttr,
-              message: JSON.stringify({message:messages["changeVariant"], suggestions:["bare"]}),
+              message: formatMessageWithSuggestions(messages["changeVariant"], ["bare"]),
               loc: variantAttr.value.loc,
               fix(fixer) {
                   return fixer.replaceText(variantAttr.value, `bare`);

packages/eslint-plugin-slds/src/rules/no-deprecated-classes-slds2.ts

@@ -1,5 +1,6 @@
 import { findAttr, isAttributesEmpty } from "./utils/node";
 import metadata from '@salesforce-ux/sds-metadata';
+import { formatMessageWithSuggestions } from '../../../shared-utils/src/message-formatter';
 const deprecatedClasses = metadata.deprecatedClasses;
 
 export = {
@@ -47,7 +48,10 @@ export = {
               data: {
                 className,
               },
-              message: JSON.stringify({message:"The class {{className}} isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.", suggestions:[]}),
+              message: formatMessageWithSuggestions(
+                "The class {{className}} isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
+                []
+              ),
             });
           }
         });

packages/eslint-plugin-slds/test/rules/enforce-bem-usage.test.js

@@ -40,7 +40,8 @@ ruleTester.run("enforce-bem-usage", rule, {
       code: `<div class="slds-container--medium"></div>`, // Invalid: underscore instead of double underscore
       errors: [
         {
-          message: "{\"message\":\"slds-container--medium has been retired. Update it to the new name slds-container_medium.\",\"suggestions\":[\"slds-container_medium\"]}",
+          // message: "{\"message\":\"slds-container--medium has been retired. Update it to the new name slds-container_medium.\",\"suggestions\":[\"slds-container_medium\"]}",
+          message:"slds-container--medium has been retired. Update it to the new name slds-container_medium.",
           line: 1,
           column: 13,
         },
@@ -51,7 +52,8 @@ ruleTester.run("enforce-bem-usage", rule, {
       code: `<div class="block block_element slds-border--left"></div>`, // Invalid: `block_element` not in BEM
       errors: [
         {
-          message: "{\"message\":\"slds-border--left has been retired. Update it to the new name slds-border_left.\",\"suggestions\":[\"slds-border_left\"]}",
+          // message: "{\"message\":\"slds-border--left has been retired. Update it to the new name slds-border_left.\",\"suggestions\":[\"slds-border_left\"]}",
+          message:"slds-border--left has been retired. Update it to the new name slds-border_left.",
           line: 1,
           column: 33,
         }
@@ -62,7 +64,8 @@ ruleTester.run("enforce-bem-usage", rule, {
       code: `<div class="slds-p-right--xxx-small"></div>`, // Invalid: Missing block name
       errors: [
         {
-          message: "{\"message\":\"slds-p-right--xxx-small has been retired. Update it to the new name slds-p-right_xxx-small.\",\"suggestions\":[\"slds-p-right_xxx-small\"]}",
+            // message: "{\"message\":\"slds-p-right--xxx-small has been retired. Update it to the new name slds-p-right_xxx-small.\",\"suggestions\":[\"slds-p-right_xxx-small\"]}",
+            message:"slds-p-right--xxx-small has been retired. Update it to the new name slds-p-right_xxx-small.",
           line: 1,
           column: 13,
         },

packages/eslint-plugin-slds/test/rules/modal-close-button-issue.test.js

@@ -50,14 +50,14 @@ ruleTester.run("slds-modal-button-issue", rule, {
     // ❌ Scenario 1: Remove slds-button_icon-inverse from a modal close button
     {
       code: `<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"></button>`,
-      errors: [{ message: JSON.stringify({message: messages["removeClass"], suggestions: [`class="slds-button slds-button_icon slds-modal__close"`]}), type: "Tag" }],
+      errors: [{ message: messages["removeClass"], type: "Tag" }],
       output: `<button class="slds-button slds-button_icon slds-modal__close"></button>`,
     },
 
     // ❌ Scenario 2: Fix variant="bare-inverse" and ensure size="large" in lightning-button-icon
     {
       code: `<lightning-button-icon variant="bare-inverse" class="slds-button slds-button_icon slds-modal__close"></lightning-button-icon>`,
-      errors: [{ message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) }],
+      errors: [{ message: messages["changeVariant"] }],
       output: `<lightning-button-icon variant="bare" class="slds-button slds-button_icon slds-modal__close"></lightning-button-icon>`,
     },
 
@@ -66,14 +66,14 @@ ruleTester.run("slds-modal-button-issue", rule, {
       code: `<button class="slds-button slds-modal__close"><lightning-icon variant="bare-inverse" size="medium"></lightning-icon></button>`,
       errors: [
         //{ messageId: "ensureSizeAttribute", type: "Tag" },
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) }
+        { message: messages["changeVariant"] }
       ],
       output: `<button class="slds-button slds-modal__close"><lightning-icon variant="bare" size="medium"></lightning-icon></button>`,
     },
     {
       code: `<button class="slds-button slds-modal__close"><lightning-icon variant="bare-inverse"></lightning-icon></button>`,
       errors: [
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) }
+        { message: messages["changeVariant"] }
       ],
       output: `<button class="slds-button slds-modal__close"><lightning-icon variant="bare"></lightning-icon></button>`,
     },
@@ -91,8 +91,8 @@ ruleTester.run("slds-modal-button-issue", rule, {
                 <span class="slds-assistive-text">{cancelButtonLabel}</span>
             </button>`,
       errors: [
-        { message: JSON.stringify({message: messages["removeClass"], suggestions: [`class="slds-button slds-button_icon slds-modal__close"`]})},
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}), }
+        { message: messages["removeClass"]},
+        { message: messages["changeVariant"] }
       ],
       output: `<button class="slds-button slds-button_icon slds-modal__close">
                 <lightning-icon
@@ -113,8 +113,8 @@ ruleTester.run("slds-modal-button-issue", rule, {
                 class="slds-button slds-button_icon slds-modal__close slds-button--icon-inverse" variant="bare-inverse" size="large">
             </lightning-button-icon>`,
       errors: [
-        { message: JSON.stringify({message: messages["removeClass"], suggestions: [`class="slds-button slds-button_icon slds-modal__close"`]})},
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) }
+        { message: messages["removeClass"]},
+        { message: messages["changeVariant"] }
       ],
       output: `<lightning-button-icon
                 title={labels.closeButton} icon-name="utility:close"
@@ -132,9 +132,9 @@ ruleTester.run("slds-modal-button-issue", rule, {
                 variant="bare-inverse" size="large">
             </lightning-button-icon>`,
       errors: [
-        { message: JSON.stringify({message: messages["removeClass"], suggestions: [`icon-class="slds-button slds-button_icon slds-modal__close"`]})},
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) },
-        { message: JSON.stringify({message:messages["changeVariant"],suggestions:["bare"]}) },
+        { message: messages["removeClass"]},
+        { message: messages["changeVariant"] },
+        { message: messages["changeVariant"] },
       ],
       output: `<lightning-button-icon
                 title={labels.closeButton} icon-name="utility:close"
@@ -156,7 +156,7 @@ ruleTester.run("slds-modal-button-issue", rule, {
                 <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{heading}</h2>
             </header>`,
       errors: [
-        { message: JSON.stringify({message: messages["removeClass"], suggestions: [`class="slds-button slds-button_icon slds-modal__close"`]}) }
+        { message: messages["removeClass"] }
       ],
       output: `<header class="slds-modal__header">
                 <button class="slds-button slds-button_icon slds-modal__close" title={labels.Close} onclick={close}>

packages/eslint-plugin-slds/test/rules/no-deprecated-classes-slds2.test.js

@@ -30,7 +30,8 @@ ruleTester.run("no-deprecated-classes", rule, {
       code: `<div class="slds-action-overflow--touch"></div>`, // Single deprecated class
       errors: [
         {
-          message: "{\"message\":\"The class slds-action-overflow--touch isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          // message: "{\"message\":\"The class slds-action-overflow--touch isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          message: "The class slds-action-overflow--touch isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
           line: 1,
           column: 13,
         },
@@ -40,12 +41,14 @@ ruleTester.run("no-deprecated-classes", rule, {
       code: `<div class="slds-app-launcher__tile-body_small slds-app-launcher__tile-figure_small"></div>`, // Multiple deprecated classes
       errors: [
         {
-          message: "{\"message\":\"The class slds-app-launcher__tile-body_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          // message: "{\"message\":\"The class slds-app-launcher__tile-body_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          message: "The class slds-app-launcher__tile-body_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
           line: 1,
           column: 13,
         },
         {
-          message:  "{\"message\":\"The class slds-app-launcher__tile-figure_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          // message:  "{\"message\":\"The class slds-app-launcher__tile-figure_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.\",\"suggestions\":[]}",
+          message: "The class slds-app-launcher__tile-figure_small isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
           line: 1,
           column: 48,
         },

packages/shared-utils/src/index.ts

@@ -0,0 +1 @@
+export { formatMessageWithSuggestions } from './message-formatter'; 

packages/shared-utils/src/message-formatter.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats a message with suggestions into a stringified JSON object
+ * @param message The main message to display
+ * @param suggestions Array of suggestion objects to include
+ * @returns Stringified JSON object containing message and suggestions
+ */
+export function formatMessageWithSuggestions(message: string, suggestions: string[]): string {
+  // return JSON.stringify({
+  //   message,
+  //   suggestions
+  // });
+  return message;
+} 

packages/shared-utils/tsconfig.json

@@ -0,0 +1,17 @@
+{
+        "compilerOptions": {
+          "outDir": "build",
+          "target": "ESNext",
+          "module": "ES2022",
+          "moduleResolution": "node",
+          "declaration": true,
+          "emitDeclarationOnly": true,
+          "noEmitOnError": true,
+          "esModuleInterop": true,
+          "allowSyntheticDefaultImports": true,
+          "resolveJsonModule": true,
+          "skipLibCheck": true
+        },
+        "include": ["./src/**/*.ts"]
+      }
+

packages/stylelint-plugin-slds/src/rules/enforce-sds-to-slds-hooks/index.ts

@@ -4,6 +4,7 @@ import stylelint, { PostcssResult, Rule, RuleSeverity } from 'stylelint';
 import ruleMetadata from '../../utils/rulesMetadata';
 import replacePlaceholders from '../../utils/util';
 import metadata from '@salesforce-ux/sds-metadata';
+import { formatMessageWithSuggestions } from '../../../../shared-utils/src';
 const sldsPlusStylingHooks = metadata.sldsPlusStylingHooks;
 
 const { utils, createPlugin }: typeof stylelint = stylelint;
@@ -64,7 +65,7 @@ function detectRightSide(decl:Declaration, basicReportProps:Partial<stylelint.Pr
     const message = messages.replace(oldValue, suggestedMatch);
 
     utils.report(<stylelint.Problem>{
-      message: JSON.stringify({message, suggestions:[suggestedMatch]}),
+      message: formatMessageWithSuggestions(message, [suggestedMatch]),
       index: startIndex,
       endIndex,
       ...basicReportProps,
@@ -95,7 +96,7 @@ function detectLeftSide(decl:Declaration, basicReportProps:Partial<stylelint.Pro
   const message = messages.replace(prop, suggestedMatch);
 
     utils.report(<stylelint.Problem>{
-      message: JSON.stringify({message, suggestions:[suggestedMatch]}),
+      message: formatMessageWithSuggestions(message, [suggestedMatch]),
       index: startIndex,
       endIndex,
       ...basicReportProps,

packages/stylelint-plugin-slds/src/rules/no-hardcoded-value/noHardcodedValue.rule.ts

@@ -9,6 +9,7 @@ import {
 import generateSuggestionsList from '../../utils/generateSuggestionsList';
 import ruleMetadata from '../../utils/rulesMetadata';
 import replacePlaceholders from '../../utils/util';
+import { formatMessageWithSuggestions } from '../../../../shared-utils/src';
 import type { ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata';
 const { utils, createPlugin } = stylelint;
 
@@ -192,19 +193,19 @@ function reportMatchingHooks(
 
   if (suggestions.length > 0) {
     utils.report(<stylelint.Problem>{
-      message: JSON.stringify({
-        message: messages.rejected(value, generateSuggestionsList(suggestions)),
-        suggestions,
-      }),
+      message: formatMessageWithSuggestions(
+        messages.rejected(value, generateSuggestionsList(suggestions)),
+        suggestions
+      ),
       ...reportProps,
       fix: suggestions.length === 1 ? fix : null,
     });
   } else {
     utils.report(<stylelint.Problem>{
-      message: JSON.stringify({
-        message: messages.suggested(value),
-        suggestions: [],
-      }),
+      message: formatMessageWithSuggestions(
+        messages.suggested(value),
+        []
+      ),
       ...reportProps,
     });
   }

packages/stylelint-plugin-slds/src/rules/no-slds-class-overrides/index.ts

@@ -5,6 +5,7 @@ import metadata from '@salesforce-ux/sds-metadata';
 import ruleMetadata from '../../utils/rulesMetadata';
 import { getClassNodesFromSelector } from '../../utils/selector-utils';
 import replacePlaceholders from '../../utils/util';
+import { formatMessageWithSuggestions } from '../../../../shared-utils/src';
 const { utils, createPlugin }: typeof stylelint = stylelint;
 const sldsClasses = metadata.sldsClasses;
 
@@ -35,9 +36,12 @@ function rule(primaryOptions: boolean, {severity = severityLevel as RuleSeverity
             const index = offsetIndex + classNode.sourceIndex + 1; // find selector in rule plus '.'
             const endIndex = index + classNode.value.length;
             utils.report({
-              message: JSON.stringify({message:replacePlaceholders(warningMsg, {
-                selector: `.${classNode.value}`
-              }), suggestions:[]}),
+              message: formatMessageWithSuggestions(
+                replacePlaceholders(warningMsg, {
+                  selector: `.${classNode.value}`
+                }),
+                []
+              ),
               node: rule,
               result,
               ruleName,