Add vue-scoped-css/no-parent-of-v-global rule (#45)

* Add `vue-scoped-css/no-parent-of-v-global` rule

* update

Author: ota-meshi

README.md

@@ -99,6 +99,7 @@ Enforce all the rules in this category with:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue-scoped-css/no-deprecated-deep-combinator](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-deprecated-deep-combinator.html) | disallow using deprecated deep combinators | :wrench: |
+| [vue-scoped-css/no-parent-of-v-global](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parent-of-v-global.html) | disallow parent selector for `::v-global` pseudo-element |  |
 | [vue-scoped-css/no-parsing-error](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parsing-error.html) | disallow parsing errors in `<style>` |  |
 | [vue-scoped-css/no-unused-keyframes](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-keyframes.html) | disallow `@keyframes` which don't use in Scoped CSS |  |
 | [vue-scoped-css/no-unused-selector](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-selector.html) | disallow selectors defined in Scoped CSS that don't use in `<template>` |  |

docs/rules/README.md

@@ -19,6 +19,7 @@ Enforce all the rules in this category with:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue-scoped-css/no-deprecated-deep-combinator](./no-deprecated-deep-combinator.md) | disallow using deprecated deep combinators | :wrench: |
+| [vue-scoped-css/no-parent-of-v-global](./no-parent-of-v-global.md) | disallow parent selector for `::v-global` pseudo-element |  |
 | [vue-scoped-css/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<style>` |  |
 | [vue-scoped-css/no-unused-keyframes](./no-unused-keyframes.md) | disallow `@keyframes` which don't use in Scoped CSS |  |
 | [vue-scoped-css/no-unused-selector](./no-unused-selector.md) | disallow selectors defined in Scoped CSS that don't use in `<template>` |  |

docs/rules/no-parent-of-v-global.md

@@ -0,0 +1,38 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "vue-scoped-css/no-parent-of-v-global"
+description: "disallow parent selector for `::v-global` pseudo-element"
+---
+# vue-scoped-css/no-parent-of-v-global
+
+> disallow parent selector for `::v-global` pseudo-element
+
+- :gear: This rule is included in `"plugin:vue-scoped-css/vue3-recommended"` and `"plugin:vue-scoped-css/all"`.
+
+## :book: Rule Details
+
+This rule reports parent selector for `::v-global` pseudo-element.
+
+<eslint-code-block :rules="{'vue-scoped-css/no-parent-of-v-global': ['error']}">
+
+```vue
+<style scoped>
+/* ✗ BAD */
+.bar ::v-global(.foo) {}
+
+/* ✓ GOOD */
+::v-global(.foo) {}
+</style>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## Implementation
+
+- [Rule source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/lib/rules/no-parent-of-v-global.ts)
+- [Test source](https://github.com/future-architect/eslint-plugin-vue-scoped-css/blob/master/tests/lib/rules/no-parent-of-v-global.js)

lib/rules/no-parent-of-v-global.ts

@@ -0,0 +1,80 @@
+import {
+    getStyleContexts,
+    getCommentDirectivesReporter,
+    StyleContext,
+    ValidStyleContext,
+} from "../styles/context"
+import type { VCSSSelectorNode } from "../styles/ast"
+import type { RuleContext, Rule } from "../types"
+import { isVGlobalPseudo } from "../styles/utils/selectors"
+
+declare const module: {
+    exports: Rule
+}
+
+module.exports = {
+    meta: {
+        docs: {
+            description:
+                "disallow parent selector for `::v-global` pseudo-element",
+            categories: ["vue3-recommended"],
+            default: "warn",
+            url:
+                "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parent-of-v-global.html",
+        },
+        fixable: null,
+        messages: {
+            unexpected:
+                "The parent selector of the `::v-global()` pseudo-element is useless.",
+        },
+        schema: [],
+        type: "suggestion", // "problem",
+    },
+    create(context: RuleContext) {
+        const styles = getStyleContexts(context)
+            .filter(StyleContext.isValid)
+            .filter((style) => style.scoped)
+        if (!styles.length) {
+            return {}
+        }
+        const reporter = getCommentDirectivesReporter(context)
+
+        /**
+         * Reports the given node
+         * @param {ASTNode} node node to report
+         */
+        function report(node: VCSSSelectorNode) {
+            reporter.report({
+                node,
+                loc: node.loc,
+                messageId: "unexpected",
+            })
+        }
+
+        /**
+         * Verify the style
+         */
+        function verify(style: ValidStyleContext) {
+            style.traverseSelectorNodes({
+                enterNode(node) {
+                    if (!isVGlobalPseudo(node)) {
+                        return
+                    }
+                    const nodes = node.parent.nodes
+                    const selectorIndex = nodes.indexOf(node)
+                    if (selectorIndex > 0) {
+                        report(node)
+                    }
+                },
+            })
+        }
+
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    verify(style)
+                }
+            },
+        }
+    },
+}

lib/utils/rules.ts

@@ -6,6 +6,11 @@ const baseRules = [
         ruleName: "no-deprecated-deep-combinator",
         ruleId: "vue-scoped-css/no-deprecated-deep-combinator",
     },
+    {
+        rule: require("../rules/no-parent-of-v-global"),
+        ruleName: "no-parent-of-v-global",
+        ruleId: "vue-scoped-css/no-parent-of-v-global",
+    },
     {
         rule: require("../rules/no-parsing-error"),
         ruleName: "no-parsing-error",

tests/lib/rules/no-parent-of-v-global.ts

@@ -0,0 +1,40 @@
+import { RuleTester } from "eslint"
+import rule = require("../../../lib/rules/no-parent-of-v-global")
+
+const tester = new RuleTester({
+    parser: require.resolve("vue-eslint-parser"),
+    parserOptions: {
+        ecmaVersion: 2019,
+        sourceType: "module",
+    },
+})
+
+tester.run("no-parent-of-v-global", rule as any, {
+    valid: [
+        `
+        <template><div class="item">sample</div></template>
+        <style scoped>
+        ::v-global(.foo) {}
+        </style>
+        `,
+    ],
+    invalid: [
+        {
+            code: `
+            <template><div class="item">sample</div></template>
+            <style scoped>
+            .bar ::v-global(.foo) {}
+            </style>
+            `,
+            errors: [
+                {
+                    message:
+                        "The parent selector of the `::v-global()` pseudo-element is useless.",
+                    line: 4,
+                    column: 18,
+                    endColumn: 34,
+                },
+            ],
+        },
+    ],
+})