feat: add v-deep-pseudo-style, v-slotted-pseudo-style, and v-global-pseudo-style rules (#259)

* feat: add `v-deep-pseudo-style`, `v-slotted-pseudo-style`, and `v-global-pseudo-style` rules

* Create large-months-count.md

Author: ota-meshi

Diff for: .changeset/large-months-count.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue-scoped-css": minor
+---
+
+feat: add `v-deep-pseudo-style`, `v-slotted-pseudo-style`, and `v-global-pseudo-style` rules

Diff for: README.md

@@ -145,6 +145,9 @@ For example:
 |:--------|:------------|:---|
 | [vue-scoped-css/no-deprecated-v-enter-v-leave-class](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-deprecated-v-enter-v-leave-class.html) | disallow v-enter and v-leave classes. |  |
 | [vue-scoped-css/require-selector-used-inside](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-selector-used-inside.html) | disallow selectors defined that is not used inside `<template>` |  |
+| [vue-scoped-css/v-deep-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-deep-pseudo-style.html) | enforce `:deep()`/`::v-deep()` style | :wrench: |
+| [vue-scoped-css/v-global-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-global-pseudo-style.html) | enforce `:global()`/`::v-global()` style | :wrench: |
+| [vue-scoped-css/v-slotted-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-slotted-pseudo-style.html) | enforce `:slotted()`/`::v-slotted()` style | :wrench: |
 
 ## Deprecated
 

Diff for: docs/rules/README.md

@@ -64,6 +64,9 @@ For example:
 |:--------|:------------|:---|
 | [vue-scoped-css/no-deprecated-v-enter-v-leave-class](./no-deprecated-v-enter-v-leave-class.md) | disallow v-enter and v-leave classes. |  |
 | [vue-scoped-css/require-selector-used-inside](./require-selector-used-inside.md) | disallow selectors defined that is not used inside `<template>` |  |
+| [vue-scoped-css/v-deep-pseudo-style](./v-deep-pseudo-style.md) | enforce `:deep()`/`::v-deep()` style | :wrench: |
+| [vue-scoped-css/v-global-pseudo-style](./v-global-pseudo-style.md) | enforce `:global()`/`::v-global()` style | :wrench: |
+| [vue-scoped-css/v-slotted-pseudo-style](./v-slotted-pseudo-style.md) | enforce `:slotted()`/`::v-slotted()` style | :wrench: |
 
 ## Deprecated
 

Diff for: docs/rules/enforce-style-type.md

@@ -37,7 +37,7 @@ Default is set to `{ allows: ['scoped'] }`.
 
 ```json
 {
-  "vue-scoped-css/enforce-style-type": ["error", { allows: ['scoped'] }]
+  "vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }]
 }
 ```
 

Diff for: docs/rules/v-deep-pseudo-style.md

@@ -0,0 +1,53 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "vue-scoped-css/v-deep-pseudo-style"
+description: "enforce `:deep()`/`::v-deep()` style"
+---
+# vue-scoped-css/v-deep-pseudo-style
+
+> enforce `:deep()`/`::v-deep()` style
+
+- :gear: This rule is included in `"plugin:vue-scoped-css/all"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces deep pseudo style which you should use `:deep()` or `::v-deep()`.
+
+<eslint-code-block fix :rules="{'vue-scoped-css/v-deep-pseudo-style': ['error']}">
+
+```vue
+<style scoped>
+/* ✗ BAD */
+.foo ::v-deep(.bar) {}
+
+/* ✓ GOOD */
+.foo :deep(.bar) {}
+</style>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue-scoped-css/v-deep-pseudo-style": [
+    "error",
+    ":deep" // or "::v-deep"
+  ]
+}
+```
+
+- `":deep"` (default) ... requires using `:deep()`.
+- `"::v-deep"` ... requires using `::v-deep()`.
+
+## :books: Further reading
+
+- [Vue.js - API SFC CSS Features > Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors)
+
+## Implementation
+
+- [Rule source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/lib/rules/v-deep-pseudo-style.ts)
+- [Test source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/tests/lib/rules/v-deep-pseudo-style.js)

Diff for: docs/rules/v-global-pseudo-style.md

@@ -0,0 +1,53 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "vue-scoped-css/v-global-pseudo-style"
+description: "enforce `:global()`/`::v-global()` style"
+---
+# vue-scoped-css/v-global-pseudo-style
+
+> enforce `:global()`/`::v-global()` style
+
+- :gear: This rule is included in `"plugin:vue-scoped-css/all"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces global pseudo style which you should use `:global()` or `::v-global()`.
+
+<eslint-code-block fix :rules="{'vue-scoped-css/v-global-pseudo-style': ['error']}">
+
+```vue
+<style scoped>
+/* ✗ BAD */
+.foo ::v-global(.bar) {}
+
+/* ✓ GOOD */
+.foo :global(.bar) {}
+</style>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue-scoped-css/v-global-pseudo-style": [
+    "error",
+    ":global" // or "::v-global"
+  ]
+}
+```
+
+- `":global"` (default) ... requires using `:global()`.
+- `"::v-global"` ... requires using `::v-global()`.
+
+## :books: Further reading
+
+- [Vue.js - API SFC CSS Features > Global Selectors](https://vuejs.org/api/sfc-css-features.html#global-selectors)
+
+## Implementation
+
+- [Rule source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/lib/rules/v-global-pseudo-style.ts)
+- [Test source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/tests/lib/rules/v-global-pseudo-style.js)

Diff for: docs/rules/v-slotted-pseudo-style.md

@@ -0,0 +1,53 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "vue-scoped-css/v-slotted-pseudo-style"
+description: "enforce `:slotted()`/`::v-slotted()` style"
+---
+# vue-scoped-css/v-slotted-pseudo-style
+
+> enforce `:slotted()`/`::v-slotted()` style
+
+- :gear: This rule is included in `"plugin:vue-scoped-css/all"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces slotted pseudo style which you should use `:slotted()` or `::v-slotted()`.
+
+<eslint-code-block fix :rules="{'vue-scoped-css/v-slotted-pseudo-style': ['error']}">
+
+```vue
+<style scoped>
+/* ✗ BAD */
+.foo ::v-slotted(.bar) {}
+
+/* ✓ GOOD */
+.foo :slotted(.bar) {}
+</style>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue-scoped-css/v-slotted-pseudo-style": [
+    "error",
+    ":slotted" // or "::v-slotted"
+  ]
+}
+```
+
+- `":slotted"` (default) ... requires using `:slotted()`.
+- `"::v-slotted"` ... requires using `::v-slotted()`.
+
+## :books: Further reading
+
+- [Vue.js - API SFC CSS Features > Slotted Selectors](https://vuejs.org/api/sfc-css-features.html#slotted-selectors)
+
+## Implementation
+
+- [Rule source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/lib/rules/v-slotted-pseudo-style.ts)
+- [Test source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/tests/lib/rules/v-slotted-pseudo-style.js)

Diff for: lib/rules/v-deep-pseudo-style.ts

@@ -0,0 +1,98 @@
+import type { ValidStyleContext } from "../styles/context";
+import {
+  getStyleContexts,
+  getCommentDirectivesReporter,
+  isValidStyleContext,
+} from "../styles/context";
+import type { RuleContext, RuleListener } from "../types";
+import type { VDeepPseudo } from "../styles/utils/selectors";
+import {
+  isVDeepPseudo,
+  isPseudoEmptyArguments,
+} from "../styles/utils/selectors";
+
+export = {
+  meta: {
+    docs: {
+      description: "enforce `:deep()`/`::v-deep()` style",
+      categories: [
+        // TODO: enable in next major version
+        // "vue3-recommended"
+      ],
+      default: "warn",
+      url: "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-deep-pseudo-style.html",
+    },
+    fixable: "code",
+    messages: {
+      expectedDeep: "Expected ':deep()' instead of '::v-deep()'.",
+      expectedVDeep: "Expected '::v-deep()' instead of ':deep()'.",
+    },
+    schema: [{ enum: [":deep", "::v-deep"] }],
+    type: "suggestion",
+  },
+  create(context: RuleContext): RuleListener {
+    const styles = getStyleContexts(context)
+      .filter(isValidStyleContext)
+      .filter((style) => style.scoped);
+    if (!styles.length) {
+      return {};
+    }
+    const expected = (context.options[0] || ":deep") as ":deep" | "::v-deep";
+    const reporter = getCommentDirectivesReporter(context);
+
+    /**
+     * Reports the given node
+     * @param {ASTNode} node node to report
+     */
+    function report(node: VDeepPseudo) {
+      reporter.report({
+        node,
+        loc: node.loc,
+        messageId: expected === ":deep" ? "expectedDeep" : "expectedVDeep",
+        fix(fixer) {
+          const nodeText = context.getSourceCode().text.slice(...node.range);
+          return fixer.replaceTextRange(
+            node.range,
+            nodeText.replace(
+              /^(\s*)(?::deep|::v-deep)(\s*\()/u,
+              (_, prefix: string, suffix: string) =>
+                `${prefix}${expected}${suffix}`
+            )
+          );
+        },
+      });
+    }
+
+    /**
+     * Verify the node
+     */
+    function verifyNode(node: VDeepPseudo) {
+      if (node.value === expected) {
+        return;
+      }
+
+      report(node);
+    }
+
+    /**
+     * Verify the style
+     */
+    function verify(style: ValidStyleContext) {
+      style.traverseSelectorNodes({
+        enterNode(node) {
+          if (isVDeepPseudo(node) && !isPseudoEmptyArguments(node)) {
+            verifyNode(node);
+          }
+        },
+      });
+    }
+
+    return {
+      "Program:exit"() {
+        for (const style of styles) {
+          verify(style);
+        }
+      },
+    };
+  },
+};

Diff for: lib/rules/v-global-pseudo-style.ts

@@ -0,0 +1,101 @@
+import type { ValidStyleContext } from "../styles/context";
+import {
+  getStyleContexts,
+  getCommentDirectivesReporter,
+  isValidStyleContext,
+} from "../styles/context";
+import type { RuleContext, RuleListener } from "../types";
+import type { VGlobalPseudo } from "../styles/utils/selectors";
+import {
+  isVGlobalPseudo,
+  isPseudoEmptyArguments,
+} from "../styles/utils/selectors";
+
+export = {
+  meta: {
+    docs: {
+      description: "enforce `:global()`/`::v-global()` style",
+      categories: [
+        // TODO: enable in next major version
+        // "vue3-recommended"
+      ],
+      default: "warn",
+      url: "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-global-pseudo-style.html",
+    },
+    fixable: "code",
+    messages: {
+      expectedGlobal: "Expected ':global()' instead of '::v-global()'.",
+      expectedVGlobal: "Expected '::v-global()' instead of ':global()'.",
+    },
+    schema: [{ enum: [":global", "::v-global"] }],
+    type: "suggestion",
+  },
+  create(context: RuleContext): RuleListener {
+    const styles = getStyleContexts(context)
+      .filter(isValidStyleContext)
+      .filter((style) => style.scoped);
+    if (!styles.length) {
+      return {};
+    }
+    const expected = (context.options[0] || ":global") as
+      | ":global"
+      | "::v-global";
+    const reporter = getCommentDirectivesReporter(context);
+
+    /**
+     * Reports the given node
+     * @param {ASTNode} node node to report
+     */
+    function report(node: VGlobalPseudo) {
+      reporter.report({
+        node,
+        loc: node.loc,
+        messageId:
+          expected === ":global" ? "expectedGlobal" : "expectedVGlobal",
+        fix(fixer) {
+          const nodeText = context.getSourceCode().text.slice(...node.range);
+          return fixer.replaceTextRange(
+            node.range,
+            nodeText.replace(
+              /^(\s*)(?::global|::v-global)(\s*\()/u,
+              (_, prefix: string, suffix: string) =>
+                `${prefix}${expected}${suffix}`
+            )
+          );
+        },
+      });
+    }
+
+    /**
+     * Verify the node
+     */
+    function verifyNode(node: VGlobalPseudo) {
+      if (node.value === expected) {
+        return;
+      }
+
+      report(node);
+    }
+
+    /**
+     * Verify the style
+     */
+    function verify(style: ValidStyleContext) {
+      style.traverseSelectorNodes({
+        enterNode(node) {
+          if (isVGlobalPseudo(node) && !isPseudoEmptyArguments(node)) {
+            verifyNode(node);
+          }
+        },
+      });
+    }
+
+    return {
+      "Program:exit"() {
+        for (const style of styles) {
+          verify(style);
+        }
+      },
+    };
+  },
+};