Add vue-scoped-css/require-v-global-argument rule (#43)

Author: ota-meshi

README.md

@@ -104,6 +104,7 @@ Enforce all the rules in this category with:
 | [vue-scoped-css/no-unused-selector](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-selector.html) | Reports selectors defined in Scoped CSS not used in `<template>`. |  |
 | [vue-scoped-css/require-scoped](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-scoped.html) | Enforce the `<style>` tags to has the `scoped` attribute. |  |
 | [vue-scoped-css/require-v-deep-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-deep-argument.html) | require selector argument to be passed to `::v-deep()`. | :wrench: |
+| [vue-scoped-css/require-v-global-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-global-argument.html) | require selector argument to be passed to `::v-global()`. |  |
 | [vue-scoped-css/require-v-slotted-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-slotted-argument.html) | require selector argument to be passed to `::v-slotted()`. |  |
 
 ## Recommended for Vue.js 2.x

docs/rules/README.md

@@ -24,6 +24,7 @@ Enforce all the rules in this category with:
 | [vue-scoped-css/no-unused-selector](./no-unused-selector.md) | Reports selectors defined in Scoped CSS not used in `<template>`. |  |
 | [vue-scoped-css/require-scoped](./require-scoped.md) | Enforce the `<style>` tags to has the `scoped` attribute. |  |
 | [vue-scoped-css/require-v-deep-argument](./require-v-deep-argument.md) | require selector argument to be passed to `::v-deep()`. | :wrench: |
+| [vue-scoped-css/require-v-global-argument](./require-v-global-argument.md) | require selector argument to be passed to `::v-global()`. |  |
 | [vue-scoped-css/require-v-slotted-argument](./require-v-slotted-argument.md) | require selector argument to be passed to `::v-slotted()`. |  |
 
 ## Recommended for Vue.js 2.x

docs/rules/require-v-global-argument.md

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

lib/rules/require-v-global-argument.ts

@@ -0,0 +1,78 @@
+import {
+    getStyleContexts,
+    getCommentDirectivesReporter,
+    StyleContext,
+    ValidStyleContext,
+} from "../styles/context"
+import type { RuleContext, Rule } from "../types"
+import {
+    isPseudoEmptyArguments,
+    VGlobalPseudo,
+    isVGlobalPseudo,
+} from "../styles/utils/selectors"
+
+declare const module: {
+    exports: Rule
+}
+
+module.exports = {
+    meta: {
+        docs: {
+            description:
+                "require selector argument to be passed to `::v-global()`.",
+            categories: ["vue3-recommended"],
+            default: "warn",
+            url:
+                "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-global-argument.html",
+        },
+        fixable: null,
+        messages: {
+            missingArguments:
+                "Need to pass argument to the `::v-global` pseudo-element.",
+        },
+        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: VGlobalPseudo) {
+            reporter.report({
+                node,
+                loc: node.loc,
+                messageId: "missingArguments",
+            })
+        }
+
+        /**
+         * Verify the style
+         */
+        function verify(style: ValidStyleContext) {
+            style.traverseSelectorNodes({
+                enterNode(node) {
+                    if (isVGlobalPseudo(node) && isPseudoEmptyArguments(node)) {
+                        report(node)
+                    }
+                },
+            })
+        }
+
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    verify(style)
+                }
+            },
+        }
+    },
+}

lib/utils/rules.ts

@@ -36,6 +36,11 @@ const baseRules = [
         ruleName: "require-v-deep-argument",
         ruleId: "vue-scoped-css/require-v-deep-argument",
     },
+    {
+        rule: require("../rules/require-v-global-argument"),
+        ruleName: "require-v-global-argument",
+        ruleId: "vue-scoped-css/require-v-global-argument",
+    },
     {
         rule: require("../rules/require-v-slotted-argument"),
         ruleName: "require-v-slotted-argument",

tests/lib/rules/require-v-global-argument.ts

@@ -0,0 +1,50 @@
+import { RuleTester } from "eslint"
+const rule = require("../../../lib/rules/require-v-global-argument")
+
+const tester = new RuleTester({
+    parser: require.resolve("vue-eslint-parser"),
+    parserOptions: {
+        ecmaVersion: 2019,
+        sourceType: "module",
+    },
+})
+
+tester.run("require-v-global-argument", rule, {
+    valid: [
+        `
+        <template><div class="item">sample</div></template>
+        <style scoped>
+        ::v-global(.foo .bar) {}
+        </style>
+        `,
+    ],
+    invalid: [
+        {
+            code: `
+            <template><div class="item">sample</div></template>
+            <style scoped>
+            ::v-global {}
+            ::v-global() {}
+            </style>
+            `,
+            errors: [
+                {
+                    message:
+                        "Need to pass argument to the `::v-global` pseudo-element.",
+                    line: 4,
+                    column: 13,
+                    endLine: 4,
+                    endColumn: 23,
+                },
+                {
+                    message:
+                        "Need to pass argument to the `::v-global` pseudo-element.",
+                    line: 5,
+                    column: 13,
+                    endLine: 5,
+                    endColumn: 25,
+                },
+            ],
+        },
+    ],
+})