fix(eslint-plugin): fix max inline declarations rule for styles string

angular-eslint · Nov 20, 2023 · 5e1968f · 5e1968f
1 parent b489924
commit 5e1968f
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 6 deletions.
diff --git a/packages/eslint-plugin/docs/rules/component-max-inline-declarations.md b/packages/eslint-plugin/docs/rules/component-max-inline-declarations.md
@@ -179,6 +179,42 @@ class Test {}
 
 #### ❌ Invalid Code
 
+```ts
+@Component({
+  styles: `
+          ~
+    div {
+      display: block;
+      height: 40px;
+    }
+  `
+  ~
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/component-max-inline-declarations": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
 ```ts
 @Component({
   styles: [
@@ -455,6 +491,35 @@ class Test {}
 
 #### ✅ Valid Code
 
+```ts
+@Component({
+  styles: 'div { display: none; }'
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/component-max-inline-declarations": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
 ```ts
 @Component({
   animations: [state('void', style({opacity: 0, transform: 'scale(1, 0)'}))]

diff --git a/packages/eslint-plugin/src/rules/component-max-inline-declarations.ts b/packages/eslint-plugin/src/rules/component-max-inline-declarations.ts
@@ -89,12 +89,15 @@ export default createESLintRule<Options, MessageIds>({
       [`${Selectors.COMPONENT_CLASS_DECORATOR} Property[key.name='styles']`]({
         value,
       }: TSESTree.Property) {
-        if (!ASTUtils.isArrayExpression(value)) return;
-
-        const lineCount = value.elements.reduce(
-          (lines, element) => lines + (element ? getLinesCount(element) : 0),
-          0,
-        );
+        let lineCount: number;
+        if (!ASTUtils.isArrayExpression(value)) {
+          lineCount = getLinesCount(value);
+        } else {
+          lineCount = value.elements.reduce(
+            (lines, element) => lines + (element ? getLinesCount(element) : 0),
+            0,
+          );
+        }
 
         if (lineCount <= styles) return;
 

diff --git a/packages/eslint-plugin/tests/rules/component-max-inline-declarations/cases.ts b/packages/eslint-plugin/tests/rules/component-max-inline-declarations/cases.ts
@@ -18,6 +18,13 @@ export const valid = [
     })
     class Test {}
     `,
+  // should succeed if the number of the styles lines does not exceeds the default lines limit with a string value
+  `
+    @Component({
+      styles: 'div { display: none; }'
+    })
+    class Test {}
+    `,
   // should succeed if the number of the animations lines does not exceeds the default lines limit
   `
     @Component({
@@ -99,6 +106,25 @@ export const invalid = [
     messageId,
     data: { lineCount: 4, max: 3, propertyType: 'styles' },
   }),
+  convertAnnotatedSourceToFailureCase({
+    description:
+      'should fail if the number of the styles lines exceeds the default lines limit with a string value',
+    annotatedSource: `
+      @Component({
+        styles: \`
+                ~
+          div {
+            display: block;
+            height: 40px;
+          }
+        \`
+        ~
+      })
+      class Test {}
+      `,
+    messageId,
+    data: { lineCount: 4, max: 3, propertyType: 'styles' },
+  }),
   convertAnnotatedSourceToFailureCase({
     description:
       'should fail if the sum of lines (from separate styles) exceeds the default lines limit',