feat: Add prefer option to prefer-class-directive

This the prefer option can be 'empty' or 'always' with 'empty' being the default.
'always' matches the current behaviour, always insisting on directives
'empty' only prefers directives when one class is empty.

Author: sdarnell

docs/rules/prefer-class-directive.md

@@ -22,13 +22,16 @@ This rule aims to replace a class with ternary operator with the class directive
 
 ```svelte
 <script>
-  /* eslint svelte/prefer-class-directive: "error" */
+  /* eslint svelte/prefer-class-directive: "empty" */
+  const selected = true;
 </script>
 
 <!-- ✓ GOOD -->
+<button class:selected={selected}>foo</button>
 <button class:selected={current === 'foo'}>foo</button>
 
 <!-- ✗ BAD -->
+<button class={selected ? 'selected' : ''}>foo</button>
 <button class={current === 'foo' ? 'selected' : ''}>foo</button>
 ```
 
@@ -40,7 +43,20 @@ You cannot enforce this style by using [prettier-plugin-svelte]. That is, this r
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "svelte/html-quotes": [
+    "error",
+    {
+      "prefer": "empty" // or "always"
+    }
+  ]
+}
+```
+
+- `prefer` ... Whether to apply this rule always or just when there's an empty string. Default is `"empty"`.
+    - `"empty"` ... Requires class directives only if one of the strings is empty.
+    - `"always"` ... Requires class directives always rather than interpolation.
 
 ## :couple: Related Rules
 

src/rules/prefer-class-directive.ts

@@ -14,14 +14,23 @@ export default createRule('prefer-class-directive', {
 			conflictWithPrettier: false
 		},
 		fixable: 'code',
-		schema: [],
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					prefer: { enum: ['always', 'empty'] }
+				},
+				additionalProperties: false
+			}
+		],
 		messages: {
 			unexpected: 'Unexpected class using the ternary operator.'
 		},
 		type: 'suggestion'
 	},
 	create(context) {
 		const sourceCode = getSourceCode(context);
+		const preferEmpty = context.options[0]?.prefer !== 'always';
 
 		type Expr = {
 			not?: true;
@@ -301,6 +310,7 @@ export default createRule('prefer-class-directive', {
 			const prevIsWord = !startsWithNonWord(attr, index + 1);
 			const nextIsWord = !endsWithNonWord(attr, index - 1);
 			let canTransform = true;
+			let foundEmpty = false;
 			for (const className of map.values()) {
 				if (className) {
 					if (!/^[\w-]*$/u.test(className.trim())) {
@@ -317,13 +327,17 @@ export default createRule('prefer-class-directive', {
 						break;
 					}
 				} else {
+					foundEmpty = true;
 					if (prevIsWord && nextIsWord) {
 						// The previous and next may be connected.
 						canTransform = false;
 						break;
 					}
 				}
 			}
+			if (preferEmpty && !foundEmpty) {
+				return;
+			}
 			if (!canTransform) {
 				return;
 			}

tests/fixtures/rules/prefer-class-directive/invalid/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "prefer": "always" }]
+}

tests/fixtures/rules/prefer-class-directive/valid/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "prefer": "always" }]
+}

tests/fixtures/rules/prefer-class-directive/valid/empty/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "prefer": "empty" }]
+}

tests/fixtures/rules/prefer-class-directive/valid/empty/ignore-test05-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	let a = true;
+	let a7 = 7;
+	let danger = false;
+</script>
+
+<button class="{a ? 'a' : 'b'}">foo</button>
+<button class="{!a ? 'b' : 'a'}">foo</button>
+<button class="{a7 === 7 ? 'a' : 'b'}">foo</button>
+<button class="btn {danger ? 'btn-danger' : 'btn-primary'}">foo</button>