feat(eslint-plugin): add rule to disallow single array styles

[csvn]

Angular v17 added a new Component.styleUrl property which accepts a string, and added the ability to use a string with the Component.styles property. This PR adds a linting rule to enforce & fix styles: ['...']/styleUrls: ['...'] to styles: '...'/styleUrl: '...'.

[JamesHenry]

Thanks @csvn!

I think it would be more flexible and useful to the whole community if we instead refactored this to be:

consistent-component-styles

The rule would take either string or array as an option, so that folks could enforce always using the array form instead if that's what they prefer. By all means we could make string be the default value, but I think having the option to enforce consistent arrays would be good for certain codebases.

Example string config:

"@angular-eslint/consistent-component-styles": "error" (because default)
OR
"@angular-eslint/consistent-component-styles": ["error", "string"]

Example array config:

"@angular-eslint/consistent-component-styles": ["error", "array"]

(Inspired by https://eslint.org/docs/latest/rules/consistent-this)

[csvn]

Thanks for taking a look James, and thanks for the feedback!
I think that's a good idea. In my mind it was very rare there ever was more than one string/URL, but I can still see someone wanting it consistently be an array. I'll update the PR shortly.

[JamesHenry]

@csvn Any update on this one please?

[csvn]

Sorry James, I ended up a bit busy with work and sickness during the holidays. I'll try to update this MR this week.

[reduckted]

I think the fix will need to apply for template strings. Using backticks for quotes is perfectly valid and, as far as I can tell, the string is not considered a "literal" (it has a type of TemplateLiteral rather than Literal):

@Component({
    styleUrls: [`./widget.component.ts`]
}

[reduckted]

I'm not sure if getting the element's text from the source code is the preferred way, but this works for me:

fix: (fixer) => {
  const [el] = node.elements;
  if (el) {
    if (ASTUtils.isStringLiteral(el)) {
      return [fixer.replaceText(node, el.raw)];
    }
    if (ASTUtils.isTemplateLiteral(el)) {
      return [
        fixer.replaceText(
          node,
          `${context.getSourceCode().getText(el)}`,
        ),
      ];
    }
  }
  return [];
},

[reduckted]

Two problems that I've found with this replacement.

1. It changes the quote type, which means it may end up breaking code. For example, "body { content: 'test'; }" would become 'body { content: 'test'; }'.
2. Any escaped characters are replaced. For example, 'body { content: "\t"; }' would become 'body { content: " "; }'

Thankfully the fix is simple! Use raw instead of value and don't wrap it in quotes.

return [fixer.replaceText(node, el.raw)];

[csvn]

I think it makes sense to close this PR, since #1710 seems to fix the remaining work I had on this PR.