@salesforce-ux/eslint-plugin-slds 0.1.5 → 0.1.7-alpha.0

package/build/index.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    rules: {
+        "enforce-bem-class": any;
+        "no-deprecated-classes-slds2": any;
+        "modal-close-button-issue": any;
+    };
+    configs: {
+        recommended: {
+            parser: string;
+            plugins: string[];
+            rules: {
+                "@salesforce-ux/slds/enforce-bem-class": string;
+                "@salesforce-ux/slds/no-deprecated-classes-slds2": string;
+                "@salesforce-ux/slds/modal-close-button-issue": string;
+            };
+        };
+    };
+};
+export = _default;

package/build/index.js

@@ -0,0 +1,19 @@
+"use strict";
+module.exports = {
+    rules: {
+        "enforce-bem-class": require('./rules/enforce-bem-class'),
+        "no-deprecated-classes-slds2": require('./rules/no-deprecated-classes-slds2'),
+        "modal-close-button-issue": require('./rules/modal-close-button-issue')
+    },
+    configs: {
+        recommended: {
+            parser: "@html-eslint/parser", // Use HTML parser
+            plugins: ["@salesforce-ux/slds"],
+            rules: {
+                "@salesforce-ux/slds/enforce-bem-class": "error",
+                "@salesforce-ux/slds/no-deprecated-classes-slds2": "error",
+                "@salesforce-ux/slds/modal-close-button-issue": "error"
+            },
+        },
+    },
+};

package/build/rules/enforce-bem-class.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            category: string;
+            recommended: boolean;
+            description: string;
+            url: string;
+        };
+        fixable: string;
+        schema: {
+            type: string;
+            properties: {
+                pattern: {
+                    type: string;
+                };
+                flags: {
+                    type: string;
+                };
+            };
+            additionalProperties: boolean;
+        }[];
+    };
+    create(context: any): {
+        Tag: (node: any) => void;
+    };
+};
+export = _default;

package/build/rules/enforce-bem-class.js

@@ -0,0 +1,74 @@
+"use strict";
+const node_1 = require("./utils/node");
+const metadata_service_1 = require("../services/metadata.service");
+const bemMapping = metadata_service_1.MetadataService.loadMetadata(metadata_service_1.MetadataFile.BEM_NAMING);
+module.exports = {
+    meta: {
+        type: "problem", // The rule type
+        docs: {
+            category: "Stylistic Issues",
+            recommended: true,
+            description: "Replace BEM double-dash syntax in class names with single underscore syntax.",
+            url: ""
+        },
+        fixable: "code", // This rule can be fixed automatically
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    pattern: { type: "string" }, // Regex pattern for BEM
+                    flags: { type: "string" }, // Regex flags
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        function check(node) {
+            if ((0, node_1.isAttributesEmpty)(node)) {
+                return;
+            }
+            const classAttr = (0, node_1.findAttr)(node, "class");
+            if (classAttr && classAttr.value) {
+                const classNames = classAttr.value.value.split(/\s+/);
+                classNames.forEach((className) => {
+                    if (className && className in bemMapping) {
+                        // Find the exact location of the problematic class name
+                        const classNameStart = classAttr.value.value.indexOf(className) + 7; // 7 here is for `class= "`
+                        const classNameEnd = classNameStart + className.length;
+                        // Use the loc property to get line and column from the class attribute
+                        const startLoc = {
+                            line: classAttr.loc.start.line,
+                            column: classAttr.loc.start.column + classNameStart,
+                        };
+                        const endLoc = {
+                            line: classAttr.loc.start.line,
+                            column: classAttr.loc.start.column + classNameEnd,
+                        };
+                        // Check whether a fixed class is available
+                        const newValue = bemMapping[className];
+                        context.report({
+                            node,
+                            loc: { start: startLoc, end: endLoc },
+                            data: {
+                                actual: className,
+                                newValue
+                            },
+                            message: JSON.stringify({ message: "{{actual}} has been retired. Update it to the new name {{newValue}}.", suggestions: [newValue] }),
+                            fix(fixer) {
+                                if (newValue) {
+                                    const newClassValue = classAttr.value.value.replace(className, newValue);
+                                    return fixer.replaceTextRange([classAttr.value.range[0], classAttr.value.range[1]], `${newClassValue}`);
+                                }
+                                return null; // Ensure a return value even if no fix is applied
+                            },
+                        });
+                    }
+                });
+            }
+        }
+        return {
+            Tag: check,
+        };
+    },
+};

package/build/rules/modal-close-button-issue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            category: string;
+            recommended: boolean;
+            description: string;
+            url: string;
+        };
+        fixable: string;
+        schema: any[];
+    };
+    create(context: any): {
+        Tag: (node: any) => void;
+    };
+};
+export = _default;

package/build/rules/modal-close-button-issue.js

@@ -0,0 +1,190 @@
+"use strict";
+const node_1 = require("./utils/node");
+const rule_1 = require("./utils/rule");
+module.exports = {
+    meta: {
+        type: "problem",
+        docs: {
+            category: "Best Practices",
+            recommended: true,
+            description: "Update component attributes or CSS classes for the modal close button to comply with the modal component blueprint.",
+            url: ""
+        },
+        fixable: "code",
+        schema: [],
+    },
+    create(context) {
+        function check(node) {
+            if ((0, node_1.isAttributesEmpty)(node)) {
+                return;
+            }
+            const tagName = node.name;
+            // ✅ Scenario 1: Remove 'slds-button_icon-inverse' from <button> 
+            // (optional) when the parent of the button has class name `slds-modal`
+            // and also button should have class `slds-modal__close`
+            if (tagName === "button") {
+                const classAttr = (0, node_1.findAttr)(node, "class");
+                if (classAttr && classAttr.value) {
+                    const classList = classAttr.value.value.split(/\s+/);
+                    // ✅ Ensure button has "slds-modal__close" before proceeding
+                    if (!classList.includes("slds-modal__close")) {
+                        return; // Stop execution if the class is missing
+                    }
+                    if (classList.includes("slds-button_icon-inverse") || classList.includes("slds-button--icon-inverse")) {
+                        const newClassList = classList
+                            .filter((cls) => (cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse"))
+                            .join(" ");
+                        context.report({
+                            node,
+                            loc: classAttr.loc,
+                            message: JSON.stringify({ message: rule_1.messages["removeClass"], suggestions: [`class="${newClassList}"`] }),
+                            fix(fixer) {
+                                return fixer.replaceText(classAttr, // Replace the full attribute
+                                `class="${newClassList}"` // Updated class list
+                                );
+                            },
+                        });
+                    }
+                }
+            }
+            // ✅ Scenario 2: Fix <lightning-button-icon> and this should have class `slds-modal__close`
+            if (tagName === "lightning-button-icon" || tagName === "lightning:buttonIcon") {
+                const variantAttr = (0, node_1.findAttr)(node, "variant");
+                const sizeAttr = (0, node_1.findAttr)(node, "size");
+                const classAttr = (0, node_1.findAttr)(node, "class");
+                const iconClassAttr = (0, node_1.findAttr)(node, "icon-class"); // 🔍 Check for icon-class attribute
+                function validateClassAttr(attribute, attrName) {
+                    if (attribute && attribute.value) {
+                        const classList = attribute.value.value.split(/\s+/);
+                        // Irrespective of whether we are checking for class or icon-class we need to check whether the attribute is present or not.
+                        // ✅ Ensure "slds-modal__close" exists before proceeding
+                        if (!classAttr?.value?.value?.includes("slds-modal__close")) {
+                            return;
+                        }
+                        // ✅ Ensure "slds-modal__close" exists before proceeding
+                        // if (!classList.includes("slds-modal__close")) {
+                        //   return; // Stop execution if the class is missing
+                        // }
+                        // Remove inverse classes
+                        if (classList.includes("slds-button_icon-inverse") || classList.includes("slds-button--icon-inverse")) {
+                            const newClassList = classList
+                                .filter((cls) => cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse")
+                                .join(" ");
+                            context.report({
+                                node,
+                                loc: attribute.loc,
+                                message: JSON.stringify({ message: rule_1.messages["removeClass"], suggestions: [`${attrName}="${newClassList}"`] }),
+                                fix(fixer) {
+                                    return fixer.replaceText(attribute, // Replace the full attribute
+                                    `${attrName}="${newClassList}"` // Correctly modifies the respective attribute
+                                    );
+                                },
+                            });
+                        }
+                        // Ensure 'slds-button' and 'slds-button_icon' exist
+                        if (!classList.includes("slds-button") || !classList.includes("slds-button_icon")) {
+                            let newClassList;
+                            if (attrName === 'icon-class') {
+                                newClassList = [
+                                    ...classList.filter((cls) => cls !== "slds-button_icon-inverse"),
+                                ].join(" ");
+                            }
+                            else {
+                                newClassList = [
+                                    "slds-button",
+                                    "slds-button_icon",
+                                    ...classList.filter((cls) => cls !== "slds-button_icon-inverse"),
+                                ].join(" ");
+                            }
+                            context.report({
+                                node: attribute,
+                                loc: attribute.value.loc,
+                                message: JSON.stringify({ message: rule_1.messages["ensureButtonClasses"], suggestions: [newClassList] }),
+                                fix(fixer) {
+                                    return fixer.replaceText(attribute.value, `${newClassList}`);
+                                },
+                            });
+                        }
+                        // Fix variant="bare-inverse" to "bare"
+                        if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
+                            context.report({
+                                node: variantAttr,
+                                message: JSON.stringify({ message: rule_1.messages["changeVariant"], suggestions: ["bare"] }),
+                                loc: variantAttr.value.loc,
+                                fix(fixer) {
+                                    return fixer.replaceText(variantAttr.value, `bare`);
+                                },
+                            });
+                        }
+                        // Ensure size="large" exists
+                        // if (!sizeAttr) {
+                        //   context.report({
+                        //     node,
+                        //     message: messages["ensureSizeAttribute"],
+                        //     fix(fixer) {
+                        //       if (variantAttr) {
+                        //         return fixer.insertTextAfterRange([variantAttr.range[1], variantAttr.range[1]], ' size="large"');
+                        //       }
+                        //     },
+                        //   });
+                        // }
+                    }
+                }
+                // ✅ Validate `class` and `icon-class` separately, maintaining their own attribute names
+                validateClassAttr(classAttr, "class");
+                validateClassAttr(iconClassAttr, "icon-class");
+            }
+            // ✅ Scenario 3: Fix <lightning-icon> inside <button> & the class name of the parent name as button and it should have `slds-modal__close`
+            if ((tagName === "lightning-icon" || tagName === "lightning:icon") && node.parent?.name === "button") {
+                const parentClassAttr = (0, node_1.findAttr)(node.parent, "class");
+                if (parentClassAttr && parentClassAttr.value) {
+                    const parentClassList = parentClassAttr.value.value.split(/\s+/);
+                    // ✅ Ensure the parent <button> has "slds-modal__close" before proceeding
+                    if (!parentClassList.includes("slds-modal__close")) {
+                        return; // Stop execution if the class is missing
+                    }
+                    const variantAttr = (0, node_1.findAttr)(node, "variant");
+                    const sizeAttr = (0, node_1.findAttr)(node, "size");
+                    // Fix variant="bare-inverse" to "bare"
+                    if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
+                        context.report({
+                            node: variantAttr,
+                            message: JSON.stringify({ message: rule_1.messages["changeVariant"], suggestions: ["bare"] }),
+                            loc: variantAttr.value.loc,
+                            fix(fixer) {
+                                return fixer.replaceText(variantAttr.value, `bare`);
+                            },
+                        });
+                    }
+                    // // Remove variant attribute completely
+                    // if (variantAttr) {
+                    //   context.report({
+                    //     node: variantAttr,
+                    //     messageId: "removeVariant",
+                    //     fix(fixer) {
+                    //       return fixer.remove(variantAttr);
+                    //     },
+                    //   });
+                    // }
+                    //Ensure size="large" is set
+                    // if (!sizeAttr) {
+                    //   context.report({
+                    //     node,
+                    //     message: messages["ensureSizeAttribute"],
+                    //     fix(fixer) {
+                    //       //return fixer.insertTextAfter(node, ' size="large"');
+                    //       if(variantAttr)
+                    //       {
+                    //         return fixer.insertTextAfterRange([variantAttr.range[1], variantAttr.range[1]], ' size="large"')
+                    //       }
+                    //     },
+                    //   });
+                    // }
+                }
+            }
+        }
+        return {
+            Tag: check,
+        };
+    },
+};

package/build/rules/no-deprecated-classes-slds2.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            category: string;
+            recommended: boolean;
+            description: string;
+            url: string;
+        };
+        schema: any[];
+    };
+    create(context: any): {
+        Tag: (node: any) => void;
+    };
+};
+export = _default;

package/build/rules/no-deprecated-classes-slds2.js

@@ -0,0 +1,54 @@
+"use strict";
+const node_1 = require("./utils/node");
+const metadata_service_1 = require("../services/metadata.service");
+const deprecatedClasses = metadata_service_1.MetadataService.loadMetadata(metadata_service_1.MetadataFile.DEPRECATED_CLASSES);
+module.exports = {
+    meta: {
+        type: "problem", // The rule type
+        docs: {
+            category: "Best Practices",
+            recommended: true,
+            description: "Replace classes that aren’t available with SLDS 2 classes. See lightningdesignsystem.com for more info.",
+            url: ""
+        },
+        schema: [], // No additional options needed
+    },
+    create(context) {
+        function check(node) {
+            if ((0, node_1.isAttributesEmpty)(node)) {
+                return;
+            }
+            const classAttr = (0, node_1.findAttr)(node, "class");
+            if (classAttr && classAttr.value) {
+                const classNames = classAttr.value.value.split(/\s+/);
+                classNames.forEach((className) => {
+                    if (className && deprecatedClasses.includes(className)) {
+                        // Find the exact location of the problematic class name
+                        const classNameStart = classAttr.value.value.indexOf(className) + 7; // 7 here is for `class= "`
+                        const classNameEnd = classNameStart + className.length;
+                        // Use the loc property to get line and column from the class attribute
+                        const startLoc = {
+                            line: classAttr.loc.start.line,
+                            column: classAttr.loc.start.column + classNameStart,
+                        };
+                        const endLoc = {
+                            line: classAttr.loc.start.line,
+                            column: classAttr.loc.start.column + classNameEnd,
+                        };
+                        context.report({
+                            node,
+                            loc: { start: startLoc, end: endLoc },
+                            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: [] }),
+                        });
+                    }
+                });
+            }
+        }
+        return {
+            Tag: check,
+        };
+    },
+};

package/build/rules/utils/node.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @param {string} key
+ * @returns {AttributeNode | undefined}
+ */
+declare function findAttr(node: any, key: any): any;
+/**
+ * Checks whether a node's attributes is empty or not.
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @returns {boolean}
+ */
+declare function isAttributesEmpty(node: any): boolean;
+/**
+ * Checks whether a node's all tokens are on the same line or not.
+ * @param {AnyNode} node A node to check
+ * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
+ */
+declare function isNodeTokensOnSameLine(node: any): boolean;
+/**
+ *
+ * @param {Range} rangeA
+ * @param {Range} rangeB
+ * @returns {boolean}
+ */
+declare function isRangesOverlap(rangeA: any, rangeB: any): boolean;
+/**
+ * @param {(TextNode | CommentContentNode)['templates']} templates
+ * @param {Range} range
+ * @returns {boolean}
+ */
+declare function isOverlapWithTemplates(templates: any, range: any): any;
+/**
+ *
+ * @param {TextNode | CommentContentNode} node
+ * @returns {LineNode[]}
+ */
+declare function splitToLineNodes(node: any): any[];
+/**
+ * Get location between two nodes.
+ * @param {BaseNode} before A node placed in before
+ * @param {BaseNode} after A node placed in after
+ * @returns {Location} location between two nodes.
+ */
+declare function getLocBetween(before: any, after: any): {
+    start: any;
+    end: any;
+};
+/**
+ * @param {AttributeValueNode} node
+ * @return {boolean}
+ */
+declare function isExpressionInTemplate(node: any): boolean;
+/**
+ * @param {AnyNode} node
+ * @returns {node is TagNode}
+ */
+declare function isTag(node: any): boolean;
+/**
+ * @param {AnyNode} node
+ * @returns {node is CommentNode}
+ */
+declare function isComment(node: any): boolean;
+/**
+ * @param {AnyNode} node
+ * @returns {node is TextNode}
+ */
+declare function isText(node: any): boolean;
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+declare function codeToLines(source: any): any;
+/**
+ *
+ * @param {AnyToken[]} tokens
+ * @returns {((CommentContentNode | TextNode)['templates'][number])[]}
+ */
+declare function getTemplateTokens(tokens: any): any[];
+export { findAttr, isAttributesEmpty, isNodeTokensOnSameLine, splitToLineNodes, getLocBetween, isExpressionInTemplate, isTag, isComment, isText, isOverlapWithTemplates, codeToLines, isRangesOverlap, getTemplateTokens, };

package/build/rules/utils/node.js

@@ -0,0 +1,197 @@
+"use strict";
+// THIS IS TAKEN FROM html-eslint
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findAttr = findAttr;
+exports.isAttributesEmpty = isAttributesEmpty;
+exports.isNodeTokensOnSameLine = isNodeTokensOnSameLine;
+exports.splitToLineNodes = splitToLineNodes;
+exports.getLocBetween = getLocBetween;
+exports.isExpressionInTemplate = isExpressionInTemplate;
+exports.isTag = isTag;
+exports.isComment = isComment;
+exports.isText = isText;
+exports.isOverlapWithTemplates = isOverlapWithTemplates;
+exports.codeToLines = codeToLines;
+exports.isRangesOverlap = isRangesOverlap;
+exports.getTemplateTokens = getTemplateTokens;
+const parser_1 = require("@html-eslint/parser");
+/**
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @param {string} key
+ * @returns {AttributeNode | undefined}
+ */
+function findAttr(node, key) {
+    return node.attributes.find((attr) => attr.key && attr.key.value.toLowerCase() === key.toLowerCase());
+}
+/**
+ * Checks whether a node's attributes is empty or not.
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @returns {boolean}
+ */
+function isAttributesEmpty(node) {
+    return !node.attributes || node.attributes.length <= 0;
+}
+/**
+ * Checks whether a node's all tokens are on the same line or not.
+ * @param {AnyNode} node A node to check
+ * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
+ */
+function isNodeTokensOnSameLine(node) {
+    return node.loc.start.line === node.loc.end.line;
+}
+/**
+ *
+ * @param {Range} rangeA
+ * @param {Range} rangeB
+ * @returns {boolean}
+ */
+function isRangesOverlap(rangeA, rangeB) {
+    return rangeA[0] < rangeB[1] && rangeB[0] < rangeA[1];
+}
+/**
+ * @param {(TextNode | CommentContentNode)['templates']} templates
+ * @param {Range} range
+ * @returns {boolean}
+ */
+function isOverlapWithTemplates(templates, range) {
+    return templates
+        .filter((template) => template.isTemplate)
+        .some((template) => isRangesOverlap(template.range, range));
+}
+/**
+ *
+ * @param {TextNode | CommentContentNode} node
+ * @returns {LineNode[]}
+ */
+function splitToLineNodes(node) {
+    let start = node.range[0];
+    let line = node.loc.start.line;
+    const startCol = node.loc.start.column;
+    /**
+     * @type {LineNode[]}
+     */
+    const lineNodes = [];
+    const templates = node.templates || [];
+    /**
+     *
+     * @param {import("../../types").Range} range
+     */
+    function shouldSkipIndentCheck(range) {
+        const overlappedTemplates = templates.filter((template) => template.isTemplate && isRangesOverlap(template.range, range));
+        const isLineInTemplate = overlappedTemplates.some((template) => {
+            return template.range[0] <= range[0] && template.range[1] >= range[1];
+        });
+        if (isLineInTemplate) {
+            return true;
+        }
+        const isLineBeforeTemplate = overlappedTemplates.some((template) => {
+            return template.range[0] <= range[0] && template.range[1] <= range[1];
+        });
+        if (isLineBeforeTemplate) {
+            return true;
+        }
+        const isLineAfterTemplate = overlappedTemplates.some((template) => {
+            return template.range[1] <= range[0];
+        });
+        if (isLineAfterTemplate) {
+            return true;
+        }
+        return false;
+    }
+    node.value.split("\n").forEach((value, index) => {
+        const columnStart = index === 0 ? startCol : 0;
+        /**
+         * @type {import("../../types").Range}
+         */
+        const range = [start, start + value.length];
+        const loc = {
+            start: {
+                line,
+                column: columnStart,
+            },
+            end: {
+                line,
+                column: columnStart + value.length,
+            },
+        };
+        /**
+         * @type {LineNode}
+         */
+        const lineNode = {
+            type: "Line",
+            value,
+            range,
+            loc,
+            skipIndentCheck: shouldSkipIndentCheck(range),
+        };
+        start += value.length + 1;
+        line += 1;
+        lineNodes.push(lineNode);
+    });
+    return lineNodes;
+}
+/**
+ * Get location between two nodes.
+ * @param {BaseNode} before A node placed in before
+ * @param {BaseNode} after A node placed in after
+ * @returns {Location} location between two nodes.
+ */
+function getLocBetween(before, after) {
+    return {
+        start: before.loc.end,
+        end: after.loc.start,
+    };
+}
+/**
+ * @param {AttributeValueNode} node
+ * @return {boolean}
+ */
+function isExpressionInTemplate(node) {
+    if (node.type === parser_1.NODE_TYPES.AttributeValue) {
+        return node.value.indexOf("${") === 0;
+    }
+    return false;
+}
+/**
+ * @param {AnyNode} node
+ * @returns {node is TagNode}
+ */
+function isTag(node) {
+    return node.type === parser_1.NODE_TYPES.Tag;
+}
+/**
+ * @param {AnyNode} node
+ * @returns {node is CommentNode}
+ */
+function isComment(node) {
+    return node.type === parser_1.NODE_TYPES.Comment;
+}
+/**
+ * @param {AnyNode} node
+ * @returns {node is TextNode}
+ */
+function isText(node) {
+    return node.type === parser_1.NODE_TYPES.Text;
+}
+const lineBreakPattern = /\r\n|[\r\n\u2028\u2029]/u;
+const lineEndingPattern = new RegExp(lineBreakPattern.source, "gu");
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function codeToLines(source) {
+    return source.split(lineEndingPattern);
+}
+/**
+ *
+ * @param {AnyToken[]} tokens
+ * @returns {((CommentContentNode | TextNode)['templates'][number])[]}
+ */
+function getTemplateTokens(tokens) {
+    return ([]
+        .concat(...tokens
+        // @ts-ignore
+        .map((token) => token["templates"] || []))
+        // @ts-ignore
+        .filter((token) => token.isTemplate));
+}

package/build/rules/utils/rule.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    removeClass: string;
+    changeVariant: string;
+    removeVariant: string;
+    ensureButtonClasses: string;
+    ensureSizeAttribute: string;
+};

package/build/rules/utils/rule.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = void 0;
+exports.messages = {
+    removeClass: "Remove the slds-button_icon-inverse class from the modal close button in components that use the SLDS modal blueprint.",
+    changeVariant: "Change the variant attribute value from bare-inverse to bare in <lightning-button-icon> or <lightning-icon>.",
+    removeVariant: "Remove the variant attribute from the <lightning-icon> component inside the <button> element.",
+    ensureButtonClasses: "Add or move slds-button and slds-button_icon to the class attribute of the <button> element or <lightning-button-icon> component.",
+    ensureSizeAttribute: "To size icons properly, set the size attribute ‌to large in the <lightning-icon> and <lightning-button-icon> components.",
+};

package/build/services/metadata.service.d.ts

@@ -0,0 +1,53 @@
+export * from '@salesforce-ux/sds-metadata';
+/**
+ * Enum representing all available metadata JSON files
+ */
+export declare enum MetadataFile {
+    AURA_TO_LWC_TOKENS = "auraToLwcTokensMapping.json",
+    BEM_NAMING = "bem-naming.json",
+    DEPRECATED_CLASSES = "deprecatedClasses.json",
+    DEPRECATED_STYLING_HOOKS = "deprecatedStylingHooks.json",
+    GLOBAL_STYLING_HOOKS = "globalStylingHooks.metadata.json",
+    ICONS = "icons.json",
+    LWC_TO_SLDS = "lwc-to-slds.json",
+    SLDS_CLASSES = "sldsClasses.json",
+    SLDS_PLUS_CLASSES = "sldsPlusClasses.json",
+    SLDS_PLUS_STYLING_HOOKS = "sldsPlusStylingHooks.json",
+    SLDS_STYLING_HOOKS = "sldsStylingHooks.json",
+    VALUE_TO_STYLING_HOOKS_COSMOS = "valueToStylingHooks.cosmos.json",
+    VALUE_TO_STYLING_HOOKS_SLDS = "valueToStylingHooks.slds.json"
+}
+export declare class MetadataService {
+    private static instance;
+    private readonly metadataPath;
+    private cache;
+    private constructor();
+    /**
+     * Get the singleton instance of MetadataService
+     */
+    static getInstance(): MetadataService;
+    /**
+     * Loads a metadata file from the package
+     * @param filePath - Path to the metadata file relative to the metadata package root
+     * @returns Parsed metadata as a JavaScript object/array
+     */
+    private loadMetadata;
+    /**
+     * Loads multiple metadata files from the package
+     * @param filePaths - Array of paths to metadata files relative to the metadata package root
+     * @returns Array of parsed metadata as JavaScript objects/arrays
+     */
+    private loadMultipleMetadata;
+    /**
+     * Static method to load a single metadata file
+     * @param file - The metadata file to load
+     * @returns Parsed metadata as a JavaScript object/array
+     */
+    static loadMetadata<T>(file: MetadataFile): T;
+    /**
+     * Static method to load multiple metadata files
+     * @param files - Array of metadata files to load
+     * @returns Array of parsed metadata as JavaScript objects/arrays
+     */
+    static loadMultipleMetadata<T>(files: MetadataFile[]): T[];
+}

package/build/services/metadata.service.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetadataService = exports.MetadataFile = void 0;
+__exportStar(require("@salesforce-ux/sds-metadata"), exports);
+const path_1 = require("path");
+const fs_1 = require("fs");
+/**
+ * Enum representing all available metadata JSON files
+ */
+var MetadataFile;
+(function (MetadataFile) {
+    MetadataFile["AURA_TO_LWC_TOKENS"] = "auraToLwcTokensMapping.json";
+    MetadataFile["BEM_NAMING"] = "bem-naming.json";
+    MetadataFile["DEPRECATED_CLASSES"] = "deprecatedClasses.json";
+    MetadataFile["DEPRECATED_STYLING_HOOKS"] = "deprecatedStylingHooks.json";
+    MetadataFile["GLOBAL_STYLING_HOOKS"] = "globalStylingHooks.metadata.json";
+    MetadataFile["ICONS"] = "icons.json";
+    MetadataFile["LWC_TO_SLDS"] = "lwc-to-slds.json";
+    MetadataFile["SLDS_CLASSES"] = "sldsClasses.json";
+    MetadataFile["SLDS_PLUS_CLASSES"] = "sldsPlusClasses.json";
+    MetadataFile["SLDS_PLUS_STYLING_HOOKS"] = "sldsPlusStylingHooks.json";
+    MetadataFile["SLDS_STYLING_HOOKS"] = "sldsStylingHooks.json";
+    MetadataFile["VALUE_TO_STYLING_HOOKS_COSMOS"] = "valueToStylingHooks.cosmos.json";
+    MetadataFile["VALUE_TO_STYLING_HOOKS_SLDS"] = "valueToStylingHooks.slds.json";
+})(MetadataFile || (exports.MetadataFile = MetadataFile = {}));
+class MetadataService {
+    static instance;
+    metadataPath;
+    cache = new Map();
+    constructor() {
+        // Create a require function for the current module
+        //const require = createRequire(import.meta.url);
+        // Resolve the path to @salesforce-ux/sds-metadata package
+        this.metadataPath = require.resolve('@salesforce-ux/sds-metadata');
+    }
+    /**
+     * Get the singleton instance of MetadataService
+     */
+    static getInstance() {
+        if (!MetadataService.instance) {
+            MetadataService.instance = new MetadataService();
+        }
+        return MetadataService.instance;
+    }
+    /**
+     * Loads a metadata file from the package
+     * @param filePath - Path to the metadata file relative to the metadata package root
+     * @returns Parsed metadata as a JavaScript object/array
+     */
+    loadMetadata(filePath) {
+        try {
+            // Check cache first
+            if (this.cache.has(filePath)) {
+                return this.cache.get(filePath);
+            }
+            const fullPath = (0, path_1.join)(this.metadataPath, '..', filePath);
+            const fileContent = (0, fs_1.readFileSync)(fullPath, 'utf8');
+            const data = JSON.parse(fileContent);
+            // Cache the result
+            this.cache.set(filePath, data);
+            return data;
+        }
+        catch (error) {
+            throw new Error(`Failed to load metadata file: ${filePath}. Error: ${error.message}`);
+        }
+    }
+    /**
+     * Loads multiple metadata files from the package
+     * @param filePaths - Array of paths to metadata files relative to the metadata package root
+     * @returns Array of parsed metadata as JavaScript objects/arrays
+     */
+    loadMultipleMetadata(filePaths) {
+        return filePaths.map(filePath => this.loadMetadata(filePath));
+    }
+    /**
+     * Static method to load a single metadata file
+     * @param file - The metadata file to load
+     * @returns Parsed metadata as a JavaScript object/array
+     */
+    static loadMetadata(file) {
+        return MetadataService.getInstance().loadMetadata(file);
+    }
+    /**
+     * Static method to load multiple metadata files
+     * @param files - Array of metadata files to load
+     * @returns Array of parsed metadata as JavaScript objects/arrays
+     */
+    static loadMultipleMetadata(files) {
+        return MetadataService.getInstance().loadMultipleMetadata(files);
+    }
+}
+exports.MetadataService = MetadataService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce-ux/eslint-plugin-slds",
-  "version": "0.1.5",
+  "version": "0.1.7-alpha.0",
   "main": "build/index.js",
   "files": [
     "build/*",
@@ -20,6 +20,7 @@
   "dependencies": {
     "@html-eslint/eslint-plugin": "^0.34.0",
     "@html-eslint/parser": "^0.34.0",
+    "@salesforce-ux/sds-metadata": "~0.0.1-alpha.3",
     "eslint": "^8.0.0"
   },
   "repository": {