eslint-plugin-vue-scoped-css 2.2.0 → 2.4.0

package/README.md

@@ -36,7 +36,7 @@ See [documents](https://future-architect.github.io/eslint-plugin-vue-scoped-css/
 ## Installation
 
 ```bash
-npm install --save-dev eslint eslint-plugin-vue-scoped-css
+npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
 ```
 
 > **Requirements**
@@ -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
 

package/dist/rules/enforce-style-type.js

@@ -2,7 +2,6 @@
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const context_1 = require("../styles/context");
 const styleTypesAttrs = ["scoped", "module"];
@@ -63,9 +62,7 @@ module.exports = {
             return [
                 fixer.removeRange([
                     prevToken.range[1],
-                    attributes.length === 1
-                        ? nextToken.range[0]
-                        : node.range[1],
+                    attributes.length === 1 ? nextToken.range[0] : node.range[1],
                 ]),
             ];
         }
@@ -107,9 +104,7 @@ module.exports = {
                 node: node.startTag,
                 messageId: "forbiddenPlain",
                 data: {
-                    attributes: allows
-                        .map((allow) => `\`${allow}\``)
-                        .join(" or "),
+                    attributes: allows.map((allow) => `\`${allow}\``).join(" or "),
                 },
                 suggest: singleAllow
                     ? [
@@ -120,8 +115,7 @@ module.exports = {
                             },
                             fix(fixer) {
                                 const close = tokenStore.getLastToken(node.startTag);
-                                return (close &&
-                                    fixer.insertTextBefore(close, ` ${singleAllow}`));
+                                return (close && fixer.insertTextBefore(close, ` ${singleAllow}`));
                             },
                         },
                     ]

package/dist/rules/no-deprecated-deep-combinator.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const selectors_1 = require("../styles/utils/selectors");
 module.exports = {

package/dist/rules/no-deprecated-v-enter-v-leave-class.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const templates_1 = require("../utils/templates");
 const attribute_tracker_1 = require("../styles/selectors/query/attribute-tracker");
@@ -66,13 +65,13 @@ module.exports = {
                         break;
                     }
                     if (node.type === "VCSSClassSelector") {
-                        for (const { className, kind, } of deprecatedClassNames.values()) {
+                        for (const { className, kind } of deprecatedClassNames.values()) {
                             if (className.matchString(node.value)) {
                                 deprecatedClasses.set(node, kind);
                                 break;
                             }
                         }
-                        for (const { className, } of renamedClassNames.values()) {
+                        for (const { className } of renamedClassNames.values()) {
                             if (className.matchString(node.value)) {
                                 renamedClasses.add(node.value);
                                 break;
@@ -133,8 +132,7 @@ module.exports = {
         }
         return {
             "Program:exit"() {
-                for (const transition of (0, templates_1.getElements)(context, (element) => (0, templates_1.isTransitionElement)(element) ||
-                    (0, templates_1.isTransitionGroupElement)(element))) {
+                for (const transition of (0, templates_1.getElements)(context, (element) => (0, templates_1.isTransitionElement)(element) || (0, templates_1.isTransitionGroupElement)(element))) {
                     const { hasEnterClass, hasLeaveClass } = verifyTransitionElementNode(transition);
                     if (hasEnterClass && hasLeaveClass) {
                         continue;

package/dist/rules/no-parent-of-v-global.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const selectors_1 = require("../styles/utils/selectors");
 module.exports = {

package/dist/rules/no-parsing-error.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 module.exports = {
     meta: {
@@ -10,7 +9,7 @@ module.exports = {
             url: "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parsing-error.html",
         },
         fixable: null,
-        messages: {},
+        messages: { parsingError: "Parsing error: {{message}}." },
         schema: [],
         type: "problem",
     },
@@ -24,7 +23,7 @@ module.exports = {
             reporter.report({
                 node,
                 loc: node.loc.start,
-                message: "Parsing error: {{message}}.",
+                messageId: "parsingError",
                 data: {
                     message: node.message.endsWith(".")
                         ? node.message.slice(0, -1)
@@ -36,7 +35,7 @@ module.exports = {
             reporter.report({
                 node: style.styleElement,
                 loc: style.invalid.loc,
-                message: "Parsing error: {{message}}.",
+                messageId: "parsingError",
                 data: {
                     message: style.invalid.message,
                 },

package/dist/rules/no-unused-keyframes.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const template_1 = require("../styles/template");
 const context_1 = require("../styles/context");
 const style_1 = require("../styles/context/style");
@@ -15,13 +14,25 @@ module.exports = {
         messages: {
             unused: "The @keyframes `{{params}}` is unused.",
         },
-        schema: [],
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    checkUnscoped: {
+                        type: "boolean",
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
         type: "suggestion",
     },
     create(context) {
+        var _a;
+        const checkUnscoped = Boolean((_a = context.options[0]) === null || _a === void 0 ? void 0 : _a.checkUnscoped);
         const styles = (0, context_1.getStyleContexts)(context)
             .filter(style_1.isValidStyleContext)
-            .filter((style) => style.scoped);
+            .filter((style) => style.scoped || checkUnscoped);
         if (!styles.length) {
             return {};
         }
@@ -50,8 +61,7 @@ module.exports = {
             style.traverseNodes({
                 enterNode(node) {
                     if (node.type === "VCSSAtRule") {
-                        if (/-?keyframes$/u.test(node.name) &&
-                            node.identifier === "@") {
+                        if (/-?keyframes$/u.test(node.name) && node.identifier === "@") {
                             keyframes.push({
                                 params: template_1.Template.ofParams(node),
                                 node,

package/dist/rules/no-unused-selector.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const selectors_1 = require("../styles/selectors");
 const selectors_2 = require("../styles/utils/selectors");
 const query_1 = require("../styles/selectors/query");
@@ -80,6 +79,9 @@ module.exports = {
                         minItems: 0,
                         uniqueItems: true,
                     },
+                    checkUnscoped: {
+                        type: "boolean",
+                    },
                 },
                 additionalProperties: false,
             },
@@ -87,12 +89,14 @@ module.exports = {
         type: "suggestion",
     },
     create(context) {
+        var _a;
         if (!(0, utils_1.hasTemplateBlock)(context)) {
             return {};
         }
+        const checkUnscoped = Boolean((_a = context.options[0]) === null || _a === void 0 ? void 0 : _a.checkUnscoped);
         const styles = (0, context_1.getStyleContexts)(context)
             .filter(style_1.isValidStyleContext)
-            .filter((style) => style.scoped);
+            .filter((style) => style.scoped || checkUnscoped);
         if (!styles.length) {
             return {};
         }
@@ -160,8 +164,7 @@ module.exports = {
                     if (targetsQueryContext.elements.some(elements_1.isRootElement)) {
                         return;
                     }
-                    targetsQueryContext =
-                        targetsQueryContext.reverseQueryStep(comb);
+                    targetsQueryContext = targetsQueryContext.reverseQueryStep(comb);
                     reportSelectorNodes.push(comb);
                 }
             }

package/dist/rules/require-scoped.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 module.exports = {
     meta: {
@@ -42,8 +41,7 @@ module.exports = {
                         messageId: "add",
                         fix(fixer) {
                             const close = tokenStore.getLastToken(node.startTag);
-                            return (close &&
-                                fixer.insertTextBefore(close, " scoped"));
+                            return close && fixer.insertTextBefore(close, " scoped");
                         },
                     },
                 ],

package/dist/rules/require-selector-used-inside.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const selectors_1 = require("../styles/selectors");
 const selectors_2 = require("../styles/utils/selectors");
 const query_1 = require("../styles/selectors/query");
@@ -63,6 +62,9 @@ module.exports = {
                         minItems: 0,
                         uniqueItems: true,
                     },
+                    checkUnscoped: {
+                        type: "boolean",
+                    },
                 },
                 additionalProperties: false,
             },
@@ -70,12 +72,14 @@ module.exports = {
         type: "suggestion",
     },
     create(context) {
+        var _a;
         if (!(0, utils_1.hasTemplateBlock)(context)) {
             return {};
         }
+        const checkUnscoped = Boolean((_a = context.options[0]) === null || _a === void 0 ? void 0 : _a.checkUnscoped);
         const styles = (0, context_1.getStyleContexts)(context)
             .filter(style_1.isValidStyleContext)
-            .filter((style) => style.scoped);
+            .filter((style) => style.scoped || checkUnscoped);
         if (!styles.length) {
             return {};
         }
@@ -108,8 +112,7 @@ module.exports = {
                 (0, selectors_2.isVueSpecialPseudo)(s));
             for (let index = 0; index < selectorNodes.length; index++) {
                 const selectorNode = selectorNodes[index];
-                targetsQueryContext =
-                    targetsQueryContext.queryStep(selectorNode);
+                targetsQueryContext = targetsQueryContext.queryStep(selectorNode);
                 if (!targetsQueryContext.elements.length) {
                     report(selectorNodes.slice(0, index + 1));
                     break;

package/dist/rules/require-v-deep-argument.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const selectors_1 = require("../styles/utils/selectors");
 const css_nodes_1 = require("../styles/utils/css-nodes");
@@ -61,8 +60,7 @@ module.exports = {
                         return null;
                     }
                     const ruleNode = findHasSelectorsNode(node);
-                    if (!(ruleNode === null || ruleNode === void 0 ? void 0 : ruleNode.nodes.every((n) => (0, css_nodes_1.isVCSSDeclarationProperty)(n) ||
-                        (0, css_nodes_1.isVCSSComment)(n)))) {
+                    if (!(ruleNode === null || ruleNode === void 0 ? void 0 : ruleNode.nodes.every((n) => (0, css_nodes_1.isVCSSDeclarationProperty)(n) || (0, css_nodes_1.isVCSSComment)(n)))) {
                         return null;
                     }
                     const last = nodes[nodes.length - 1];
@@ -80,8 +78,7 @@ module.exports = {
                     if ((0, selectors_1.isVDeepPseudoV2)(node)) {
                         report(node);
                     }
-                    else if ((0, selectors_1.isVDeepPseudo)(node) &&
-                        (0, selectors_1.isPseudoEmptyArguments)(node)) {
+                    else if ((0, selectors_1.isVDeepPseudo)(node) && (0, selectors_1.isPseudoEmptyArguments)(node)) {
                         report(node);
                     }
                 },

package/dist/rules/require-v-global-argument.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const selectors_1 = require("../styles/utils/selectors");
 module.exports = {

package/dist/rules/require-v-slotted-argument.js

@@ -1,5 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("../styles/context");
 const selectors_1 = require("../styles/utils/selectors");
 module.exports = {
@@ -35,8 +34,7 @@ module.exports = {
         function verify(style) {
             style.traverseSelectorNodes({
                 enterNode(node) {
-                    if ((0, selectors_1.isVSlottedPseudo)(node) &&
-                        (0, selectors_1.isPseudoEmptyArguments)(node)) {
+                    if ((0, selectors_1.isVSlottedPseudo)(node) && (0, selectors_1.isPseudoEmptyArguments)(node)) {
                         report(node);
                     }
                 },

package/dist/rules/v-deep-pseudo-style.js

@@ -0,0 +1,63 @@
+"use strict";
+const context_1 = require("../styles/context");
+const selectors_1 = require("../styles/utils/selectors");
+module.exports = {
+    meta: {
+        docs: {
+            description: "enforce `:deep()`/`::v-deep()` style",
+            categories: [],
+            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) {
+        const styles = (0, context_1.getStyleContexts)(context)
+            .filter(context_1.isValidStyleContext)
+            .filter((style) => style.scoped);
+        if (!styles.length) {
+            return {};
+        }
+        const expected = (context.options[0] || ":deep");
+        const reporter = (0, context_1.getCommentDirectivesReporter)(context);
+        function report(node) {
+            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, suffix) => `${prefix}${expected}${suffix}`));
+                },
+            });
+        }
+        function verifyNode(node) {
+            if (node.value === expected) {
+                return;
+            }
+            report(node);
+        }
+        function verify(style) {
+            style.traverseSelectorNodes({
+                enterNode(node) {
+                    if ((0, selectors_1.isVDeepPseudo)(node) && !(0, selectors_1.isPseudoEmptyArguments)(node)) {
+                        verifyNode(node);
+                    }
+                },
+            });
+        }
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    verify(style);
+                }
+            },
+        };
+    },
+};

package/dist/rules/v-global-pseudo-style.js

@@ -0,0 +1,63 @@
+"use strict";
+const context_1 = require("../styles/context");
+const selectors_1 = require("../styles/utils/selectors");
+module.exports = {
+    meta: {
+        docs: {
+            description: "enforce `:global()`/`::v-global()` style",
+            categories: [],
+            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) {
+        const styles = (0, context_1.getStyleContexts)(context)
+            .filter(context_1.isValidStyleContext)
+            .filter((style) => style.scoped);
+        if (!styles.length) {
+            return {};
+        }
+        const expected = (context.options[0] || ":global");
+        const reporter = (0, context_1.getCommentDirectivesReporter)(context);
+        function report(node) {
+            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, suffix) => `${prefix}${expected}${suffix}`));
+                },
+            });
+        }
+        function verifyNode(node) {
+            if (node.value === expected) {
+                return;
+            }
+            report(node);
+        }
+        function verify(style) {
+            style.traverseSelectorNodes({
+                enterNode(node) {
+                    if ((0, selectors_1.isVGlobalPseudo)(node) && !(0, selectors_1.isPseudoEmptyArguments)(node)) {
+                        verifyNode(node);
+                    }
+                },
+            });
+        }
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    verify(style);
+                }
+            },
+        };
+    },
+};

package/dist/rules/v-slotted-pseudo-style.js

@@ -0,0 +1,63 @@
+"use strict";
+const context_1 = require("../styles/context");
+const selectors_1 = require("../styles/utils/selectors");
+module.exports = {
+    meta: {
+        docs: {
+            description: "enforce `:slotted()`/`::v-slotted()` style",
+            categories: [],
+            default: "warn",
+            url: "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-slotted-pseudo-style.html",
+        },
+        fixable: "code",
+        messages: {
+            expectedSlotted: "Expected ':slotted()' instead of '::v-slotted()'.",
+            expectedVSlotted: "Expected '::v-slotted()' instead of ':slotted()'.",
+        },
+        schema: [{ enum: [":slotted", "::v-slotted"] }],
+        type: "suggestion",
+    },
+    create(context) {
+        const styles = (0, context_1.getStyleContexts)(context)
+            .filter(context_1.isValidStyleContext)
+            .filter((style) => style.scoped);
+        if (!styles.length) {
+            return {};
+        }
+        const expected = (context.options[0] || ":slotted");
+        const reporter = (0, context_1.getCommentDirectivesReporter)(context);
+        function report(node) {
+            reporter.report({
+                node,
+                loc: node.loc,
+                messageId: expected === ":slotted" ? "expectedSlotted" : "expectedVSlotted",
+                fix(fixer) {
+                    const nodeText = context.getSourceCode().text.slice(...node.range);
+                    return fixer.replaceTextRange(node.range, nodeText.replace(/^(\s*)(?::slotted|::v-slotted)(\s*\()/u, (_, prefix, suffix) => `${prefix}${expected}${suffix}`));
+                },
+            });
+        }
+        function verifyNode(node) {
+            if (node.value === expected) {
+                return;
+            }
+            report(node);
+        }
+        function verify(style) {
+            style.traverseSelectorNodes({
+                enterNode(node) {
+                    if ((0, selectors_1.isVSlottedPseudo)(node) && !(0, selectors_1.isPseudoEmptyArguments)(node)) {
+                        verifyNode(node);
+                    }
+                },
+            });
+        }
+        return {
+            "Program:exit"() {
+                for (const style of styles) {
+                    verify(style);
+                }
+            },
+        };
+    },
+};

package/dist/styles/ast.js

@@ -48,9 +48,7 @@ class VCSSStyleRule extends HasParentNode {
         }
         else {
             const raws = node.raws;
-            this.rawSelectorText = raws.selector
-                ? raws.selector.raw
-                : node.selector;
+            this.rawSelectorText = raws.selector ? raws.selector.raw : node.selector;
         }
         this.selectors = (_b = props.selectors) !== null && _b !== void 0 ? _b : [];
         this.nodes = (_c = props.nodes) !== null && _c !== void 0 ? _c : [];

package/dist/styles/context/comment-directive/index.js

@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCommentDirectivesReporter = exports.createCommentDirectives = exports.CommentDirectivesReporter = exports.CommentDirectives = void 0;
 const COMMENT_DIRECTIVE_B = /^\s*(eslint-(?:en|dis)able)(?:\s+(\S|\S[\s\S]*\S))?\s*$/u;
 const COMMENT_DIRECTIVE_L = /^\s*(eslint-disable(?:-next)?-line)(?:\s+(\S|\S[\s\S]*\S))?\s*$/u;
+function stripDirectiveComment(value) {
+    return value.split(/\s-{2,}\s/u)[0];
+}
 function parse(pattern, comment) {
-    const match = pattern.exec(comment);
+    const match = pattern.exec(stripDirectiveComment(comment));
     if (match == null) {
         return null;
     }
@@ -45,8 +48,7 @@ function processBlock(commentDirectives, comment) {
 function processLine(commentDirectives, comment) {
     const parsed = parse(COMMENT_DIRECTIVE_L, comment.text);
     if (parsed != null && comment.loc.start.line === comment.loc.end.line) {
-        const line = comment.loc.start.line +
-            (parsed.type === "eslint-disable-line" ? 0 : 1);
+        const line = comment.loc.start.line + (parsed.type === "eslint-disable-line" ? 0 : 1);
         const column = -1;
         if (!parsed.rules.length) {
             commentDirectives.disableLineAll({ line, column });

package/dist/styles/context/vue-components/index.js

@@ -17,7 +17,7 @@ class VueComponentContext {
     }
     findVueComponentProperty(name) {
         const properties = this.properties ||
-            (this.properties = extractVueComponentPropertes(this.node, this.context));
+            (this.properties = extractVueComponentProperties(this.node, this.context));
         if (properties[UNKNOWN]) {
             return null;
         }
@@ -48,7 +48,7 @@ function createVueComponentContext(context) {
     return new VueComponentContext(node, context);
 }
 exports.createVueComponentContext = createVueComponentContext;
-function extractVueComponentPropertes(vueNode, context) {
+function extractVueComponentProperties(vueNode, context) {
     const result = {
         data: {},
         computed: {},
@@ -129,7 +129,7 @@ function extractVueComponentComputed(computedNode, context) {
             continue;
         }
         const values = computed[keyName] || (computed[keyName] = []);
-        const { value } = p;
+        const value = p.value;
         let func = value;
         if (value.type === "ObjectExpression") {
             const get = value.properties

package/dist/styles/parser/css-parser.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/styles/parser/selector/css-selector-parser.js

@@ -63,8 +63,7 @@ class CSSSelectorParser {
                 astNode.nodes = (0, selectors_1.normalizePseudoParams)(astNode, this._postcssSelectorParserNodeChiildrenToASTNodes(offsetLocation, node, astNode));
             }
             else if (astNode.type === "VCSSSelector") {
-                astNode.nodes =
-                    this._postcssSelectorParserNodeChiildrenToASTNodes(offsetLocation, node, astNode);
+                astNode.nodes = this._postcssSelectorParserNodeChiildrenToASTNodes(offsetLocation, node, astNode);
             }
         }
         return astNode;
@@ -165,9 +164,7 @@ class CSSSelectorParser {
         return astNode;
     }
     convertCommentNode(node, loc, start, end, parent) {
-        const text = node.value
-            .replace(/^\s*\/\*/u, "")
-            .replace(/\*\/\s*$/u, "");
+        const text = node.value.replace(/^\s*\/\*/u, "").replace(/\*\/\s*$/u, "");
         this.commentContainer.push(new ast_1.VCSSComment(node, text, loc, start, end, {
             parent,
         }));

package/dist/styles/parser/selector/stylus-selector-parser.js

@@ -60,8 +60,7 @@ class StylusSelectorParser extends css_selector_parser_1.CSSSelectorParser {
                 replace(res, _random, { beforeCss }) {
                     const before = [...beforeCss];
                     let prev = before.pop();
-                    while (prev != null &&
-                        (prev.startsWith("/*") || !prev.trim())) {
+                    while (prev != null && (prev.startsWith("/*") || !prev.trim())) {
                         prev = before.pop();
                     }
                     if (prev === null || prev === void 0 ? void 0 : prev.trim().endsWith(",")) {

package/dist/styles/parser/stylus-parser.js

@@ -26,9 +26,7 @@ class StylusParser extends css_parser_1.CSSParser {
         return super.convertCommentNode(node, loc, start, end, parent);
     }
     getRaw(node, keyName) {
-        if (keyName === "between" ||
-            keyName === "before" ||
-            keyName === "after") {
+        if (keyName === "between" || keyName === "before" || keyName === "after") {
             const stylus = super.getRaw(node, `stylus${keyName[0].toUpperCase()}${keyName.slice(1)}`);
             if (stylus) {
                 return stylus;

package/dist/styles/selectors/query/attribute-tracker.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getReferenceExpressions = exports.getAttributeValueNodes = void 0;
-const context_1 = require("../../context");
+exports.getAttributeValueNodes = void 0;
 const templates_1 = require("../../../utils/templates");
+const reference_expression_1 = require("./reference-expression");
 function getAttributeValueNodes(element, name, context) {
     const results = [];
     const { startTag } = element;
@@ -35,7 +35,7 @@ function getAttributeValueNodes(element, name, context) {
             if (expression == null) {
                 continue;
             }
-            const expressions = getReferenceExpressions(expression, context);
+            const expressions = (0, reference_expression_1.getReferenceExpressions)(expression, context);
             if (!expressions) {
                 return null;
             }
@@ -47,18 +47,3 @@ function getAttributeValueNodes(element, name, context) {
     return results;
 }
 exports.getAttributeValueNodes = getAttributeValueNodes;
-function getReferenceExpressions(expression, context) {
-    if (expression.type !== "Identifier") {
-        return [expression];
-    }
-    const vueComponent = (0, context_1.getVueComponentContext)(context);
-    if (!vueComponent) {
-        return null;
-    }
-    const props = vueComponent.findVueComponentProperty(expression.name);
-    if (props == null) {
-        return null;
-    }
-    return props;
-}
-exports.getReferenceExpressions = getReferenceExpressions;

package/dist/styles/selectors/query/index.js

@@ -9,6 +9,7 @@ const nodes_1 = require("../../utils/nodes");
 const template_1 = require("../../template");
 const templates_1 = require("../../../utils/templates");
 const style_1 = require("../../context/style");
+const reference_expression_1 = require("./reference-expression");
 const TRANSITION_CLASS_BASES = [
     "enter",
     "enter-from",
@@ -141,7 +142,9 @@ function* queryStep(elements, selectorNode, document) {
     }
     yield* elements;
     function query(els, selList) {
-        return selList.reduce((res, sel) => [...queryStep(res, sel, document)], els);
+        return selList.reduce((res, sel) => [
+            ...queryStep(res, sel, document),
+        ], els);
     }
 }
 function* reverseQueryStep(elements, selectorNode, document) {
@@ -178,7 +181,9 @@ function* reverseQueryStep(elements, selectorNode, document) {
     }
     yield* queryStep(elements, selectorNode, document);
     function query(els, selList) {
-        return selList.reduceRight((res, sel) => [...reverseQueryStep(res, sel, document)], els);
+        return selList.reduceRight((res, sel) => [
+            ...reverseQueryStep(res, sel, document),
+        ], els);
     }
 }
 function* genDescendantElements(elements) {
@@ -558,30 +563,20 @@ function matchClassNameExpression(expression, className, document) {
 }
 function matchClassNameForArrayExpression(expression, className, document) {
     for (const e of expression.elements) {
-        if (e.type === "Identifier") {
-            if (withinTemplate(e, document)) {
-                const expressions = (0, attribute_tracker_1.getReferenceExpressions)(e, document.context);
-                if (expressions) {
-                    for (const e2 of expressions) {
-                        if (matchClassNameExpression(e2, className, document)) {
-                            return true;
-                        }
-                    }
-                }
-            }
-            else {
-                if (matchClassNameExpression(e, className, document)) {
-                    return true;
-                }
-            }
-        }
-        else if (e.type === "SpreadElement") {
+        if (e.type === "SpreadElement") {
             if (matchClassNameExpression(e.argument, className, document)) {
                 return true;
             }
         }
-        else if (matchClassNameExpression(e, className, document)) {
-            return true;
+        else {
+            const expressions = (0, reference_expression_1.getReferenceExpressions)(e, document.context);
+            if (expressions) {
+                for (const e2 of expressions) {
+                    if (matchClassNameExpression(e2, className, document)) {
+                        return true;
+                    }
+                }
+            }
         }
     }
     return false;
@@ -625,12 +620,6 @@ function includesClassName(value, className) {
     }
     return value.divide(/\s+/u).some((s) => className.match(s));
 }
-function withinTemplate(expr, document) {
-    var _a;
-    const templateBody = document.context.getSourceCode().ast.templateBody;
-    const templateRange = (_a = templateBody === null || templateBody === void 0 ? void 0 : templateBody.range) !== null && _a !== void 0 ? _a : [0, 0];
-    return (templateRange[0] <= expr.range[0] && expr.range[1] <= templateRange[1]);
-}
 function* iterateUnique(gen) {
     const found = new Set();
     for (const e of gen()) {

package/dist/styles/selectors/query/reference-expression.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReferenceExpressions = void 0;
+const context_1 = require("../../context");
+function getReferenceExpressions(expression, context) {
+    var _a, _b, _c, _d;
+    if (expression.type === "ConditionalExpression") {
+        const { consequent, alternate } = expression;
+        return [
+            ...((_a = getReferenceExpressions(consequent, context)) !== null && _a !== void 0 ? _a : [consequent]),
+            ...((_b = getReferenceExpressions(alternate, context)) !== null && _b !== void 0 ? _b : [alternate]),
+        ];
+    }
+    if (expression.type === "LogicalExpression") {
+        const { left, right } = expression;
+        return [
+            ...((_c = getReferenceExpressions(left, context)) !== null && _c !== void 0 ? _c : [left]),
+            ...((_d = getReferenceExpressions(right, context)) !== null && _d !== void 0 ? _d : [right]),
+        ];
+    }
+    if (expression.type !== "Identifier") {
+        return [expression];
+    }
+    if (!withinTemplate(expression, context)) {
+        return [expression];
+    }
+    const vueComponent = (0, context_1.getVueComponentContext)(context);
+    if (!vueComponent) {
+        return null;
+    }
+    const props = vueComponent.findVueComponentProperty(expression.name);
+    if (props == null) {
+        return null;
+    }
+    return props;
+}
+exports.getReferenceExpressions = getReferenceExpressions;
+function withinTemplate(expr, context) {
+    var _a;
+    const templateBody = context.getSourceCode().ast.templateBody;
+    const templateRange = (_a = templateBody === null || templateBody === void 0 ? void 0 : templateBody.range) !== null && _a !== void 0 ? _a : [0, 0];
+    return templateRange[0] <= expr.range[0] && expr.range[1] <= templateRange[1];
+}

package/dist/styles/selectors/resolver/css-selector-resolver.js

@@ -59,9 +59,7 @@ class CSSSelectorResolver {
         return resolved;
     }
     isIgnoreNode(node) {
-        return ((0, css_nodes_1.isVCSSAtRule)(node) &&
-            node.name === "keyframes" &&
-            node.identifier === "@");
+        return ((0, css_nodes_1.isVCSSAtRule)(node) && node.name === "keyframes" && node.identifier === "@");
     }
     resolveNestingSelectors(owner, selectorNodes, parentSelectors, container) {
         if ((0, selectors_1.isNestingAtRule)(container)) {
@@ -134,9 +132,7 @@ class CSSSelectorResolver {
                 const needJoinLeft = maybeJoinLeft && (0, selectors_1.isTypeSelector)(parentSelector[0]);
                 const needJoinRight = maybeJoinRight &&
                     !(0, selectors_1.isSelectorCombinator)(parentSelector[parentSelector.length - 1]);
-                if (needJoinLeft &&
-                    needJoinRight &&
-                    parentSelector.length === 1) {
+                if (needJoinLeft && needJoinRight && parentSelector.length === 1) {
                     before.push(newNestingConcatBothSelectorNodes(before.pop(), parentSelector.shift(), after.shift(), nestingNode));
                 }
                 else {
@@ -182,11 +178,7 @@ class CSSSelectorResolver {
             resolved = resolved.map((selector) => {
                 const newNode = parent.copy();
                 newNode.nodes = selector.selector;
-                return new ResolvedSelector(owner, [
-                    ...before,
-                    newNode,
-                    ...after,
-                ]);
+                return new ResolvedSelector(owner, [...before, newNode, ...after]);
             });
             nestingTargetNode = parent;
         }

package/dist/styles/utils/selectors.js

@@ -49,7 +49,7 @@ function normalizePseudoParams(pseudo, nodes) {
 }
 exports.normalizePseudoParams = normalizePseudoParams;
 function isVueSpecialPseudo(node) {
-    return (isVDeepPseudo(node) || isVSlottedPseudo(node) || isVGlobalPseudo(node));
+    return isVDeepPseudo(node) || isVSlottedPseudo(node) || isVGlobalPseudo(node);
 }
 exports.isVueSpecialPseudo = isVueSpecialPseudo;
 function isVDeepPseudoV2(node) {

package/dist/utils/rules.js

@@ -62,6 +62,21 @@ const baseRules = [
         ruleName: "require-v-slotted-argument",
         ruleId: "vue-scoped-css/require-v-slotted-argument",
     },
+    {
+        rule: require("../rules/v-deep-pseudo-style"),
+        ruleName: "v-deep-pseudo-style",
+        ruleId: "vue-scoped-css/v-deep-pseudo-style",
+    },
+    {
+        rule: require("../rules/v-global-pseudo-style"),
+        ruleName: "v-global-pseudo-style",
+        ruleId: "vue-scoped-css/v-global-pseudo-style",
+    },
+    {
+        rule: require("../rules/v-slotted-pseudo-style"),
+        ruleName: "v-slotted-pseudo-style",
+        ruleId: "vue-scoped-css/v-slotted-pseudo-style",
+    },
 ];
 exports.rules = baseRules.map((obj) => {
     const rule = obj.rule;

package/package.json

@@ -1,122 +1,130 @@
 {
-    "name": "eslint-plugin-vue-scoped-css",
-    "version": "2.2.0",
-    "description": "ESLint plugin for Scoped CSS in Vue.js",
-    "main": "dist/index.js",
-    "scripts": {
-        "prebuild": "npm run -s clean",
-        "build": "tsc --project ./tsconfig.build.json",
-        "clean": "rimraf .nyc_output dist coverage",
-        "lint": "eslint . --ext .js,.vue,.ts,.json",
-        "eslint-fix": "eslint . --ext .js,.vue,.ts,.json --fix",
-        "pretest": "npm run build",
-        "test:base": "mocha --require ts-node/register \"tests/**/*.ts\" --reporter dot --timeout 60000",
-        "test": "npm run test:nyc",
-        "test:nyc": "nyc --reporter=lcov npm run test:base",
-        "test:debug": "mocha --require ts-node/register/transpile-only \"tests/**/*.ts\" --reporter dot",
-        "test:watch": "npm run test:base -- --watch",
-        "update": "ts-node ./tools/update.ts && npm run eslint-fix && npm run test:nyc",
-        "new": "ts-node ./tools/new-rule.ts",
-        "docs:watch": "vuepress dev --debug docs",
-        "docs:build": "npm run build && vuepress build docs --no-cache",
-        "preversion": "npm test && npm run update && git add .",
-        "version": "npm run lint -- --fix && git add .",
-        "updatefixture": "cross-env UPDATE_FIXTURE=\"true\" npm run test:base"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/future-architect/eslint-plugin-vue-scoped-css.git"
-    },
-    "author": "Yosuke Ota",
-    "funding": "https://github.com/sponsors/ota-meshi",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues"
-    },
-    "homepage": "https://future-architect.github.io/eslint-plugin-vue-scoped-css/",
-    "keywords": [
-        "eslint",
-        "eslintplugin",
-        "eslint-plugin",
-        "vue",
-        "style",
-        "scoped",
-        "css"
+  "name": "eslint-plugin-vue-scoped-css",
+  "version": "2.4.0",
+  "description": "ESLint plugin for Scoped CSS in Vue.js",
+  "main": "dist/index.js",
+  "scripts": {
+    "prebuild": "npm run -s clean",
+    "build": "tsc --project ./tsconfig.build.json",
+    "clean": "rimraf .nyc_output dist coverage",
+    "lint": "eslint . --ext .js,.vue,.ts,.json",
+    "eslint-fix": "eslint . --ext .js,.vue,.ts,.json --fix",
+    "pretest": "npm run build",
+    "test:base": "mocha --require ts-node/register \"tests/**/*.ts\" --reporter dot --timeout 60000",
+    "test": "npm run test:nyc",
+    "test:nyc": "nyc --reporter=lcov npm run test:base",
+    "test:debug": "mocha --require ts-node/register/transpile-only \"tests/**/*.ts\" --reporter dot",
+    "test:watch": "npm run test:base -- --watch",
+    "update": "ts-node ./tools/update.ts && npm run eslint-fix && npm run test:nyc",
+    "new": "ts-node ./tools/new-rule.ts",
+    "docs:watch": "npm run vuepress -- dev --debug docs",
+    "docs:build": "npm run build && npm run vuepress -- build docs --no-cache",
+    "vuepress": "node --openssl-legacy-provider ./node_modules/vuepress/cli.js",
+    "preversion": "npm test && npm run update && git add .",
+    "version": "npm run lint -- --fix && git add .",
+    "version:ci": "npm run update && changeset version",
+    "prerelease": "npm run build",
+    "release": "changeset publish",
+    "updatefixture": "cross-env UPDATE_FIXTURE=\"true\" npm run test:base"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/future-architect/eslint-plugin-vue-scoped-css.git"
+  },
+  "author": "Yosuke Ota",
+  "funding": "https://github.com/sponsors/ota-meshi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/future-architect/eslint-plugin-vue-scoped-css/issues"
+  },
+  "homepage": "https://future-architect.github.io/eslint-plugin-vue-scoped-css/",
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "eslint-plugin",
+    "vue",
+    "style",
+    "scoped",
+    "css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@changesets/cli": "^2.24.2",
+    "@ota-meshi/eslint-plugin": "^0.13.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
+    "@types/eslint": "^8.0.0",
+    "@types/eslint-visitor-keys": "^1.0.0",
+    "@types/estree": "^1.0.0",
+    "@types/lodash": "^4.14.158",
+    "@types/mocha": "^10.0.0",
+    "@types/semver": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-eslint-plugin": "^5.0.0",
+    "eslint-plugin-json-schema-validator": "^4.0.0",
+    "eslint-plugin-jsonc": "^2.0.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-regexp": "^1.0.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "eslint-plugin-vue-scoped-css": "^2.0.0",
+    "eslint-plugin-yml": "^1.0.0",
+    "mocha": "^10.0.0",
+    "nyc": "^15.1.0",
+    "pack": "^2.2.0",
+    "prettier": "^2.0.5",
+    "raw-loader": "^4.0.1",
+    "rimraf": "^3.0.2",
+    "semver": "^7.3.2",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended-vue": "^1.1.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-stylus": "^0.17.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "vue-eslint-editor": "^1.1.0",
+    "vue-eslint-parser": "^9.0.0",
+    "vuepress": "^1.8.2"
+  },
+  "dependencies": {
+    "eslint-utils": "^3.0.0",
+    "lodash": "^4.17.21",
+    "postcss": "^8.4.6",
+    "postcss-safe-parser": "^6.0.0",
+    "postcss-scss": "^4.0.3",
+    "postcss-selector-parser": "^6.0.9",
+    "postcss-styl": "^0.12.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=5.0.0",
+    "vue-eslint-parser": ">=7.1.0"
+  },
+  "nyc": {
+    "include": [
+      "lib/*.ts",
+      "lib/**/*.ts"
     ],
-    "files": [
-        "dist"
+    "extension": [
+      ".ts"
     ],
-    "devDependencies": {
-        "@ota-meshi/eslint-plugin": "^0.10.0",
-        "@types/eslint": "^8.0.0",
-        "@types/eslint-visitor-keys": "^1.0.0",
-        "@types/estree": "^0.0.50",
-        "@types/lodash": "^4.14.158",
-        "@types/mocha": "^9.0.0",
-        "@types/semver": "^7.3.1",
-        "@typescript-eslint/eslint-plugin": "^5.0.0",
-        "@typescript-eslint/parser": "^5.0.0",
-        "cross-env": "^7.0.2",
-        "eslint": "^8.0.0",
-        "eslint-config-prettier": "^8.0.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-eslint-plugin": "^4.0.0",
-        "eslint-plugin-internal-rules": "file:./eslint-internal-rules",
-        "eslint-plugin-json-schema-validator": "^2.0.0",
-        "eslint-plugin-jsonc": "^2.0.0",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-regexp": "^1.0.0",
-        "eslint-plugin-vue": "^8.0.0",
-        "eslint-plugin-vue-scoped-css": "^2.0.0",
-        "eslint-plugin-yml": "^0.13.0",
-        "mocha": "^9.1.2",
-        "nyc": "^15.1.0",
-        "pack": "^2.2.0",
-        "prettier": "^2.0.5",
-        "raw-loader": "^4.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.2",
-        "stylelint": "^14.0.0",
-        "stylelint-config-recommended-vue": "^1.1.0",
-        "stylelint-config-standard": "^24.0.0",
-        "stylelint-plugin-stylus": "^0.13.0",
-        "ts-node": "^10.0.0",
-        "typescript": "^4.1.3",
-        "vue-eslint-editor": "^1.1.0",
-        "vue-eslint-parser": "^8.0.0",
-        "vuepress": "^1.8.2"
-    },
-    "dependencies": {
-        "eslint-utils": "^3.0.0",
-        "lodash": "^4.17.21",
-        "postcss": "^8.4.6",
-        "postcss-safe-parser": "^6.0.0",
-        "postcss-scss": "^4.0.3",
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-styl": "^0.9.0"
-    },
-    "peerDependencies": {
-        "eslint": ">=5.0.0",
-        "vue-eslint-parser": ">=7.1.0"
-    },
-    "nyc": {
-        "include": [
-            "lib/*.ts",
-            "lib/**/*.ts"
-        ],
-        "extension": [
-            ".ts"
-        ],
-        "require": [
-            "ts-node/register"
-        ],
-        "exclude": [
-            "**/*.spec.js",
-            "tests/**/*.js"
-        ]
-    },
-    "engines": {
-        "node": "^12.22 || ^14.17 || >=16"
-    }
+    "require": [
+      "ts-node/register"
+    ],
+    "exclude": [
+      "**/*.spec.js",
+      "tests/**/*.js"
+    ]
+  },
+  "engines": {
+    "node": "^12.22 || ^14.17 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }