@angular-eslint/eslint-plugin-template 22.3.1-alpha.4 → 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-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-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.4",
+  "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.4",
-    "@angular-eslint/utils": "22.3.1-alpha.4",
+    "@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.4",
+    "@angular-eslint/test-utils": "22.3.1-alpha.5",
     "@types/aria-query": "5.0.4"
   },
   "peerDependencies": {
-    "@angular-eslint/template-parser": "22.3.1-alpha.4",
+    "@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",