feat: added the consistent-selector-style rule (#925)

Author: marekdedic

.changeset/early-trainers-know.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: added the `consistent-selector-style` rule

README.md

@@ -380,6 +380,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [svelte/consistent-selector-style](https://sveltejs.github.io/eslint-plugin-svelte/rules/consistent-selector-style/) | enforce a consistent style for CSS selectors |  |
 | [svelte/derived-has-same-inputs-outputs](https://sveltejs.github.io/eslint-plugin-svelte/rules/derived-has-same-inputs-outputs/) | derived store should use same variable names between values and callback |  |
 | [svelte/first-attribute-linebreak](https://sveltejs.github.io/eslint-plugin-svelte/rules/first-attribute-linebreak/) | enforce the location of first attribute | :wrench: |
 | [svelte/html-closing-bracket-new-line](https://sveltejs.github.io/eslint-plugin-svelte/rules/html-closing-bracket-new-line/) | Require or disallow a line break before tag's closing brackets | :wrench: |

docs/rules.md

@@ -77,6 +77,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 
 | Rule ID                                                                                                  | Description                                                                        |          |
 | :------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- | :------- |
+| [svelte/consistent-selector-style](./rules/consistent-selector-style.md)                                 | enforce a consistent style for CSS selectors                                       |          |
 | [svelte/derived-has-same-inputs-outputs](./rules/derived-has-same-inputs-outputs.md)                     | derived store should use same variable names between values and callback           |          |
 | [svelte/first-attribute-linebreak](./rules/first-attribute-linebreak.md)                                 | enforce the location of first attribute                                            | :wrench: |
 | [svelte/html-closing-bracket-new-line](./rules/html-closing-bracket-new-line.md)                         | Require or disallow a line break before tag's closing brackets                     | :wrench: |

docs/rules/consistent-selector-style.md

@@ -0,0 +1,98 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/consistent-selector-style'
+description: 'enforce a consistent style for CSS selectors'
+---
+
+# svelte/consistent-selector-style
+
+> enforce a consistent style for CSS selectors
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule allows you to set a preferred style for your CSS (& other style language) selectors. In CSS, there is a wide list of options for selecting elements, however, the three most basic types are:
+
+- Selecting by element type (i.e. tag name), such as `a {}`
+- Selecting by element ID, such as `#link {}`
+- Selecting by element class, such as `.link {}`
+  This rule allows you to set a preference for some of these three styles over others. Not all selectors can be used in all situations, however. While class selectors can be used in any situation, ID selectors can only be used to select a single element and type selectors are only applicable when the list of selected elements is the list of all elements of the particular type. To help with this, the rule accepts a list of selector style preferences and reports situations when the given selector can be rewritten using a more preferred style.
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/consistent-selector-style: ["error", { style: ["type", "id", "class"] }] */
+</script>
+
+<a class="link" id="firstLink">Click me!</a>
+
+<a class="link cross">Click me too!</a>
+
+<b class="bold cross">Text one</b>
+
+<b>Text two</b>
+
+<i id="italic">Text three</i>
+
+<style>
+  /* ✓ GOOD */
+
+  a {
+    color: green;
+  }
+
+  #firstLink {
+    color: green;
+  }
+
+  .cross {
+    color: green;
+  }
+
+  /* ✗ BAD */
+
+  /* Can use a type selector */
+  .link {
+    color: red;
+  }
+
+  /* Can use an ID selector (but not a type selector) */
+  .bold {
+    color: red;
+  }
+
+  /* Can use a type selector */
+  #italic {
+    color: red;
+  }
+</style>
+```
+
+## :wrench: Options
+
+```json
+{
+  "svelte/consistent-selector-style": [
+    "error",
+    {
+      "checkGlobal": false,
+      "style": ["type", "id", "class"]
+    }
+  ]
+}
+```
+
+- `checkGlobal` ... Whether to check styles in `:global` blocks as well. Default `false`.
+- `style` ... A list of style preferences. Default `["type", "id", "class"]`.
+
+## :books: Further Reading
+
+- [CSS selector documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/consistent-selector-style.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/consistent-selector-style.ts)

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -34,6 +34,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/comment-directive/
    */
   'svelte/comment-directive'?: Linter.RuleEntry<SvelteCommentDirective>
+  /**
+   * enforce a consistent style for CSS selectors
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/consistent-selector-style/
+   */
+  'svelte/consistent-selector-style'?: Linter.RuleEntry<SvelteConsistentSelectorStyle>
   /**
    * derived store should use same variable names between values and callback
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/derived-has-same-inputs-outputs/
@@ -387,6 +392,12 @@ type SvelteButtonHasType = []|[{
 type SvelteCommentDirective = []|[{
   reportUnusedDisableDirectives?: boolean
 }]
+// ----- svelte/consistent-selector-style -----
+type SvelteConsistentSelectorStyle = []|[{
+  checkGlobal?: boolean
+  
+  style?: []|[("class" | "id" | "type")]|[("class" | "id" | "type"), ("class" | "id" | "type")]|[("class" | "id" | "type"), ("class" | "id" | "type"), ("class" | "id" | "type")]
+}]
 // ----- svelte/first-attribute-linebreak -----
 type SvelteFirstAttributeLinebreak = []|[{
   multiline?: ("below" | "beside")