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

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

@@ -1,7 +1,15 @@
+/**
+ * - `false`: never allowed.
+ * - `true`: always allowed.
+ * - `'dynamic'`: allowed only when the bound value is not a constant
+ *   (a literal, or an expression built exclusively from literals). Constant
+ *   values could live in a stylesheet, so they are still reported.
+ */
+export type AllowOption = boolean | 'dynamic';
 export type Options = [
     {
-        readonly allowNgStyle?: boolean;
-        readonly allowBindToStyle?: boolean;
+        readonly allowNgStyle?: AllowOption;
+        readonly allowBindToStyle?: AllowOption;
     }
 ];
 export type MessageIds = 'noInlineStyles';

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;;;;AAM5C,wBA4EG;AAEH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"no-inline-styles.d.ts","sourceRoot":"","sources":["../../src/rules/no-inline-styles.ts"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GAAG;IACpB;QACE,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,CAAC;QACpC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;KACzC;CACF,CAAC;AAKF,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC1C,eAAO,MAAM,SAAS,qBAAqB,CAAC;;;;AAM5C,wBAgFG;AASH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

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

@@ -4,6 +4,7 @@ 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 is_constant_expression_1 = require("../utils/is-constant-expression");
 const DEFAULT_OPTIONS = {
     allowNgStyle: false,
     allowBindToStyle: false,
@@ -21,11 +22,13 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                 type: 'object',
                 properties: {
                     allowNgStyle: {
-                        type: 'boolean',
+                        oneOf: [{ type: 'boolean' }, { type: 'string', enum: ['dynamic'] }],
+                        description: 'Whether `[ngStyle]` bindings are allowed. `true` allows them unconditionally. `"dynamic"` allows them only when the bound value is not a constant (e.g. `{ color: textColor }` is allowed, but `{ color: \'red\' }` is reported because it could be a class).',
                         default: DEFAULT_OPTIONS.allowNgStyle,
                     },
                     allowBindToStyle: {
-                        type: 'boolean',
+                        oneOf: [{ type: 'boolean' }, { type: 'string', enum: ['dynamic'] }],
+                        description: 'Whether `[style]`, `[style.property]` and `style="{{ }}"` bindings are allowed. `true` allows them unconditionally. `"dynamic"` allows them only when the bound value is not a constant (e.g. `[style.width.px]="column.width"` is allowed, but `[style.color]="\'red\'"` is reported because it could be a class).',
                         default: DEFAULT_OPTIONS.allowBindToStyle,
                     },
                 },
@@ -47,13 +50,13 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                         case bundled_angular_compiler_1.BindingType.Attribute:
                             return input.name === 'style';
                         case bundled_angular_compiler_1.BindingType.Style:
-                            return !allowBindToStyle;
+                            return !isAllowed(allowBindToStyle, input.value);
                         case bundled_angular_compiler_1.BindingType.Property:
                             if (input.name === 'style') {
-                                return !allowBindToStyle;
+                                return !isAllowed(allowBindToStyle, input.value);
                             }
                             if (input.name === 'ngStyle') {
-                                return !allowNgStyle;
+                                return !isAllowed(allowNgStyle, input.value);
                             }
                             return false;
                         default:
@@ -76,6 +79,12 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         };
     },
 });
+function isAllowed(option, value) {
+    if (option === 'dynamic') {
+        return !(0, is_constant_expression_1.isConstantExpression)(value);
+    }
+    return option === true;
+}
 exports.RULE_DOCS_EXTENSION = {
-    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.',
+    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. Setting an option to "dynamic" allows a binding only when its value cannot be known ahead of time (for example `[style.width.px]="column.width"`), while still reporting bindings whose value is a constant (for example `[style.color]="\'red\'"`), since those could be expressed as a class instead.',
 };

package/dist/rules/prefer-at-else.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefer-at-else.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-at-else.ts"],"names":[],"mappings":"AAeA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAe1C,wBA+HG;AAoGH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}
+{"version":3,"file":"prefer-at-else.d.ts","sourceRoot":"","sources":["../../src/rules/prefer-at-else.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,eAAO,MAAM,SAAS,mBAAmB,CAAC;;;;AAe1C,wBAwKG;AAoGH,eAAO,MAAM,mBAAmB;;CAG/B,CAAC"}

package/dist/rules/prefer-at-else.js

@@ -37,6 +37,22 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
     create(context) {
         const parserServices = (0, utils_1.getTemplateParserServices)(context);
         const previousNodeStack = [undefined];
+        function wouldPreventContentProjection(nodes) {
+            let rootNodeCount = 0;
+            let hasProjectableNode = false;
+            for (const node of nodes) {
+                if (node instanceof bundled_angular_compiler_1.TmplAstText &&
+                    context.sourceCode.text
+                        .slice(node.sourceSpan.start.offset, node.sourceSpan.end.offset)
+                        .trim() === '') {
+                    continue;
+                }
+                rootNodeCount++;
+                hasProjectableNode ||=
+                    node instanceof bundled_angular_compiler_1.TmplAstElement || node instanceof bundled_angular_compiler_1.TmplAstTemplate;
+            }
+            return rootNodeCount > 1 && hasProjectableNode;
+        }
         function getFix(previous, current) {
             const previousIf = previous.node.branches[0];
             const currentIf = current.node.branches[0];
@@ -48,6 +64,22 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
             if (currentIf.expressionAlias) {
                 return null;
             }
+            // Angular's content projection through control flow only works reliably
+            // when a branch has a single root node. If fixing this violation would
+            // merge multiple roots into an existing branch, keep reporting the
+            // violation but do not offer an unsafe automatic fix.
+            if ((previousElse &&
+                wouldPreventContentProjection([
+                    ...previousElse.children,
+                    ...currentIf.children,
+                ])) ||
+                (currentElse &&
+                    wouldPreventContentProjection([
+                        ...previousIf.children,
+                        ...currentElse.children,
+                    ]))) {
+                return null;
+            }
             return function* fix(fixer) {
                 if (!previousElse) {
                     // The previous `@if` block has no `@else` block,

package/dist/utils/is-constant-expression.d.ts

@@ -0,0 +1,18 @@
+import { type AST } from '@angular-eslint/bundled-angular-compiler';
+/**
+ * Determines whether a template expression is a constant, i.e. its value is
+ * fully determined by the template source alone and can never change at
+ * runtime.
+ *
+ * An expression is constant when it is built exclusively from literals
+ * (strings, numbers, booleans, `null`, `undefined`, literal maps, literal
+ * arrays and template literals) combined with pure operators (arithmetic,
+ * logical, comparison, conditional, `typeof`, `void`, `!`, `!!`, parentheses).
+ *
+ * Anything that reads component state (property reads, keyed reads), performs
+ * a call, or applies a pipe is dynamic. Unknown node types are also treated as
+ * dynamic, so that this helper fails open rather than reporting false
+ * positives.
+ */
+export declare function isConstantExpression(node: AST): boolean;
+//# sourceMappingURL=is-constant-expression.d.ts.map

package/dist/utils/is-constant-expression.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-constant-expression.d.ts","sourceRoot":"","sources":["../../src/utils/is-constant-expression.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EAgBT,MAAM,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAoDvD"}

package/dist/utils/is-constant-expression.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isConstantExpression = isConstantExpression;
+const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
+/**
+ * Determines whether a template expression is a constant, i.e. its value is
+ * fully determined by the template source alone and can never change at
+ * runtime.
+ *
+ * An expression is constant when it is built exclusively from literals
+ * (strings, numbers, booleans, `null`, `undefined`, literal maps, literal
+ * arrays and template literals) combined with pure operators (arithmetic,
+ * logical, comparison, conditional, `typeof`, `void`, `!`, `!!`, parentheses).
+ *
+ * Anything that reads component state (property reads, keyed reads), performs
+ * a call, or applies a pipe is dynamic. Unknown node types are also treated as
+ * dynamic, so that this helper fails open rather than reporting false
+ * positives.
+ */
+function isConstantExpression(node) {
+    if (node instanceof bundled_angular_compiler_1.ASTWithSource) {
+        return isConstantExpression(node.ast);
+    }
+    if (node instanceof bundled_angular_compiler_1.LiteralPrimitive || node instanceof bundled_angular_compiler_1.EmptyExpr) {
+        return true;
+    }
+    if (node instanceof bundled_angular_compiler_1.LiteralMap) {
+        return node.values.every(isConstantExpression);
+    }
+    if (node instanceof bundled_angular_compiler_1.LiteralArray) {
+        return node.expressions.every(isConstantExpression);
+    }
+    if (node instanceof bundled_angular_compiler_1.Interpolation || node instanceof bundled_angular_compiler_1.TemplateLiteral) {
+        return node.expressions.every(isConstantExpression);
+    }
+    if (node instanceof bundled_angular_compiler_1.ParenthesizedExpression) {
+        return isConstantExpression(node.expression);
+    }
+    // `Unary` extends `Binary`, so it must be checked first.
+    if (node instanceof bundled_angular_compiler_1.Unary) {
+        return isConstantExpression(node.expr);
+    }
+    if (node instanceof bundled_angular_compiler_1.Binary) {
+        return isConstantExpression(node.left) && isConstantExpression(node.right);
+    }
+    if (node instanceof bundled_angular_compiler_1.Conditional) {
+        return (isConstantExpression(node.condition) &&
+            isConstantExpression(node.trueExp) &&
+            isConstantExpression(node.falseExp));
+    }
+    if (node instanceof bundled_angular_compiler_1.PrefixNot ||
+        node instanceof bundled_angular_compiler_1.TypeofExpression ||
+        node instanceof bundled_angular_compiler_1.VoidExpression ||
+        node instanceof bundled_angular_compiler_1.NonNullAssert) {
+        return isConstantExpression(node.expression);
+    }
+    return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "22.3.1-alpha.5",
+  "version": "22.3.1-alpha.7",
   "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.5",
-    "@angular-eslint/utils": "22.3.1-alpha.5",
+    "@angular-eslint/bundled-angular-compiler": "22.3.1-alpha.7",
+    "@angular-eslint/utils": "22.3.1-alpha.7",
     "aria-query": "5.3.2",
     "axobject-query": "4.1.0"
   },
   "devDependencies": {
-    "@angular-eslint/test-utils": "22.3.1-alpha.5",
+    "@angular-eslint/test-utils": "22.3.1-alpha.7",
     "@types/aria-query": "5.0.4"
   },
   "peerDependencies": {
-    "@angular-eslint/template-parser": "22.3.1-alpha.5",
+    "@angular-eslint/template-parser": "22.3.1-alpha.7",
     "@typescript-eslint/types": "^8.0.0",
     "@typescript-eslint/utils": "^8.0.0",
     "eslint": "^9.0.0 || ^10.0.0",