feat(consistent-selector-style): enabled support for partial style

Author: marekdedic

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

@@ -395,7 +395,7 @@ type SvelteCommentDirective = []|[{
 // ----- svelte/consistent-selector-style -----
 type SvelteConsistentSelectorStyle = []|[{
 
-  style?: [("class" | "id" | "type"), ("class" | "id" | "type"), ("class" | "id" | "type")]
+  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 = []|[{

packages/eslint-plugin-svelte/src/rules/consistent-selector-style.ts

@@ -38,7 +38,6 @@ export default createRule('consistent-selector-style', {
 						items: {
 							enum: ['class', 'id', 'type']
 						},
-						minItems: 3, // TODO: Allow fewer items
 						maxItems: 3,
 						uniqueItems: true
 					}

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "style": ["type", "id"] }]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/class01-input.svelte

@@ -0,0 +1,37 @@
+<a class="link">Click me!</a>
+
+<a class="link">Click me two!</a>
+
+<a>Click me three!</a>
+
+<b class="bold">Text 1</b>
+
+<b class="bold">Text 2</b>
+
+<b data-key="val">Text 3</b>
+
+<style>
+  .link {
+    color: red;
+  }
+
+  .bold {
+    color: red;
+  }
+
+  .link:active {
+    color: red;
+  }
+
+  .link + .bold {
+    color: red;
+  }
+
+  .bold[data-key="val"] {
+    color: red;
+  }
+
+  .bold::before {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/id01-input.svelte

@@ -0,0 +1,33 @@
+<a id="link">Click me!</a>
+
+<a>Click me too!</a>
+
+<b id="bold">Text 1</b>
+
+<b data-key="val">Text 2</b>
+
+<style>
+  #link {
+    color: red;
+  }
+
+  #bold {
+    color: red;
+  }
+
+  #link:active {
+    color: red;
+  }
+
+  #link + #bold {
+    color: red;
+  }
+
+  #bold[data-key="val"] {
+    color: red;
+  }
+
+  #bold::before {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/type-scss01-input.svelte

@@ -0,0 +1,13 @@
+<a>Click me!</a>
+
+<b>Text 1</b>
+
+<style lang="scss">
+  a {
+    color: red;
+  }
+
+  b {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type-id/type01-input.svelte

@@ -0,0 +1,35 @@
+<a>Click me!</a>
+
+<a>Click me two!</a>
+
+<b>Text 1</b>
+
+<b>Text 2</b>
+
+<b data-key="val">Text 2</b>
+
+<style>
+  a {
+    color: red;
+  }
+
+  b {
+    color: red;
+  }
+
+  a:active {
+    color: red;
+  }
+
+  a + b {
+    color: red;
+  }
+
+  b[data-key="val"] {
+    color: red;
+  }
+
+  b::before {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "style": ["type"] }]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/class01-input.svelte

@@ -0,0 +1,44 @@
+<a class="link">Click me!</a>
+
+<a class="link">Click me two!</a>
+
+<a>Click me three!</a>
+
+<a class="unique">Click me three!</a>
+
+<b class="bold">Text 1</b>
+
+<b class="bold">Text 2</b>
+
+<b data-key="val">Text 3</b>
+
+<style>
+  .link {
+    color: red;
+  }
+
+  .bold {
+    color: red;
+  }
+
+  .link:active {
+    color: red;
+  }
+
+  .link + .bold {
+    color: red;
+  }
+
+  .bold[data-key="val"] {
+    color: red;
+  }
+
+  .bold::before {
+    color: red;
+  }
+
+  .unique {
+    color: red;
+  }
+
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/id01-input.svelte

@@ -0,0 +1,33 @@
+<a id="link">Click me!</a>
+
+<a>Click me too!</a>
+
+<b id="bold">Text 1</b>
+
+<b data-key="val">Text 2</b>
+
+<style>
+  #link {
+    color: red;
+  }
+
+  #bold {
+    color: red;
+  }
+
+  #link:active {
+    color: red;
+  }
+
+  #link + #bold {
+    color: red;
+  }
+
+  #bold[data-key="val"] {
+    color: red;
+  }
+
+  #bold::before {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/type-scss01-input.svelte

@@ -0,0 +1,13 @@
+<a>Click me!</a>
+
+<b>Text 1</b>
+
+<style lang="scss">
+  a {
+    color: red;
+  }
+
+  b {
+    color: red;
+  }
+</style>

packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/valid/type/type01-input.svelte

@@ -0,0 +1,35 @@
+<a>Click me!</a>
+
+<a>Click me two!</a>
+
+<b>Text 1</b>
+
+<b>Text 2</b>
+
+<b data-key="val">Text 2</b>
+
+<style>
+  a {
+    color: red;
+  }
+
+  b {
+    color: red;
+  }
+
+  a:active {
+    color: red;
+  }
+
+  a + b {
+    color: red;
+  }
+
+  b[data-key="val"] {
+    color: red;
+  }
+
+  b::before {
+    color: red;
+  }
+</style>