eslint-plugin-svelte 2.30.0 → 2.31.0

package/README.md

@@ -343,6 +343,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. |  |
 | [svelte/no-reactive-functions](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-functions/) | it's not necessary to define functions in reactive statements | :bulb: |
 | [svelte/no-reactive-literals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
+| [svelte/no-unused-class-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-class-name/) | disallow the use of a class in the template without a corresponding style |  |
 | [svelte/no-unused-svelte-ignore](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
 | [svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
 | [svelte/prefer-destructured-store-props](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
@@ -367,6 +368,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [svelte/max-attributes-per-line](https://sveltejs.github.io/eslint-plugin-svelte/rules/max-attributes-per-line/) | enforce the maximum number of attributes per line | :wrench: |
 | [svelte/mustache-spacing](https://sveltejs.github.io/eslint-plugin-svelte/rules/mustache-spacing/) | enforce unified spacing in mustache | :wrench: |
 | [svelte/no-extra-reactive-curlies](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-extra-reactive-curlies/) | disallow wrapping single reactive statements in curly braces | :bulb: |
+| [svelte/no-restricted-html-elements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-restricted-html-elements/) | disallow specific HTML elements |  |
 | [svelte/no-spaces-around-equal-signs-in-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-spaces-around-equal-signs-in-attribute/) | disallow spaces around equal signs in attribute | :wrench: |
 | [svelte/prefer-class-directive](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-class-directive/) | require class directives instead of ternary expressions | :wrench: |
 | [svelte/prefer-style-directive](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-style-directive/) | require style directives instead of style attribute | :wrench: |

package/lib/meta.d.ts

@@ -1,2 +1,2 @@
 export declare const name: "eslint-plugin-svelte";
-export declare const version: "2.30.0";
+export declare const version: "2.31.0";

package/lib/meta.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = "eslint-plugin-svelte";
-exports.version = "2.30.0";
+exports.version = "2.31.0";

package/lib/rules/no-restricted-html-elements.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types").RuleModule;
+export default _default;

package/lib/rules/no-restricted-html-elements.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+exports.default = (0, utils_1.createRule)("no-restricted-html-elements", {
+    meta: {
+        docs: {
+            description: "disallow specific HTML elements",
+            category: "Stylistic Issues",
+            recommended: false,
+            conflictWithPrettier: false,
+        },
+        schema: {
+            type: "array",
+            items: {
+                oneOf: [
+                    { type: "string" },
+                    {
+                        type: "object",
+                        properties: {
+                            elements: {
+                                type: "array",
+                                items: {
+                                    type: ["string"],
+                                },
+                                uniqueItems: true,
+                                minItems: 1,
+                            },
+                            message: { type: "string", minLength: 1 },
+                        },
+                        additionalProperties: false,
+                        minItems: 1,
+                    },
+                ],
+            },
+            uniqueItems: true,
+            minItems: 1,
+        },
+        messages: {},
+        type: "suggestion",
+    },
+    create(context) {
+        return {
+            SvelteElement(node) {
+                if (node.kind !== "html")
+                    return;
+                const { name } = node;
+                if (name.type !== "SvelteName")
+                    return;
+                for (const option of context.options) {
+                    const message = option.message ||
+                        `Unexpected use of forbidden HTML element ${name.name}.`;
+                    const elements = option.elements || [option];
+                    for (const element of elements) {
+                        if (element === name.name) {
+                            context.report({
+                                message,
+                                node: node.startTag,
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+});

package/lib/rules/no-unused-class-name.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types").RuleModule;
+export default _default;

package/lib/rules/no-unused-class-name.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
+exports.default = (0, utils_1.createRule)("no-unused-class-name", {
+    meta: {
+        docs: {
+            description: "disallow the use of a class in the template without a corresponding style",
+            category: "Best Practices",
+            recommended: false,
+        },
+        schema: [],
+        messages: {},
+        type: "suggestion",
+    },
+    create(context) {
+        const classesUsedInTemplate = {};
+        return {
+            SvelteElement(node) {
+                if (node.kind !== "html") {
+                    return;
+                }
+                const classes = node.startTag.attributes.flatMap(findClassesInAttribute);
+                for (const className of classes) {
+                    classesUsedInTemplate[className] = node.startTag.loc;
+                }
+            },
+            "Program:exit"() {
+                const styleContext = context.parserServices.getStyleContext();
+                if (["parse-error", "unknown-lang"].includes(styleContext.status)) {
+                    return;
+                }
+                const classesUsedInStyle = styleContext.sourceAst != null
+                    ? findClassesInPostCSSNode(styleContext.sourceAst)
+                    : [];
+                for (const className in classesUsedInTemplate) {
+                    if (!classesUsedInStyle.includes(className)) {
+                        context.report({
+                            loc: classesUsedInTemplate[className],
+                            message: `Unused class "${className}".`,
+                        });
+                    }
+                }
+            },
+        };
+    },
+});
+function findClassesInAttribute(attribute) {
+    if (attribute.type === "SvelteAttribute" && attribute.key.name === "class") {
+        return attribute.value.flatMap((value) => value.type === "SvelteLiteral" ? value.value.trim().split(/\s+/u) : []);
+    }
+    if (attribute.type === "SvelteDirective" && attribute.kind === "Class") {
+        return [attribute.key.name.name];
+    }
+    return [];
+}
+function findClassesInPostCSSNode(node) {
+    if (node.type === "rule") {
+        let classes = node.nodes.flatMap(findClassesInPostCSSNode);
+        const processor = (0, postcss_selector_parser_1.default)();
+        classes = classes.concat(findClassesInSelector(processor.astSync(node.selector)));
+        return classes;
+    }
+    if (node.type === "root" || node.type === "atrule") {
+        return node.nodes.flatMap(findClassesInPostCSSNode);
+    }
+    return [];
+}
+function findClassesInSelector(node) {
+    if (node.type === "class") {
+        return [node.value];
+    }
+    if (node.type === "pseudo" ||
+        node.type === "root" ||
+        node.type === "selector") {
+        return node.nodes.flatMap(findClassesInSelector);
+    }
+    return [];
+}

package/lib/utils/rules.js

@@ -36,12 +36,14 @@ const no_object_in_text_mustaches_1 = __importDefault(require("../rules/no-objec
 const no_reactive_functions_1 = __importDefault(require("../rules/no-reactive-functions"));
 const no_reactive_literals_1 = __importDefault(require("../rules/no-reactive-literals"));
 const no_reactive_reassign_1 = __importDefault(require("../rules/no-reactive-reassign"));
+const no_restricted_html_elements_1 = __importDefault(require("../rules/no-restricted-html-elements"));
 const no_shorthand_style_property_overrides_1 = __importDefault(require("../rules/no-shorthand-style-property-overrides"));
 const no_spaces_around_equal_signs_in_attribute_1 = __importDefault(require("../rules/no-spaces-around-equal-signs-in-attribute"));
 const no_store_async_1 = __importDefault(require("../rules/no-store-async"));
 const no_target_blank_1 = __importDefault(require("../rules/no-target-blank"));
 const no_trailing_spaces_1 = __importDefault(require("../rules/no-trailing-spaces"));
 const no_unknown_style_directive_property_1 = __importDefault(require("../rules/no-unknown-style-directive-property"));
+const no_unused_class_name_1 = __importDefault(require("../rules/no-unused-class-name"));
 const no_unused_svelte_ignore_1 = __importDefault(require("../rules/no-unused-svelte-ignore"));
 const no_useless_mustaches_1 = __importDefault(require("../rules/no-useless-mustaches"));
 const prefer_class_directive_1 = __importDefault(require("../rules/prefer-class-directive"));
@@ -94,12 +96,14 @@ exports.rules = [
     no_reactive_functions_1.default,
     no_reactive_literals_1.default,
     no_reactive_reassign_1.default,
+    no_restricted_html_elements_1.default,
     no_shorthand_style_property_overrides_1.default,
     no_spaces_around_equal_signs_in_attribute_1.default,
     no_store_async_1.default,
     no_target_blank_1.default,
     no_trailing_spaces_1.default,
     no_unknown_style_directive_property_1.default,
+    no_unused_class_name_1.default,
     no_unused_svelte_ignore_1.default,
     no_useless_mustaches_1.default,
     prefer_class_directive_1.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/sveltejs/eslint-plugin-svelte.git",
   "homepage": "https://sveltejs.github.io/eslint-plugin-svelte",
@@ -10,7 +10,7 @@
   ],
   "funding": "https://github.com/sponsors/ota-meshi",
   "license": "MIT",
-  "packageManager": "pnpm@7.32.5",
+  "packageManager": "pnpm@7.33.1",
   "engines": {
     "node": "^14.17.0 || >=16.0.0"
   },
@@ -43,7 +43,8 @@
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^6.0.0",
-    "svelte-eslint-parser": "^0.30.0"
+    "postcss-selector-parser": "^6.0.11",
+    "svelte-eslint-parser": "^0.31.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^1.2.3",
@@ -85,7 +86,7 @@
     "assert": "^2.0.0",
     "cross-spawn": "^7.0.3",
     "env-cmd": "^10.1.0",
-    "esbuild": "^0.17.0",
+    "esbuild": "^0.18.0",
     "esbuild-register": "^3.2.0",
     "escape-html": "^1.0.3",
     "eslint": "^8.40.0",
@@ -108,7 +109,7 @@
     "espree": "^9.5.2",
     "estree-walker": "^3.0.0",
     "less": "^4.1.2",
-    "locate-character": "^2.0.5",
+    "locate-character": "^3.0.0",
     "magic-string": "^0.30.0",
     "markdown-it-anchor": "^8.4.1",
     "markdown-it-container": "^3.0.0",