@salesforce-ux/eslint-plugin-slds 0.1.4-alpha.3 → 0.1.5

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

@@ -1,193 +0,0 @@
-"use strict";
-const node_1 = require("./utils/node");
-module.exports = {
-    meta: {
-        type: "problem",
-        docs: {
-            category: "Best Practices",
-            recommended: true,
-        },
-        fixable: "code",
-        schema: [],
-        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.",
-        },
-    },
-    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")) {
-                        context.report({
-                            node,
-                            messageId: "removeClass",
-                            fix(fixer) {
-                                const newClassList = classList
-                                    .filter((cls) => (cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse"))
-                                    .join(" ");
-                                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")) {
-                            context.report({
-                                node,
-                                messageId: "removeClass",
-                                fix(fixer) {
-                                    const newClassList = classList
-                                        .filter((cls) => cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse")
-                                        .join(" ");
-                                    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")) {
-                            context.report({
-                                node: attribute,
-                                messageId: "ensureButtonClasses",
-                                fix(fixer) {
-                                    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(" ");
-                                    }
-                                    // const newClassList = [
-                                    //   "slds-button",
-                                    //   "slds-button_icon",
-                                    //   ...classList.filter((cls) => cls !== "slds-button_icon-inverse"),
-                                    // ].join(" ");
-                                    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,
-                                messageId: "changeVariant",
-                                fix(fixer) {
-                                    return fixer.replaceText(variantAttr.value, `bare`);
-                                },
-                            });
-                        }
-                        // Ensure size="large" exists
-                        if (!sizeAttr) {
-                            context.report({
-                                node,
-                                messageId: "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,
-                            messageId: "changeVariant",
-                            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,
-                            messageId: "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

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

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

@@ -1,55 +0,0 @@
-"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,
-        },
-        schema: [], // No additional options needed
-        messages: {
-            errorMsg: "The class {{className}} isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
-        },
-    },
-    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,
-                            },
-                            messageId: "errorMsg",
-                        });
-                    }
-                });
-            }
-        }
-        return {
-            Tag: check,
-        };
-    },
-};

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

@@ -1,79 +0,0 @@
-/**
- * @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

@@ -1,197 +0,0 @@
-"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));
-}