vscode-css-languageservice 6.3.4 → 6.3.5

package/lib/esm/parser/cssNodes.js

@@ -62,45 +62,46 @@ export var NodeType;
     NodeType[NodeType["MixinContentReference"] = 49] = "MixinContentReference";
     NodeType[NodeType["MixinContentDeclaration"] = 50] = "MixinContentDeclaration";
     NodeType[NodeType["Media"] = 51] = "Media";
-    NodeType[NodeType["Keyframe"] = 52] = "Keyframe";
-    NodeType[NodeType["FontFace"] = 53] = "FontFace";
-    NodeType[NodeType["Import"] = 54] = "Import";
-    NodeType[NodeType["Namespace"] = 55] = "Namespace";
-    NodeType[NodeType["Invocation"] = 56] = "Invocation";
-    NodeType[NodeType["FunctionDeclaration"] = 57] = "FunctionDeclaration";
-    NodeType[NodeType["ReturnStatement"] = 58] = "ReturnStatement";
-    NodeType[NodeType["MediaQuery"] = 59] = "MediaQuery";
-    NodeType[NodeType["MediaCondition"] = 60] = "MediaCondition";
-    NodeType[NodeType["MediaFeature"] = 61] = "MediaFeature";
-    NodeType[NodeType["FunctionParameter"] = 62] = "FunctionParameter";
-    NodeType[NodeType["FunctionArgument"] = 63] = "FunctionArgument";
-    NodeType[NodeType["KeyframeSelector"] = 64] = "KeyframeSelector";
-    NodeType[NodeType["ViewPort"] = 65] = "ViewPort";
-    NodeType[NodeType["Document"] = 66] = "Document";
-    NodeType[NodeType["AtApplyRule"] = 67] = "AtApplyRule";
-    NodeType[NodeType["CustomPropertyDeclaration"] = 68] = "CustomPropertyDeclaration";
-    NodeType[NodeType["CustomPropertySet"] = 69] = "CustomPropertySet";
-    NodeType[NodeType["ListEntry"] = 70] = "ListEntry";
-    NodeType[NodeType["Supports"] = 71] = "Supports";
-    NodeType[NodeType["SupportsCondition"] = 72] = "SupportsCondition";
-    NodeType[NodeType["NamespacePrefix"] = 73] = "NamespacePrefix";
-    NodeType[NodeType["GridLine"] = 74] = "GridLine";
-    NodeType[NodeType["Plugin"] = 75] = "Plugin";
-    NodeType[NodeType["UnknownAtRule"] = 76] = "UnknownAtRule";
-    NodeType[NodeType["Use"] = 77] = "Use";
-    NodeType[NodeType["ModuleConfiguration"] = 78] = "ModuleConfiguration";
-    NodeType[NodeType["Forward"] = 79] = "Forward";
-    NodeType[NodeType["ForwardVisibility"] = 80] = "ForwardVisibility";
-    NodeType[NodeType["Module"] = 81] = "Module";
-    NodeType[NodeType["UnicodeRange"] = 82] = "UnicodeRange";
-    NodeType[NodeType["Layer"] = 83] = "Layer";
-    NodeType[NodeType["LayerNameList"] = 84] = "LayerNameList";
-    NodeType[NodeType["LayerName"] = 85] = "LayerName";
-    NodeType[NodeType["PropertyAtRule"] = 86] = "PropertyAtRule";
-    NodeType[NodeType["Container"] = 87] = "Container";
-    NodeType[NodeType["ModuleConfig"] = 88] = "ModuleConfig";
-    NodeType[NodeType["SelectorList"] = 89] = "SelectorList";
-    NodeType[NodeType["StartingStyleAtRule"] = 90] = "StartingStyleAtRule";
+    NodeType[NodeType["Scope"] = 52] = "Scope";
+    NodeType[NodeType["Keyframe"] = 53] = "Keyframe";
+    NodeType[NodeType["FontFace"] = 54] = "FontFace";
+    NodeType[NodeType["Import"] = 55] = "Import";
+    NodeType[NodeType["Namespace"] = 56] = "Namespace";
+    NodeType[NodeType["Invocation"] = 57] = "Invocation";
+    NodeType[NodeType["FunctionDeclaration"] = 58] = "FunctionDeclaration";
+    NodeType[NodeType["ReturnStatement"] = 59] = "ReturnStatement";
+    NodeType[NodeType["MediaQuery"] = 60] = "MediaQuery";
+    NodeType[NodeType["MediaCondition"] = 61] = "MediaCondition";
+    NodeType[NodeType["MediaFeature"] = 62] = "MediaFeature";
+    NodeType[NodeType["FunctionParameter"] = 63] = "FunctionParameter";
+    NodeType[NodeType["FunctionArgument"] = 64] = "FunctionArgument";
+    NodeType[NodeType["KeyframeSelector"] = 65] = "KeyframeSelector";
+    NodeType[NodeType["ViewPort"] = 66] = "ViewPort";
+    NodeType[NodeType["Document"] = 67] = "Document";
+    NodeType[NodeType["AtApplyRule"] = 68] = "AtApplyRule";
+    NodeType[NodeType["CustomPropertyDeclaration"] = 69] = "CustomPropertyDeclaration";
+    NodeType[NodeType["CustomPropertySet"] = 70] = "CustomPropertySet";
+    NodeType[NodeType["ListEntry"] = 71] = "ListEntry";
+    NodeType[NodeType["Supports"] = 72] = "Supports";
+    NodeType[NodeType["SupportsCondition"] = 73] = "SupportsCondition";
+    NodeType[NodeType["NamespacePrefix"] = 74] = "NamespacePrefix";
+    NodeType[NodeType["GridLine"] = 75] = "GridLine";
+    NodeType[NodeType["Plugin"] = 76] = "Plugin";
+    NodeType[NodeType["UnknownAtRule"] = 77] = "UnknownAtRule";
+    NodeType[NodeType["Use"] = 78] = "Use";
+    NodeType[NodeType["ModuleConfiguration"] = 79] = "ModuleConfiguration";
+    NodeType[NodeType["Forward"] = 80] = "Forward";
+    NodeType[NodeType["ForwardVisibility"] = 81] = "ForwardVisibility";
+    NodeType[NodeType["Module"] = 82] = "Module";
+    NodeType[NodeType["UnicodeRange"] = 83] = "UnicodeRange";
+    NodeType[NodeType["Layer"] = 84] = "Layer";
+    NodeType[NodeType["LayerNameList"] = 85] = "LayerNameList";
+    NodeType[NodeType["LayerName"] = 86] = "LayerName";
+    NodeType[NodeType["PropertyAtRule"] = 87] = "PropertyAtRule";
+    NodeType[NodeType["Container"] = 88] = "Container";
+    NodeType[NodeType["ModuleConfig"] = 89] = "ModuleConfig";
+    NodeType[NodeType["SelectorList"] = 90] = "SelectorList";
+    NodeType[NodeType["StartingStyleAtRule"] = 91] = "StartingStyleAtRule";
 })(NodeType || (NodeType = {}));
 export var ReferenceType;
 (function (ReferenceType) {
@@ -871,6 +872,44 @@ export class Media extends BodyDeclaration {
         return NodeType.Media;
     }
 }
+export class Scope extends BodyDeclaration {
+    constructor(offset, length) {
+        super(offset, length);
+    }
+    get type() {
+        return NodeType.Scope;
+    }
+}
+export class ScopeLimits extends Node {
+    constructor(offset, length) {
+        super(offset, length);
+    }
+    get type() {
+        return NodeType.Scope;
+    }
+    getScopeStart() {
+        return this.scopeStart;
+    }
+    setScopeStart(right) {
+        return this.setNode('scopeStart', right);
+    }
+    getScopeEnd() {
+        return this.scopeEnd;
+    }
+    setScopeEnd(right) {
+        return this.setNode('scopeEnd', right);
+    }
+    getName() {
+        let name = '';
+        if (this.scopeStart) {
+            name += this.scopeStart.getText();
+        }
+        if (this.scopeEnd) {
+            name += `${this.scopeStart ? ' ' : ''}→ ${this.scopeEnd.getText()}`;
+        }
+        return name;
+    }
+}
 export class Supports extends BodyDeclaration {
     constructor(offset, length) {
         super(offset, length);

package/lib/esm/parser/cssParser.js

@@ -267,6 +267,7 @@ export class Parser {
     _parseStylesheetAtStatement(isNested = false) {
         return this._parseImport()
             || this._parseMedia(isNested)
+            || this._parseScope()
             || this._parsePage()
             || this._parseFontFace()
             || this._parseKeyframe()
@@ -309,6 +310,7 @@ export class Parser {
     }
     _parseRuleSetDeclarationAtStatement() {
         return this._parseMedia(true)
+            || this._parseScope()
             || this._parseSupports(true)
             || this._parseLayer(true)
             || this._parseContainer(true)
@@ -339,6 +341,7 @@ export class Parser {
             case nodes.NodeType.MixinDeclaration:
             case nodes.NodeType.FunctionDeclaration:
             case nodes.NodeType.MixinContentDeclaration:
+            case nodes.NodeType.Scope:
                 return false;
             case nodes.NodeType.ExtendsReference:
             case nodes.NodeType.MixinContentReference:
@@ -1094,6 +1097,57 @@ export class Parser {
     _parseMediaFeatureValue() {
         return this._parseRatio() || this._parseTermExpression();
     }
+    _parseScope() {
+        // @scope [<scope-limits>]? { <block-contents> }
+        if (!this.peekKeyword('@scope')) {
+            return null;
+        }
+        const node = this.create(nodes.Scope);
+        // @scope
+        this.consumeToken();
+        node.addChild(this._parseScopeLimits());
+        return this._parseBody(node, this._parseScopeDeclaration.bind(this));
+    }
+    _parseScopeDeclaration() {
+        // Treat as nested as regular declarations are implicity wrapped with :where(:scope)
+        // https://github.com/w3c/csswg-drafts/issues/10389
+        // pseudo-selectors implicitly target :scope
+        // https://drafts.csswg.org/css-cascade-6/#scoped-rules
+        const isNested = true;
+        return this._tryParseRuleset(isNested)
+            || this._tryToParseDeclaration()
+            || this._parseStylesheetStatement(isNested);
+    }
+    _parseScopeLimits() {
+        // [(<scope-start>)]? [to (<scope-end>)]?
+        const node = this.create(nodes.ScopeLimits);
+        // [(<scope-start>)]?
+        if (this.accept(TokenType.ParenthesisL)) {
+            // scope-start selector can start with a combinator as it defaults to :scope
+            // Treat as nested
+            if (!node.setScopeStart(this._parseSelector(true))) {
+                return this.finish(node, ParseError.SelectorExpected, [], [TokenType.ParenthesisR]);
+            }
+            if (!this.accept(TokenType.ParenthesisR)) {
+                return this.finish(node, ParseError.RightParenthesisExpected, [], [TokenType.CurlyL]);
+            }
+        }
+        // [to (<scope-end>)]?
+        if (this.acceptIdent('to')) {
+            if (!this.accept(TokenType.ParenthesisL)) {
+                return this.finish(node, ParseError.LeftParenthesisExpected, [], [TokenType.CurlyL]);
+            }
+            // 'to' selector can start with a combinator as it defaults to :scope
+            // Treat as nested
+            if (!node.setScopeEnd(this._parseSelector(true))) {
+                return this.finish(node, ParseError.SelectorExpected, [], [TokenType.ParenthesisR]);
+            }
+            if (!this.accept(TokenType.ParenthesisR)) {
+                return this.finish(node, ParseError.RightParenthesisExpected, [], [TokenType.CurlyL]);
+            }
+        }
+        return this.finish(node);
+    }
     _parseMedium() {
         const node = this.create(nodes.Node);
         if (node.addChild(this._parseIdent())) {

package/lib/esm/services/cssHover.js

@@ -29,20 +29,26 @@ export class CSSHover {
          * Build up the hover by appending inner node's information
          */
         let hover = null;
-        let flagOpts;
+        let selectorContexts = [];
         for (let i = 0; i < nodepath.length; i++) {
             const node = nodepath[i];
+            if (node instanceof nodes.Scope) {
+                const scopeLimits = node.getChild(0);
+                if (scopeLimits instanceof nodes.ScopeLimits) {
+                    const scopeName = `${scopeLimits.getName()}`;
+                    selectorContexts.push(`@scope${scopeName ? ` ${scopeName}` : ''}`);
+                }
+            }
             if (node instanceof nodes.Media) {
-                const regex = /@media[^\{]+/g;
-                const matches = node.getText().match(regex);
-                flagOpts = {
-                    isMedia: true,
-                    text: matches?.[0],
-                };
+                const mediaList = node.getChild(0);
+                if (mediaList instanceof nodes.Medialist) {
+                    const name = '@media ' + mediaList.getText();
+                    selectorContexts.push(name);
+                }
             }
             if (node instanceof nodes.Selector) {
                 hover = {
-                    contents: this.selectorPrinting.selectorToMarkedString(node, flagOpts),
+                    contents: this.selectorPrinting.selectorToMarkedString(node, selectorContexts),
                     range: getRange(node),
                 };
                 break;

package/lib/esm/services/cssNavigation.js

@@ -256,6 +256,14 @@ export class CSSNavigation {
                     collect(name, SymbolKind.Module, node, mediaList, node.getDeclarations());
                 }
             }
+            else if (node instanceof nodes.Scope) {
+                let scopeName = '';
+                const scopeLimits = node.getChild(0);
+                if (scopeLimits instanceof nodes.ScopeLimits) {
+                    scopeName = `${scopeLimits.getName()}`;
+                }
+                collect(`@scope${scopeName ? ` ${scopeName}` : ''}`, SymbolKind.Module, node, scopeLimits ?? undefined, node.getDeclarations());
+            }
             return true;
         });
     }

package/lib/esm/services/selectorPrinting.js

@@ -112,7 +112,7 @@ class MarkedStringPrinter {
         this.result = [];
         // empty
     }
-    print(element, flagOpts) {
+    print(element, selectorContexts) {
         this.result = [];
         if (element instanceof RootElement) {
             if (element.children) {
@@ -123,8 +123,8 @@ class MarkedStringPrinter {
             this.doPrint([element], 0);
         }
         let value;
-        if (flagOpts) {
-            value = `${flagOpts.text}\n … ` + this.result.join('\n');
+        if (selectorContexts) {
+            value = [...selectorContexts, ...this.result].join('\n');
         }
         else {
             value = this.result.join('\n');
@@ -304,10 +304,10 @@ export class SelectorPrinting {
     constructor(cssDataManager) {
         this.cssDataManager = cssDataManager;
     }
-    selectorToMarkedString(node, flagOpts) {
+    selectorToMarkedString(node, selectorContexts) {
         const root = selectorToElement(node);
         if (root) {
-            const markedStrings = new MarkedStringPrinter('"').print(root, flagOpts);
+            const markedStrings = new MarkedStringPrinter('"').print(root, selectorContexts);
             markedStrings.push(this.selectorToSpecificityMarkedString(node));
             return markedStrings;
         }