@salesforce-ux/eslint-plugin-slds 0.0.11 → 0.0.12-alpha.0

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

@@ -0,0 +1,159 @@
+"use strict";
+const node_1 = require("./utils/node");
+module.exports = {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "Ensure SLDS modal compliance by enforcing correct button and icon attributes.",
+            category: "Best Practices",
+            recommended: true,
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            removeClass: "Remove the class 'slds-button_icon-inverse' from SLDS Modal blueprints.",
+            changeVariant: "Change 'variant' attribute from 'bare-inverse' to 'bare' in <lightning-button-icon> or <lightning-icon>.",
+            removeVariant: "Remove 'variant' attribute completely in <lightning-icon> inside <button>.",
+            ensureButtonClasses: "Ensure 'slds-button' and 'slds-button_icon' are in the class attribute of <button> or <lightning-button-icon>.",
+            ensureSizeAttribute: "Ensure 'size' attribute is set to 'large' in <lightning-icon> or <lightning-button-icon> for correct icon sizing.",
+        },
+    },
+    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")) {
+                        context.report({
+                            node,
+                            messageId: "removeClass",
+                            fix(fixer) {
+                                const newClassList = classList
+                                    .filter((cls) => 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");
+                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
+                    }
+                    // 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) {
+                                //return fixer.insertTextAfter(node, ' size="large"');
+                                if (variantAttr) {
+                                    return fixer.insertTextAfterRange([variantAttr?.range[1], variantAttr?.range[1]], ' size="large"');
+                                }
+                            },
+                        });
+                    }
+                    // Ensure 'slds-button' and 'slds-button_icon' are in the class attribute 
+                    if (classAttr && classAttr.value) {
+                        const classList = classAttr.value.value.split(/\s+/);
+                        if (!classList.includes("slds-button") || !classList.includes("slds-button_icon")) {
+                            context.report({
+                                node: classAttr,
+                                messageId: "ensureButtonClasses",
+                                fix(fixer) {
+                                    const newClassList = [
+                                        "slds-button",
+                                        "slds-button_icon",
+                                        ...classList.filter((cls) => cls !== "slds-button_icon-inverse"),
+                                    ].join(" ");
+                                    return fixer.replaceText(classAttr.value, `"${newClassList}"`);
+                                },
+                            });
+                        }
+                    }
+                }
+            }
+            // ✅ 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-slds-classes.d.ts

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

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

@@ -0,0 +1,56 @@
+"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: {
+            description: "Disallow usage of deprecated CSS classes",
+            category: "Best Practices",
+            recommended: true,
+        },
+        schema: [], // No additional options needed
+        messages: {
+            deprecatedClass: "The class '{{className}}' is deprecated and should not be used.",
+        },
+    },
+    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: "deprecatedClass",
+                        });
+                    }
+                });
+            }
+        }
+        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/package.json

@@ -1,30 +1,20 @@
 {
-    "name": "@salesforce-ux/eslint-plugin-slds",
-    "version": "0.0.11",
-    "main": "build/index.js",
-    "files": [
-        "build/*"
-    ],
-    "scripts": {
-        "build": "rollup -c",
-        "clean": "rm -rf build package-lock.json",
-        "test": "jest"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "description": "",
-    "dependencies": {
-        "@html-eslint/parser": "^0.34.0",
-        "eslint": "^8.0.0",
-        "@html-eslint/eslint-plugin": "^0.34.0"
-    },
-    "devDependencies": {
-        "@rollup/plugin-commonjs": "^28.0.2",
-        "@rollup/plugin-node-resolve": "^16.0.0",
-        "@rollup/plugin-json": "^6.1.0",
-        "jest": "^29.7.0",
-        "rollup": "^2.79.2",
-        "rollup-plugin-terser": "^7.0.2"
-    }
-}
+  "name": "@salesforce-ux/eslint-plugin-slds",
+  "version": "0.0.12-alpha.0",
+  "main": "build/index.js",
+  "files": [
+    "build/*",
+    "README.md",
+    "RULES.md",
+    ".eslintrc.yml"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@html-eslint/eslint-plugin": "^0.34.0",
+    "@html-eslint/parser": "^0.34.0",
+    "eslint": "^8.0.0"
+  }
+}