feat: support for description in directive comments (#256)

* feat: support for description in directive comments

* Create wise-cougars-jump.md

Author: ota-meshi

.changeset/wise-cougars-jump.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+feat: support for description in directive comments

lib/styles/context/comment-directive/index.ts

@@ -16,14 +16,23 @@ const COMMENT_DIRECTIVE_L =
 type ParsingResult = { type: string; rules: string[] };
 type BlockData = { loc: LineAndColumnData; disable: boolean };
 
+/**
+ * Remove the ignored part from a given directive comment and trim it.
+ * @param {string} value The comment text to strip.
+ * @returns {string} The stripped text.
+ */
+function stripDirectiveComment(value: string) {
+  return value.split(/\s-{2,}\s/u)[0];
+}
+
 /**
  * Parse a given comment.
  * @param {RegExp} pattern The RegExp pattern to parse.
  * @param {string} comment The comment value to parse.
  * @returns {({type:string,rules:string[]})|null} The parsing result.
  */
 function parse(pattern: RegExp, comment: string): ParsingResult | null {
-  const match = pattern.exec(comment);
+  const match = pattern.exec(stripDirectiveComment(comment));
   if (match == null) {
     return null;
   }

tests/lib/comment-directives.ts

@@ -32,6 +32,25 @@ tester.run("no-unused-selector-comment-directives", rule as any, {
             `,
       errors: [{ messageId: "unused", data: { selector: ".foo" } }],
     },
+    {
+      code: `
+            <template>
+                <div><ul>
+                    <li class="bar"/>
+                </ul></div>
+            </template>
+            <style scoped>
+            /* eslint-disable-next-line -- description */
+            div {
+                & > .foo,
+                & > li.foo {/* eslint-disable-line -- description */
+                } 
+                & > li.bar {}
+            }
+            </style>
+            `,
+      errors: [{ messageId: "unused", data: { selector: ".foo" } }],
+    },
     {
       code: `
             <template>