Add autofix to no-deprecated-deep-combinator rule. (#40)

Author: ota-meshi

lib/rules/no-deprecated-deep-combinator.ts

@@ -5,7 +5,7 @@ import {
     ValidStyleContext,
 } from "../styles/context"
 import type { VCSSSelectorCombinator } from "../styles/ast"
-import type { RuleContext, Rule } from "../types"
+import type { RuleContext, Rule, Range } from "../types"
 import { isDeepCombinator } from "../styles/utils/selectors"
 
 declare const module: {
@@ -21,7 +21,7 @@ module.exports = {
             url:
                 "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-deprecated-deep-combinator.html",
         },
-        fixable: null,
+        fixable: "code",
         messages: {
             deprecated: "The deep combinator `{{value}}` is deprecated.",
         },
@@ -49,6 +49,19 @@ module.exports = {
                 data: {
                     value: node.value.trim(),
                 },
+                fix(fixer) {
+                    const sourceCodeText = context.getSourceCode().text
+                    const range = [...node.range] as Range
+                    let newText = "::v-deep"
+                    if (sourceCodeText[range[0] - 1]?.trim()) {
+                        newText = ` ${newText}`
+                    }
+                    if (sourceCodeText[range[1]]?.trim()) {
+                        newText = `${newText} `
+                    }
+
+                    return fixer.replaceTextRange(range, newText)
+                },
             })
         }
 

tests/lib/rules/no-deprecated-deep-combinator.ts

@@ -30,6 +30,13 @@ tester.run("no-deprecated-deep-combinator", rule, {
             a /deep/ .b {}
             </style>
             `,
+            output: `
+            <template><div class="item">sample</div></template>
+            <style scoped>
+            a ::v-deep .b {}
+            a ::v-deep .b {}
+            </style>
+            `,
             errors: [
                 {
                     message: "The deep combinator `>>>` is deprecated.",
@@ -47,5 +54,26 @@ tester.run("no-deprecated-deep-combinator", rule, {
                 },
             ],
         },
+
+        {
+            code: `
+            <template><div class="item">sample</div></template>
+            <style scoped>
+            a>>>.b {}
+            a/deep/.b {}
+            </style>
+            `,
+            output: `
+            <template><div class="item">sample</div></template>
+            <style scoped>
+            a ::v-deep .b {}
+            a ::v-deep .b {}
+            </style>
+            `,
+            errors: [
+                "The deep combinator `>>>` is deprecated.",
+                "The deep combinator `/deep/` is deprecated.",
+            ],
+        },
     ],
 })