@salesforce-ux/eslint-plugin-slds 0.1.5 → 0.1.6

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");
+//TODO: load deprecatedClasses from @salesforce-ux/metadata-slds instead of local res file.
+const deprecatedClasses_1 = require("./deprecatedClasses");
+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_1.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce-ux/eslint-plugin-slds",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "build/index.js",
   "files": [
     "build/*",