@angular-eslint/eslint-plugin-template 22.3.1-alpha.2 → 22.3.1-alpha.4

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/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;AAuCH,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 {
@@ -34,7 +36,7 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
                 }
                 else {
                     // Ignore native elements.
-                    if ('name' in node && (0, get_dom_elements_1.getDomElements)().has(node.name.toLowerCase())) {
+                    if ('name' in node && isNativeElement(node.name)) {
                         return;
                     }
                     processElementOrTemplateNode(node);
@@ -135,6 +137,16 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         }
     },
 });
+function isNativeElement(name) {
+    const lowerCaseName = name.toLowerCase();
+    // The Angular compiler namespaces the children of `<svg>` and `<math>`
+    // (e.g. `:svg:use` and `:math:mi`). These are foreign elements that are
+    // native to the browser, and self-closing some of them (such as `<title />`)
+    // produces a template that Angular cannot parse.
+    return (lowerCaseName.startsWith(':svg:') ||
+        lowerCaseName.startsWith(':math:') ||
+        (0, get_dom_elements_1.getDomElements)().has(lowerCaseName));
+}
 function isContentNode(node) {
     return 'name' in node && node.name.toLowerCase() === 'ng-content';
 }

package/dist/utils/literal-primitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"literal-primitive.d.ts","sourceRoot":"","sources":["../../src/utils/literal-primitive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,gBAAgB,EACjB,MAAM,0CAA0C,CAAC;AAElD,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,gBAAgB,CAEtE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,GAAG,GACR,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAE7D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,KAAK,GACX,MAAM,CAIR"}
+{"version":3,"file":"literal-primitive.d.ts","sourceRoot":"","sources":["../../src/utils/literal-primitive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,gBAAgB,EACjB,MAAM,0CAA0C,CAAC;AAElD,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,IAAI,gBAAgB,CAStE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,GAAG,GACR,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAE7D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,KAAK,GACX,MAAM,CAIR"}

package/dist/utils/literal-primitive.js

@@ -5,7 +5,12 @@ exports.isStringLiteralPrimitive = isStringLiteralPrimitive;
 exports.getLiteralPrimitiveStringValue = getLiteralPrimitiveStringValue;
 const bundled_angular_compiler_1 = require("@angular-eslint/bundled-angular-compiler");
 function isLiteralPrimitive(node) {
-    return node instanceof bundled_angular_compiler_1.LiteralPrimitive;
+    // The template parser stamps `type` from `constructor.name`. `instanceof`
+    // fails when more than one copy of `@angular-eslint/bundled-angular-compiler`
+    // is installed (version mismatches, Yarn `hoistingLimits`, etc.).
+    return (!!node &&
+        (node.type === 'LiteralPrimitive' ||
+            node instanceof bundled_angular_compiler_1.LiteralPrimitive));
 }
 function isStringLiteralPrimitive(node) {
     return isLiteralPrimitive(node) && typeof node.value === 'string';

package/package.json

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