@angular-eslint/eslint-plugin-template 22.3.1-alpha.3 → 22.3.1-alpha.5

package/README.md

@@ -72,6 +72,7 @@ The premade flat configs that combine these rules are provided by the umbrella [
 | [`prefer-contextual-for-variables`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-contextual-for-variables.md) | Ensures that contextual variables are used in @for blocks where possible instead of aliasing them. |  | :wrench: |  |  |
 | [`prefer-control-flow`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-control-flow.md) | Ensures that the built-in control flow is used. | :white_check_mark: |  |  |  |
 | [`prefer-ngsrc`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-ngsrc.md) | Ensures ngSrc is used instead of src for img elements |  |  | :bulb: |  |
+| [`prefer-style-binding`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-style-binding.md) | Suggests using [style] bindings over ngStyle where applicable |  |  |  |  |
 | [`prefer-template-literal`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/prefer-template-literal.md) | Ensure that template literals are used instead of concatenating strings or expressions. |  | :wrench: |  |  |
 | [`require-switch-default`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/require-switch-default.md) | Requires a `@default` block on every `@switch` to ensure all cases are handled. This is the template equivalent of the `@typescript-eslint/switch-exhaustiveness-check` rule. |  |  |  |  |
 | [`role-has-required-aria`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/role-has-required-aria.md) | [Accessibility] Ensures elements with ARIA roles have all required properties for that role. |  |  | :bulb: | :accessibility: |

package/dist/index.d.ts

@@ -115,6 +115,9 @@ declare const _default: {
         "prefer-static-string-properties": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferStaticStringProperties", import("./rules/prefer-static-string-properties").Options, import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };
+        "prefer-style-binding": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferStyleBinding", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+            name: string;
+        };
         "prefer-template-literal": import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferTemplateLiteral", [], import("./utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
             name: string;
         };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,kBA6CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,kBA8CE"}

package/dist/index.js

@@ -71,6 +71,7 @@ const prefer_contextual_for_variables_1 = __importStar(require("./rules/prefer-c
 const prefer_control_flow_1 = __importStar(require("./rules/prefer-control-flow"));
 const prefer_self_closing_tags_1 = __importStar(require("./rules/prefer-self-closing-tags"));
 const prefer_static_string_properties_1 = __importStar(require("./rules/prefer-static-string-properties"));
+const prefer_style_binding_1 = __importStar(require("./rules/prefer-style-binding"));
 const prefer_template_literal_1 = __importStar(require("./rules/prefer-template-literal"));
 const require_switch_default_1 = __importStar(require("./rules/require-switch-default"));
 const role_has_required_aria_1 = __importStar(require("./rules/role-has-required-aria"));
@@ -115,6 +116,7 @@ module.exports = {
         [prefer_ngsrc_1.RULE_NAME]: prefer_ngsrc_1.default,
         [prefer_self_closing_tags_1.RULE_NAME]: prefer_self_closing_tags_1.default,
         [prefer_static_string_properties_1.RULE_NAME]: prefer_static_string_properties_1.default,
+        [prefer_style_binding_1.RULE_NAME]: prefer_style_binding_1.default,
         [prefer_template_literal_1.RULE_NAME]: prefer_template_literal_1.default,
         [require_switch_default_1.RULE_NAME]: require_switch_default_1.default,
         [role_has_required_aria_1.RULE_NAME]: role_has_required_aria_1.default,

package/dist/rules/no-inline-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-inline-styles.d.ts","sourceRoot":"","sources":["../../src/rules/no-inline-styles.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;QAChC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;KACrC;CACF,CAAC;AAKF,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC1C,eAAO,MAAM,SAAS,qBAAqB,CAAC;;;;AAE5C,wBAqEG;AAwCH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"no-inline-styles.d.ts","sourceRoot":"","sources":["../../src/rules/no-inline-styles.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;QAChC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;KACrC;CACF,CAAC;AAKF,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC1C,eAAO,MAAM,SAAS,qBAAqB,CAAC;;;;AAM5C,wBA4EG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/no-inline-styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
+const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
 const utils_1 = require("@angular-eslint/utils");
 const create_eslint_rule_1 = require("../utils/create-eslint-rule");
 const DEFAULT_OPTIONS = {
@@ -40,22 +41,27 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         return {
             Element(node) {
-                let isInvalid = false;
-                if (!allowNgStyle && !allowBindToStyle) {
-                    isInvalid =
-                        isNodeHasStyleAttribute(node) ||
-                            isNodeHasNgStyleAttribute(node) ||
-                            isNodeHasBindingToStyleAttribute(node);
-                }
-                else {
-                    const ngStyle = allowNgStyle
-                        ? false
-                        : isNodeHasNgStyleAttribute(node);
-                    const bindToStyle = allowBindToStyle
-                        ? false
-                        : isNodeHasBindingToStyleAttribute(node);
-                    isInvalid = isNodeHasStyleAttribute(node) || ngStyle || bindToStyle;
-                }
+                const hasDisallowedInput = node.inputs.some((input) => {
+                    const { __originalType: originalType, type } = input;
+                    switch (originalType ?? type) {
+                        case bundled_angular_compiler_1.BindingType.Attribute:
+                            return input.name === 'style';
+                        case bundled_angular_compiler_1.BindingType.Style:
+                            return !allowBindToStyle;
+                        case bundled_angular_compiler_1.BindingType.Property:
+                            if (input.name === 'style') {
+                                return !allowBindToStyle;
+                            }
+                            if (input.name === 'ngStyle') {
+                                return !allowNgStyle;
+                            }
+                            return false;
+                        default:
+                            return false;
+                    }
+                });
+                const isInvalid = node.attributes.some(({ name }) => name === 'style') ||
+                    hasDisallowedInput;
                 if (isInvalid) {
                     const loc = parserServices.convertElementSourceSpanToLoc(context, node);
                     context.report({
@@ -70,37 +76,6 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
-/**
- *  Check that an element (for example `<img>`) has a `style` attribute or `attr.style` binding.
- */
-function isNodeHasStyleAttribute(node) {
-    return (node.attributes.some(({ name }) => isStyle(name)) ||
-        node.inputs.some(({ name }) => isStyle(name)));
-}
-/**
- *  Check that an element (for example `<img>`) has a `ngStyle` attribute binding.
- */
-function isNodeHasNgStyleAttribute(node) {
-    return node.inputs.some(({ name }) => isNgStyle(name));
-}
-/**
- *  Check that an element (for example `<img>`) has a `[style.background-color]` attribute binding.
- */
-function isNodeHasBindingToStyleAttribute(node) {
-    return node.inputs.some(({ keySpan }) => isStyleBound(keySpan));
-}
-/**
- *  Check element is style
- */
-function isStyle(name) {
-    return name === 'style';
-}
-function isNgStyle(name) {
-    return name === 'ngStyle';
-}
-function isStyleBound(keySpan) {
-    return keySpan?.details ? keySpan.details.includes('style.') : false;
-}
 exports.RULE_DOCS_EXTENSION = {
-    rationale: 'Inline styles in templates (style attribute, ngStyle directive, or [style.property] bindings) make it difficult to maintain consistent styling across an application and can violate Content Security Policy (CSP) restrictions. Styles should be defined in component stylesheets or CSS classes where they can be managed centrally, reused, cached by browsers, and easily modified. Inline styles also mix presentation concerns with template structure, making templates harder to read. Using CSS classes with [class] or [ngClass] bindings provides the same dynamic styling capabilities while keeping styles organized and maintainable. This rule can be configured to allow ngStyle or style bindings if needed for specific use cases.',
+    rationale: 'Inline styles in templates (style attribute, ngStyle directive, [style] bindings, or [style.property] bindings) make it difficult to maintain consistent styling across an application and can violate Content Security Policy (CSP) restrictions. Styles should be defined in component stylesheets or CSS classes where they can be managed centrally, reused, cached by browsers, and easily modified. Inline styles also mix presentation concerns with template structure, making templates harder to read. Using CSS classes with [class] or [ngClass] bindings provides the same dynamic styling capabilities while keeping styles organized and maintainable. This rule can be configured to allow ngStyle or style bindings if needed for specific use cases.',
 };

package/dist/rules/no-nested-tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-nested-tags.d.ts","sourceRoot":"","sources":["../../src/rules/no-nested-tags.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAM1C,wBAqCG;AAmBH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"no-nested-tags.d.ts","sourceRoot":"","sources":["../../src/rules/no-nested-tags.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAM1C,wBAqCG;AAkCH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/no-nested-tags.js

@@ -40,6 +40,12 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
 function hasAncestorOfSameType(node) {
     let parent = node.parent;
     while (parent) {
+        // Explicit <ng-template> is not rendered in-place, so tags inside it
+        // are not nested in the parent element's DOM. Structural directives
+        // like *ngFor compile to implicit templates and must still be reported.
+        if (isExplicitNgTemplate(parent)) {
+            return false;
+        }
         if (parent instanceof bundled_angular_compiler_1.TmplAstElement &&
             parent.name.toLowerCase() === node.name.toLowerCase()) {
             return true;
@@ -48,6 +54,11 @@ function hasAncestorOfSameType(node) {
     }
     return false;
 }
+function isExplicitNgTemplate(node) {
+    return (node instanceof bundled_angular_compiler_1.TmplAstTemplate &&
+        typeof node.tagName === 'string' &&
+        /^(:svg:)?ng-template$/i.test(node.tagName));
+}
 exports.RULE_DOCS_EXTENSION = {
-    rationale: "Nesting `<p>` tags inside other `<p>` tags, or `<a>` tags inside other `<a>` tags, is invalid HTML and causes serious issues with Angular hydration. All browsers automatically close the outer tag when they encounter the inner tag, transforming `<p>1<p>2</p>3</p>` into `<p>1</p><p>2</p>3` in the DOM. This creates a mismatch between the server-rendered HTML and what Angular expects during hydration, breaking incremental hydration and potentially causing runtime errors. The browser's automatic correction of invalid HTML happens before Angular processes the template, so Angular cannot fix or work around it. Always use different elements (like `<p>` and `<span>`, or nested `<div>` tags) or restructure your template to avoid nesting these specific tags.",
+    rationale: "Nesting `<p>` tags inside other `<p>` tags, or `<a>` tags inside other `<a>` tags, is invalid HTML and causes serious issues with Angular hydration. All browsers automatically close the outer tag when they encounter the inner tag, transforming `<p>1<p>2</p>3</p>` into `<p>1</p><p>2</p>3` in the DOM. This creates a mismatch between the server-rendered HTML and what Angular expects during hydration, breaking incremental hydration and potentially causing runtime errors. The browser's automatic correction of invalid HTML happens before Angular processes the template, so Angular cannot fix or work around it. Always use different elements (like `<p>` and `<span>`, or nested `<div>` tags) or restructure your template to avoid nesting these specific tags. Explicit `<ng-template>` elements are an exception because they are not rendered in-place; tags inside them are not nested in the parent element's DOM.",
 };

package/dist/rules/prefer-self-closing-tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-self-closing-tags.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-self-closing-tags.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,uBAAuB,CAAC;AACjD,eAAO,MAAM,SAAS,6BAA6B,CAAC;;;;AAEpD,wBA+JG;AAoDH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-self-closing-tags.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-self-closing-tags.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,uBAAuB,CAAC;AACjD,eAAO,MAAM,SAAS,6BAA6B,CAAC;;;;AAEpD,wBAiKG;AAoDH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-self-closing-tags.js

@@ -22,9 +22,11 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
     },
     create(context) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
-        // angular 18 doesn't support self closing tags in index.html
-        if (/src[\\/]index\.html$/.test(context.physicalFilename)) {
-            // If it is, return an empty object to skip this rule
+        // An index.html file is served to the browser as-is rather than being
+        // compiled as an Angular template, and browsers do not support
+        // self-closing tags for custom elements, so skip the rule for any
+        // file with that name regardless of where it lives.
+        if (/(^|[\\/])index\.html$/.test(context.physicalFilename)) {
             return {};
         }
         return {

package/dist/rules/prefer-style-binding.d.ts

@@ -0,0 +1,10 @@
+export type MessageIds = 'preferStyleBinding';
+export declare const RULE_NAME = "prefer-style-binding";
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"preferStyleBinding", [], import("../utils/create-eslint-rule").RuleDocs, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+    name: string;
+};
+export default _default;
+export declare const RULE_DOCS_EXTENSION: {
+    rationale: string;
+};
+//# sourceMappingURL=prefer-style-binding.d.ts.map

package/dist/rules/prefer-style-binding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-style-binding.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-style-binding.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAC9C,eAAO,MAAM,SAAS,yBAAyB,CAAC;;;;AAEhD,wBA4BG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-style-binding.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RULE_DOCS_EXTENSION = exports.RULE_NAME = void 0;
+const utils_1 = require("@angular-eslint/utils");
+const create_eslint_rule_1 = require("../utils/create-eslint-rule");
+exports.RULE_NAME = 'prefer-style-binding';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Suggests using [style] bindings over ngStyle where applicable',
+        },
+        schema: [],
+        messages: {
+            preferStyleBinding: 'Consider using [style] or [style.property] bindings instead of [ngStyle] where applicable.',
+        },
+        defaultOptions: [],
+    },
+    create(context) {
+        const parserServices = (0, utils_1.getTemplateParserServices)(context);
+        return {
+            'BoundAttribute[name="ngStyle"]'(node) {
+                const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+                context.report({
+                    messageId: 'preferStyleBinding',
+                    loc,
+                });
+            },
+        };
+    },
+});
+exports.RULE_DOCS_EXTENSION = {
+    rationale: 'For simple cases, [style] and [style.property] bindings offer a more straightforward syntax with better performance than ngStyle, and the Angular style guide recommends them over the NgStyle directive. However, ngStyle should still be used when you need mutations on objects, as style bindings compare the bound object by reference and only apply updates when a new object instance is provided. Note that ngStyle also accepts unit suffixes on object keys (for example `{ "max-width.px": width }`), which [style] object bindings do not support; express these as [style.max-width.px] bindings instead. See https://angular.dev/style-guide#prefer-class-and-style-over-ngclass-and-ngstyle and https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings for more information. This rule helps identify potential simplification opportunities but should be applied judiciously based on your specific needs.',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "22.3.1-alpha.3",
+  "version": "22.3.1-alpha.5",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,17 +19,17 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/bundled-angular-compiler": "22.3.1-alpha.3",
-    "@angular-eslint/utils": "22.3.1-alpha.3",
+    "@angular-eslint/bundled-angular-compiler": "22.3.1-alpha.5",
+    "@angular-eslint/utils": "22.3.1-alpha.5",
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0"
   },
   "devDependencies": {
-    "@angular-eslint/test-utils": "22.3.1-alpha.3",
+    "@angular-eslint/test-utils": "22.3.1-alpha.5",
     "@types/aria-query": "5.0.4"
   },
   "peerDependencies": {
-    "@angular-eslint/template-parser": "22.3.1-alpha.3",
+    "@angular-eslint/template-parser": "22.3.1-alpha.5",
     "@typescript-eslint/types": "^8.0.0",
     "@typescript-eslint/utils": "^8.0.0",
     "eslint": "^9.0.0 || ^10.0.0",