fix: Add invalid test for empty setting, and fix markdown example

Also now considers the trimmed class name when looking for empty strings.

Author: sdarnell

docs/rules/prefer-class-directive.md

@@ -22,7 +22,7 @@ This rule aims to replace a class with ternary operator with the class directive
 
 ```svelte
 <script>
-  /* eslint svelte/prefer-class-directive: "empty" */
+  /* eslint svelte/prefer-class-directive: ["error", {"prefer": "empty"}] */
   const selected = true;
 </script>
 

src/rules/prefer-class-directive.ts

@@ -307,10 +307,14 @@ export default createRule('prefer-class-directive', {
 				// It's too complicated.
 				return;
 			}
+			if (preferEmpty && [...map.values()].every((x) => x.trim())) {
+				// We prefer directives when there's an empty string, but they're all not empty
+				return;
+			}
+
 			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())) {
@@ -327,17 +331,13 @@ 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/empty/test01-errors.yaml

@@ -0,0 +1,20 @@
+- message: Unexpected class using the ternary operator.
+  line: 6
+  column: 15
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 7
+  column: 18
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 8
+  column: 17
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 10
+  column: 20
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 11
+  column: 20
+  suggestions: null

tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-input.svelte

@@ -0,0 +1,13 @@
+<script>
+	let selected = 'foo';
+	let children = 1;
+</script>
+
+<button class={selected ? 'selected' : ''}>foo</button>
+<button class="a {selected ? 'selected' : ''} b">foo</button>
+<button class="a{selected ? ' selected ' : ' '}b">foo</button>
+
+<div class="d-flex {children > 1 ? 'gap-3' : ''}">foo</div>
+<div class="d-flex {children === 1 ? '' : 'gap-3'}">foo</div>
+
+<!-- test01-input.svelte -->

tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-output.svelte

@@ -0,0 +1,13 @@
+<script>
+	let selected = 'foo';
+	let children = 1;
+</script>
+
+<button class:selected={selected}>foo</button>
+<button class="a b" class:selected={selected}>foo</button>
+<button class="a b" class:selected={selected}>foo</button>
+
+<div class="d-flex" class:gap-3={children > 1}>foo</div>
+<div class="d-flex" class:gap-3={children !== 1}>foo</div>
+
+<!-- test01-input.svelte -->