@angular-eslint/eslint-plugin 17.2.2-alpha.7 → 17.2.2-alpha.9

package/README.md

@@ -43,6 +43,7 @@
 | [`component-class-suffix`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/component-class-suffix.md) | Classes decorated with @Component must have suffix "Component" (or custom) in their name. See more at https://angular.io/styleguide#style-02-03 | :white_check_mark: |  |  |
 | [`component-max-inline-declarations`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/component-max-inline-declarations.md) | Enforces a maximum number of lines in inline template, styles and animations. See more at https://angular.io/guide/styleguide#style-05-04 |  |  |  |
 | [`component-selector`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/component-selector.md) | Component selectors should follow given naming rules. See more at https://angular.io/guide/styleguide#style-02-07, https://angular.io/guide/styleguide#style-05-02 and https://angular.io/guide/styleguide#style-05-03. |  |  |  |
+| [`consistent-component-styles`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/consistent-component-styles.md) | Ensures component `styles`/`styleUrl` with `string` is used over `styles`/`styleUrls` when there is only a single string in the array |  | :wrench: |  |
 | [`contextual-decorator`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/contextual-decorator.md) | Ensures that classes use contextual decorators in its body |  |  |  |
 | [`directive-class-suffix`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/directive-class-suffix.md) | Classes decorated with @Directive must have suffix "Directive" (or custom) in their name. See more at https://angular.io/styleguide#style-02-03 | :white_check_mark: |  |  |
 | [`directive-selector`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/directive-selector.md) | Directive selectors should follow given naming rules. See more at https://angular.io/guide/styleguide#style-02-06 and https://angular.io/guide/styleguide#style-02-08. |  |  |  |
@@ -63,7 +64,7 @@
 | [`pipe-prefix`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/pipe-prefix.md) | Enforce consistent prefix for pipes. |  |  |  |
 | [`prefer-on-push-component-change-detection`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-on-push-component-change-detection.md) | Ensures component's `changeDetection` is set to `ChangeDetectionStrategy.OnPush` |  |  | :bulb: |
 | [`prefer-output-readonly`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-output-readonly.md) | Prefer to declare `@Output` as `readonly` since they are not supposed to be reassigned |  |  | :bulb: |
-| [`prefer-standalone-component`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-standalone-component.md) | Ensures component `standalone` property is set to `true` in the component decorator |  | :wrench: |  |
+| [`prefer-standalone`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-standalone.md) | Ensures component, directive and pipe `standalone` property is set to `true` in the component decorator |  | :wrench: |  |
 | [`relative-url-prefix`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/relative-url-prefix.md) | The ./ and ../ prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix. See more at https://angular.io/styleguide#style-05-04 |  |  |  |
 | [`require-localize-metadata`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/require-localize-metadata.md) | Ensures that $localize tagged messages contain helpful metadata to aid with translations. |  |  |  |
 | [`sort-ngmodule-metadata-arrays`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/sort-ngmodule-metadata-arrays.md) | Ensures ASC alphabetical order for `NgModule` metadata arrays for easy visual scanning |  | :wrench: |  |
@@ -82,4 +83,12 @@
 
 <!-- begin deprecated rule list -->
 
+### Deprecated
+
+<!-- prettier-ignore-start -->
+| Rule | Replaced by |
+| --- | --- |
+| [`prefer-standalone-component`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-standalone-component.md) | [`prefer-standalone`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-standalone-component.md) |
+<!-- prettier-ignore-end -->
+
 <!-- end deprecated rule list -->

package/dist/configs/all.json

@@ -5,6 +5,7 @@
     "@angular-eslint/component-class-suffix": "error",
     "@angular-eslint/component-max-inline-declarations": "error",
     "@angular-eslint/component-selector": "error",
+    "@angular-eslint/consistent-component-styles": "error",
     "@angular-eslint/contextual-decorator": "error",
     "@angular-eslint/contextual-lifecycle": "error",
     "@angular-eslint/directive-class-suffix": "error",
@@ -28,6 +29,7 @@
     "@angular-eslint/pipe-prefix": "error",
     "@angular-eslint/prefer-on-push-component-change-detection": "error",
     "@angular-eslint/prefer-output-readonly": "error",
+    "@angular-eslint/prefer-standalone": "error",
     "@angular-eslint/prefer-standalone-component": "error",
     "@angular-eslint/relative-url-prefix": "error",
     "@angular-eslint/require-localize-metadata": "error",

package/dist/index.js

@@ -30,6 +30,7 @@ const recommended_json_1 = __importDefault(require("./configs/recommended.json")
 const component_class_suffix_1 = __importStar(require("./rules/component-class-suffix"));
 const component_max_inline_declarations_1 = __importStar(require("./rules/component-max-inline-declarations"));
 const component_selector_1 = __importStar(require("./rules/component-selector"));
+const consistent_component_styles_1 = __importStar(require("./rules/consistent-component-styles"));
 const contextual_decorator_1 = __importStar(require("./rules/contextual-decorator"));
 const contextual_lifecycle_1 = __importStar(require("./rules/contextual-lifecycle"));
 const directive_class_suffix_1 = __importStar(require("./rules/directive-class-suffix"));
@@ -53,6 +54,7 @@ const no_queries_metadata_property_1 = __importStar(require("./rules/no-queries-
 const pipe_prefix_1 = __importStar(require("./rules/pipe-prefix"));
 const prefer_on_push_component_change_detection_1 = __importStar(require("./rules/prefer-on-push-component-change-detection"));
 const prefer_output_readonly_1 = __importStar(require("./rules/prefer-output-readonly"));
+const prefer_standalone_1 = __importStar(require("./rules/prefer-standalone"));
 const prefer_standalone_component_1 = __importStar(require("./rules/prefer-standalone-component"));
 const relative_url_prefix_1 = __importStar(require("./rules/relative-url-prefix"));
 const require_localize_metadata_1 = __importStar(require("./rules/require-localize-metadata"));
@@ -72,6 +74,7 @@ module.exports = {
         [component_class_suffix_1.RULE_NAME]: component_class_suffix_1.default,
         [component_max_inline_declarations_1.RULE_NAME]: component_max_inline_declarations_1.default,
         [component_selector_1.RULE_NAME]: component_selector_1.default,
+        [consistent_component_styles_1.RULE_NAME]: consistent_component_styles_1.default,
         [contextual_decorator_1.RULE_NAME]: contextual_decorator_1.default,
         [contextual_lifecycle_1.RULE_NAME]: contextual_lifecycle_1.default,
         [directive_class_suffix_1.RULE_NAME]: directive_class_suffix_1.default,
@@ -94,6 +97,7 @@ module.exports = {
         [no_queries_metadata_property_1.RULE_NAME]: no_queries_metadata_property_1.default,
         [pipe_prefix_1.RULE_NAME]: pipe_prefix_1.default,
         [prefer_on_push_component_change_detection_1.RULE_NAME]: prefer_on_push_component_change_detection_1.default,
+        [prefer_standalone_1.RULE_NAME]: prefer_standalone_1.default,
         [prefer_standalone_component_1.RULE_NAME]: prefer_standalone_component_1.default,
         [prefer_output_readonly_1.RULE_NAME]: prefer_output_readonly_1.default,
         [relative_url_prefix_1.RULE_NAME]: relative_url_prefix_1.default,

package/dist/rules/consistent-component-styles.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 = 'consistent-component-styles';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Ensures consistent usage of `styles`/`styleUrls`/`styleUrl` within Component metadata',
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'string',
+                enum: ['array', 'string'],
+            },
+        ],
+        messages: {
+            useStyleUrl: 'Use `styleUrl` instead of `styleUrls` for a single stylesheet',
+            useStyleUrls: 'Use `styleUrls` instead of `styleUrl`',
+            useStylesArray: 'Use a `string[]` instead of a `string` for the `styles` property',
+            useStylesString: 'Use a `string` instead of a `string[]` for the `styles` property',
+        },
+    },
+    defaultOptions: ['string'],
+    create(context, [mode]) {
+        const { COMPONENT_CLASS_DECORATOR, metadataProperty } = utils_1.Selectors;
+        const LITERAL_OR_TEMPLATE_LITERAL = ':matches(Literal, TemplateLiteral)';
+        if (mode === 'array') {
+            const stylesStringExpression = `${COMPONENT_CLASS_DECORATOR} ${metadataProperty('styles')} > ${LITERAL_OR_TEMPLATE_LITERAL}`;
+            const styleUrlProperty = `${COMPONENT_CLASS_DECORATOR} ${metadataProperty('styleUrl')}:has(:matches(Literal, TemplateElement))`;
+            return {
+                [stylesStringExpression](node) {
+                    context.report({
+                        node,
+                        messageId: 'useStylesArray',
+                        fix: (fixer) => {
+                            return fixer.replaceText(node, utils_1.ASTUtils.isStringLiteral(node)
+                                ? `[${node.raw}]`
+                                : `[${context.getSourceCode().getText(node)}]`);
+                        },
+                    });
+                },
+                [styleUrlProperty](node) {
+                    context.report({
+                        node,
+                        messageId: 'useStyleUrls',
+                        fix: (fixer) => {
+                            return fixer.replaceText(node, utils_1.ASTUtils.isStringLiteral(node.value)
+                                ? `styleUrls: [${node.value.raw}]`
+                                : `styleUrls: [${context
+                                    .getSourceCode()
+                                    .getText(node.value)}]`);
+                        },
+                    });
+                },
+            };
+        }
+        else {
+            const singleArrayStringLiteral = `ArrayExpression:matches([elements.length=1]:has(${LITERAL_OR_TEMPLATE_LITERAL}))`;
+            const singleStylesArrayExpression = `${COMPONENT_CLASS_DECORATOR} ${metadataProperty('styles')} > ${singleArrayStringLiteral}`;
+            const singleStyleUrlsProperty = `${COMPONENT_CLASS_DECORATOR} ${metadataProperty('styleUrls')}:has(${singleArrayStringLiteral})`;
+            return {
+                [singleStylesArrayExpression](node) {
+                    // The selector ensures the element is not null.
+                    const el = node.elements[0];
+                    context.report({
+                        node,
+                        messageId: 'useStylesString',
+                        fix: (fixer) => {
+                            return fixer.replaceText(node, utils_1.ASTUtils.isStringLiteral(el)
+                                ? el.raw
+                                : context.getSourceCode().getText(el));
+                        },
+                    });
+                },
+                [singleStyleUrlsProperty](node) {
+                    // The selector ensures the value is an array with a single non-null element.
+                    const el = node.value.elements[0];
+                    context.report({
+                        node,
+                        messageId: 'useStyleUrl',
+                        fix: (fixer) => {
+                            return fixer.replaceText(node, utils_1.ASTUtils.isStringLiteral(el)
+                                ? `styleUrl: ${el.raw}`
+                                : `styleUrl: ${context.getSourceCode().getText(el)}`);
+                        },
+                    });
+                },
+            };
+        }
+    },
+});

package/dist/rules/prefer-standalone-component.js

@@ -13,6 +13,8 @@ exports.default = (0, create_eslint_rule_1.createESLintRule)({
         docs: {
             description: `Ensures component \`${METADATA_PROPERTY_NAME}\` property is set to \`${IS_STANDALONE}\` in the component decorator`,
         },
+        deprecated: true,
+        replacedBy: ['prefer-standalone'],
         fixable: 'code',
         schema: [],
         messages: {

package/dist/rules/prefer-standalone.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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-standalone';
+const METADATA_PROPERTY_NAME = 'standalone';
+const IS_STANDALONE = 'true';
+exports.default = (0, create_eslint_rule_1.createESLintRule)({
+    name: exports.RULE_NAME,
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: `Ensures component, directive and pipe \`${METADATA_PROPERTY_NAME}\` property is set to \`${IS_STANDALONE}\` in the component decorator`,
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            preferStandalone: `The {{type}} \`${METADATA_PROPERTY_NAME}\` property should be set to \`${IS_STANDALONE}\``,
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const standaloneRuleFactory = (type) => (node) => {
+            const standalone = utils_1.ASTUtils.getDecoratorPropertyValue(node, METADATA_PROPERTY_NAME);
+            if (standalone &&
+                utils_1.ASTUtils.isLiteral(standalone) &&
+                standalone.value === true) {
+                return;
+            }
+            context.report({
+                node: nodeToReport(node),
+                messageId: 'preferStandalone',
+                data: { type },
+                fix: (fixer) => {
+                    if (standalone &&
+                        utils_1.ASTUtils.isLiteral(standalone) &&
+                        standalone.value !== true) {
+                        return [fixer.replaceText(standalone, IS_STANDALONE)].filter(utils_1.isNotNullOrUndefined);
+                    }
+                    return [
+                        utils_1.RuleFixes.getDecoratorPropertyAddFix(node, fixer, `${METADATA_PROPERTY_NAME}: ${IS_STANDALONE}`),
+                    ].filter(utils_1.isNotNullOrUndefined);
+                },
+            });
+        };
+        return {
+            [utils_1.Selectors.COMPONENT_CLASS_DECORATOR]: standaloneRuleFactory('component'),
+            [utils_1.Selectors.DIRECTIVE_CLASS_DECORATOR]: standaloneRuleFactory('directive'),
+            [utils_1.Selectors.PIPE_CLASS_DECORATOR]: standaloneRuleFactory('pipe'),
+        };
+    },
+});
+function nodeToReport(node) {
+    if (!utils_1.ASTUtils.isProperty(node)) {
+        return node;
+    }
+    return utils_1.ASTUtils.isMemberExpression(node.value)
+        ? node.value.property
+        : node.value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin",
-  "version": "17.2.2-alpha.7",
+  "version": "17.2.2-alpha.9",
   "description": "ESLint plugin for Angular applications, following angular.io/styleguide",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,7 +17,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/utils": "17.2.2-alpha.7",
+    "@angular-eslint/utils": "17.2.2-alpha.9",
     "@typescript-eslint/utils": "7.2.0"
   },
   "peerDependencies": {