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

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. |  |  |  |

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",

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"));
@@ -72,6 +73,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,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin",
-  "version": "17.2.2-alpha.7",
+  "version": "17.2.2-alpha.8",
   "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.8",
     "@typescript-eslint/utils": "7.2.0"
   },
   "peerDependencies": {