vscode-css-languageservice 5.1.7 → 5.1.11

package/lib/esm/languageFacts/colors.js

@@ -181,9 +181,22 @@ function getNumericValue(node, factor) {
 }
 function getAngle(node) {
     var val = node.getText();
-    var m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(deg)?$/);
+    var m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(deg|rad|grad|turn)?$/);
     if (m) {
-        return parseFloat(val) % 360;
+        switch (m[2]) {
+            case 'deg':
+                return parseFloat(val) % 360;
+            case 'rad':
+                return (parseFloat(val) * 180 / Math.PI) % 360;
+            case 'grad':
+                return (parseFloat(val) * 0.9) % 360;
+            case 'turn':
+                return (parseFloat(val) * 360) % 360;
+            default:
+                if ('undefined' === typeof m[2]) {
+                    return parseFloat(val) % 360;
+                }
+        }
     }
     throw new Error();
 }
@@ -354,6 +367,21 @@ export function getColorValue(node) {
         var functionNode = node;
         var name = functionNode.getName();
         var colorValues = functionNode.getArguments().getChildren();
+        if (colorValues.length === 1) {
+            var functionArg = colorValues[0].getChildren();
+            if (functionArg.length === 1 && functionArg[0].type === nodes.NodeType.Expression) {
+                colorValues = functionArg[0].getChildren();
+                if (colorValues.length === 3) {
+                    var lastValue = colorValues[2];
+                    if (lastValue instanceof nodes.BinaryExpression) {
+                        var left = lastValue.getLeft(), right = lastValue.getRight(), operator = lastValue.getOperator();
+                        if (left && right && operator && operator.matches('/')) {
+                            colorValues = [colorValues[0], colorValues[1], left, right];
+                        }
+                    }
+                }
+            }
+        }
         if (!name || colorValues.length < 3 || colorValues.length > 4) {
             return null;
         }

package/lib/esm/languageFacts/entry.js

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 'use strict';
+import { MarkupKind } from '../cssLanguageTypes';
 export var browserNames = {
     E: 'Edge',
     FF: 'Firefox',
@@ -64,7 +65,7 @@ function getEntryStringDescription(entry, settings) {
             result += '\n(' + browserLabel + ')';
         }
         if ('syntax' in entry) {
-            result += "\n\nSyntax: " + entry.syntax;
+            result += "\n\nSyntax: ".concat(entry.syntax);
         }
     }
     if (entry.references && entry.references.length > 0 && (settings === null || settings === void 0 ? void 0 : settings.references) !== false) {
@@ -72,7 +73,7 @@ function getEntryStringDescription(entry, settings) {
             result += '\n\n';
         }
         result += entry.references.map(function (r) {
-            return r.name + ": " + r.url;
+            return "".concat(r.name, ": ").concat(r.url);
         }).join(' | ');
     }
     return result;
@@ -86,14 +87,18 @@ function getEntryMarkdownDescription(entry, settings) {
         if (entry.status) {
             result += getEntryStatus(entry.status);
         }
-        var description = typeof entry.description === 'string' ? entry.description : entry.description.value;
-        result += textToMarkedString(description);
+        if (typeof entry.description === 'string') {
+            result += textToMarkedString(entry.description);
+        }
+        else {
+            result += entry.description.kind === MarkupKind.Markdown ? entry.description.value : textToMarkedString(entry.description.value);
+        }
         var browserLabel = getBrowserLabel(entry.browsers);
         if (browserLabel) {
             result += '\n\n(' + textToMarkedString(browserLabel) + ')';
         }
         if ('syntax' in entry && entry.syntax) {
-            result += "\n\nSyntax: " + textToMarkedString(entry.syntax);
+            result += "\n\nSyntax: ".concat(textToMarkedString(entry.syntax));
         }
     }
     if (entry.references && entry.references.length > 0 && (settings === null || settings === void 0 ? void 0 : settings.references) !== false) {
@@ -101,7 +106,7 @@ function getEntryMarkdownDescription(entry, settings) {
             result += '\n\n';
         }
         result += entry.references.map(function (r) {
-            return "[" + r.name + "](" + r.url + ")";
+            return "[".concat(r.name, "](").concat(r.url, ")");
         }).join(' | ');
     }
     return result;

package/lib/esm/parser/cssNodes.js

@@ -58,52 +58,55 @@ export var NodeType;
     NodeType[NodeType["Function"] = 30] = "Function";
     NodeType[NodeType["NumericValue"] = 31] = "NumericValue";
     NodeType[NodeType["HexColorValue"] = 32] = "HexColorValue";
-    NodeType[NodeType["MixinDeclaration"] = 33] = "MixinDeclaration";
-    NodeType[NodeType["MixinReference"] = 34] = "MixinReference";
-    NodeType[NodeType["VariableName"] = 35] = "VariableName";
-    NodeType[NodeType["VariableDeclaration"] = 36] = "VariableDeclaration";
-    NodeType[NodeType["Prio"] = 37] = "Prio";
-    NodeType[NodeType["Interpolation"] = 38] = "Interpolation";
-    NodeType[NodeType["NestedProperties"] = 39] = "NestedProperties";
-    NodeType[NodeType["ExtendsReference"] = 40] = "ExtendsReference";
-    NodeType[NodeType["SelectorPlaceholder"] = 41] = "SelectorPlaceholder";
-    NodeType[NodeType["Debug"] = 42] = "Debug";
-    NodeType[NodeType["If"] = 43] = "If";
-    NodeType[NodeType["Else"] = 44] = "Else";
-    NodeType[NodeType["For"] = 45] = "For";
-    NodeType[NodeType["Each"] = 46] = "Each";
-    NodeType[NodeType["While"] = 47] = "While";
-    NodeType[NodeType["MixinContentReference"] = 48] = "MixinContentReference";
-    NodeType[NodeType["MixinContentDeclaration"] = 49] = "MixinContentDeclaration";
-    NodeType[NodeType["Media"] = 50] = "Media";
-    NodeType[NodeType["Keyframe"] = 51] = "Keyframe";
-    NodeType[NodeType["FontFace"] = 52] = "FontFace";
-    NodeType[NodeType["Import"] = 53] = "Import";
-    NodeType[NodeType["Namespace"] = 54] = "Namespace";
-    NodeType[NodeType["Invocation"] = 55] = "Invocation";
-    NodeType[NodeType["FunctionDeclaration"] = 56] = "FunctionDeclaration";
-    NodeType[NodeType["ReturnStatement"] = 57] = "ReturnStatement";
-    NodeType[NodeType["MediaQuery"] = 58] = "MediaQuery";
-    NodeType[NodeType["FunctionParameter"] = 59] = "FunctionParameter";
-    NodeType[NodeType["FunctionArgument"] = 60] = "FunctionArgument";
-    NodeType[NodeType["KeyframeSelector"] = 61] = "KeyframeSelector";
-    NodeType[NodeType["ViewPort"] = 62] = "ViewPort";
-    NodeType[NodeType["Document"] = 63] = "Document";
-    NodeType[NodeType["AtApplyRule"] = 64] = "AtApplyRule";
-    NodeType[NodeType["CustomPropertyDeclaration"] = 65] = "CustomPropertyDeclaration";
-    NodeType[NodeType["CustomPropertySet"] = 66] = "CustomPropertySet";
-    NodeType[NodeType["ListEntry"] = 67] = "ListEntry";
-    NodeType[NodeType["Supports"] = 68] = "Supports";
-    NodeType[NodeType["SupportsCondition"] = 69] = "SupportsCondition";
-    NodeType[NodeType["NamespacePrefix"] = 70] = "NamespacePrefix";
-    NodeType[NodeType["GridLine"] = 71] = "GridLine";
-    NodeType[NodeType["Plugin"] = 72] = "Plugin";
-    NodeType[NodeType["UnknownAtRule"] = 73] = "UnknownAtRule";
-    NodeType[NodeType["Use"] = 74] = "Use";
-    NodeType[NodeType["ModuleConfiguration"] = 75] = "ModuleConfiguration";
-    NodeType[NodeType["Forward"] = 76] = "Forward";
-    NodeType[NodeType["ForwardVisibility"] = 77] = "ForwardVisibility";
-    NodeType[NodeType["Module"] = 78] = "Module";
+    NodeType[NodeType["RatioValue"] = 33] = "RatioValue";
+    NodeType[NodeType["MixinDeclaration"] = 34] = "MixinDeclaration";
+    NodeType[NodeType["MixinReference"] = 35] = "MixinReference";
+    NodeType[NodeType["VariableName"] = 36] = "VariableName";
+    NodeType[NodeType["VariableDeclaration"] = 37] = "VariableDeclaration";
+    NodeType[NodeType["Prio"] = 38] = "Prio";
+    NodeType[NodeType["Interpolation"] = 39] = "Interpolation";
+    NodeType[NodeType["NestedProperties"] = 40] = "NestedProperties";
+    NodeType[NodeType["ExtendsReference"] = 41] = "ExtendsReference";
+    NodeType[NodeType["SelectorPlaceholder"] = 42] = "SelectorPlaceholder";
+    NodeType[NodeType["Debug"] = 43] = "Debug";
+    NodeType[NodeType["If"] = 44] = "If";
+    NodeType[NodeType["Else"] = 45] = "Else";
+    NodeType[NodeType["For"] = 46] = "For";
+    NodeType[NodeType["Each"] = 47] = "Each";
+    NodeType[NodeType["While"] = 48] = "While";
+    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 = {}));
 export var ReferenceType;
 (function (ReferenceType) {
@@ -1196,6 +1199,36 @@ var MediaQuery = /** @class */ (function (_super) {
     return MediaQuery;
 }(Node));
 export { MediaQuery };
+var MediaCondition = /** @class */ (function (_super) {
+    __extends(MediaCondition, _super);
+    function MediaCondition(offset, length) {
+        return _super.call(this, offset, length) || this;
+    }
+    Object.defineProperty(MediaCondition.prototype, "type", {
+        get: function () {
+            return NodeType.MediaCondition;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return MediaCondition;
+}(Node));
+export { MediaCondition };
+var MediaFeature = /** @class */ (function (_super) {
+    __extends(MediaFeature, _super);
+    function MediaFeature(offset, length) {
+        return _super.call(this, offset, length) || this;
+    }
+    Object.defineProperty(MediaFeature.prototype, "type", {
+        get: function () {
+            return NodeType.MediaFeature;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return MediaFeature;
+}(Node));
+export { MediaFeature };
 var SupportsCondition = /** @class */ (function (_super) {
     __extends(SupportsCondition, _super);
     function SupportsCondition(offset, length) {
@@ -1385,6 +1418,21 @@ var HexColorValue = /** @class */ (function (_super) {
     return HexColorValue;
 }(Node));
 export { HexColorValue };
+var RatioValue = /** @class */ (function (_super) {
+    __extends(RatioValue, _super);
+    function RatioValue(offset, length) {
+        return _super.call(this, offset, length) || this;
+    }
+    Object.defineProperty(RatioValue.prototype, "type", {
+        get: function () {
+            return NodeType.RatioValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return RatioValue;
+}(Node));
+export { RatioValue };
 var _dot = '.'.charCodeAt(0), _0 = '0'.charCodeAt(0), _9 = '9'.charCodeAt(0);
 var NumericValue = /** @class */ (function (_super) {
     __extends(NumericValue, _super);

package/lib/esm/parser/cssParser.js

@@ -815,66 +815,145 @@ var Parser = /** @class */ (function () {
     };
     Parser.prototype._parseMediaQueryList = function () {
         var node = this.create(nodes.Medialist);
-        if (!node.addChild(this._parseMediaQuery([TokenType.CurlyL]))) {
+        if (!node.addChild(this._parseMediaQuery())) {
             return this.finish(node, ParseError.MediaQueryExpected);
         }
         while (this.accept(TokenType.Comma)) {
-            if (!node.addChild(this._parseMediaQuery([TokenType.CurlyL]))) {
+            if (!node.addChild(this._parseMediaQuery())) {
                 return this.finish(node, ParseError.MediaQueryExpected);
             }
         }
         return this.finish(node);
     };
-    Parser.prototype._parseMediaQuery = function (resyncStopToken) {
-        // http://www.w3.org/TR/css3-mediaqueries/
-        // media_query : [ONLY | NOT]? S* IDENT S* [ AND S* expression ]* | expression [ AND S* expression ]*
-        // expression : '(' S* IDENT S* [ ':' S* expr ]? ')' S*
+    Parser.prototype._parseMediaQuery = function () {
+        // <media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
         var node = this.create(nodes.MediaQuery);
-        var parseExpression = true;
-        var hasContent = false;
+        var pos = this.mark();
+        this.acceptIdent('not');
         if (!this.peek(TokenType.ParenthesisL)) {
-            if (this.acceptIdent('only') || this.acceptIdent('not')) {
+            if (this.acceptIdent('only')) {
                 // optional
             }
             if (!node.addChild(this._parseIdent())) {
                 return null;
             }
-            hasContent = true;
-            parseExpression = this.acceptIdent('and');
+            if (this.acceptIdent('and')) {
+                node.addChild(this._parseMediaCondition());
+            }
+        }
+        else {
+            this.restoreAtMark(pos); // 'not' is part of the MediaCondition
+            node.addChild(this._parseMediaCondition());
+        }
+        return this.finish(node);
+    };
+    Parser.prototype._parseRatio = function () {
+        var pos = this.mark();
+        var node = this.create(nodes.RatioValue);
+        if (!this._parseNumeric()) {
+            return null;
+        }
+        if (!this.acceptDelim('/')) {
+            this.restoreAtMark(pos);
+            return null;
         }
+        if (!this._parseNumeric()) {
+            return this.finish(node, ParseError.NumberExpected);
+        }
+        return this.finish(node);
+    };
+    Parser.prototype._parseMediaCondition = function () {
+        // <media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
+        // <media-not> = not <media-in-parens>
+        // <media-and> = <media-in-parens> [ and <media-in-parens> ]+
+        // <media-or> = <media-in-parens> [ or <media-in-parens> ]+
+        // <media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
+        var node = this.create(nodes.MediaCondition);
+        this.acceptIdent('not');
+        var parseExpression = true;
         while (parseExpression) {
-            // Allow short-circuting for other language constructs.
-            if (node.addChild(this._parseMediaContentStart())) {
-                parseExpression = this.acceptIdent('and');
-                continue;
-            }
             if (!this.accept(TokenType.ParenthesisL)) {
-                if (hasContent) {
-                    return this.finish(node, ParseError.LeftParenthesisExpected, [], resyncStopToken);
+                return this.finish(node, ParseError.LeftParenthesisExpected, [], [TokenType.CurlyL]);
+            }
+            if (this.peek(TokenType.ParenthesisL) || this.peekIdent('not')) {
+                // <media-condition>
+                node.addChild(this._parseMediaCondition());
+            }
+            else {
+                node.addChild(this._parseMediaFeature());
+            }
+            // not yet implemented: general enclosed
+            if (!this.accept(TokenType.ParenthesisR)) {
+                return this.finish(node, ParseError.RightParenthesisExpected, [], [TokenType.CurlyL]);
+            }
+            parseExpression = this.acceptIdent('and') || this.acceptIdent('or');
+        }
+        return this.finish(node);
+    };
+    Parser.prototype._parseMediaFeature = function () {
+        var _this = this;
+        var resyncStopToken = [TokenType.ParenthesisR];
+        var node = this.create(nodes.MediaFeature);
+        // <media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
+        // <mf-plain> = <mf-name> : <mf-value>
+        // <mf-boolean> = <mf-name>
+        // <mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
+        var parseRangeOperator = function () {
+            if (_this.acceptDelim('<') || _this.acceptDelim('>')) {
+                if (!_this.hasWhitespace()) {
+                    _this.acceptDelim('=');
                 }
-                return null;
+                return true;
             }
-            if (!node.addChild(this._parseMediaFeatureName())) {
-                return this.finish(node, ParseError.IdentifierExpected, [], resyncStopToken);
+            else if (_this.acceptDelim('=')) {
+                return true;
             }
+            return false;
+        };
+        if (node.addChild(this._parseMediaFeatureName())) {
             if (this.accept(TokenType.Colon)) {
-                if (!node.addChild(this._parseExpr())) {
+                if (!node.addChild(this._parseMediaFeatureValue())) {
                     return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
                 }
             }
-            if (!this.accept(TokenType.ParenthesisR)) {
-                return this.finish(node, ParseError.RightParenthesisExpected, [], resyncStopToken);
+            else if (parseRangeOperator()) {
+                if (!node.addChild(this._parseMediaFeatureValue())) {
+                    return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
+                }
+                if (parseRangeOperator()) {
+                    if (!node.addChild(this._parseMediaFeatureValue())) {
+                        return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
+                    }
+                }
+            }
+            else {
+                // <mf-boolean> = <mf-name>
+            }
+        }
+        else if (node.addChild(this._parseMediaFeatureValue())) {
+            if (!parseRangeOperator()) {
+                return this.finish(node, ParseError.OperatorExpected, [], resyncStopToken);
+            }
+            if (!node.addChild(this._parseMediaFeatureName())) {
+                return this.finish(node, ParseError.IdentifierExpected, [], resyncStopToken);
+            }
+            if (parseRangeOperator()) {
+                if (!node.addChild(this._parseMediaFeatureValue())) {
+                    return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
+                }
             }
-            parseExpression = this.acceptIdent('and');
+        }
+        else {
+            return this.finish(node, ParseError.IdentifierExpected, [], resyncStopToken);
         }
         return this.finish(node);
     };
-    Parser.prototype._parseMediaContentStart = function () {
-        return null;
-    };
     Parser.prototype._parseMediaFeatureName = function () {
         return this._parseIdent();
     };
+    Parser.prototype._parseMediaFeatureValue = function () {
+        return this._parseRatio() || this._parseTermExpression();
+    };
     Parser.prototype._parseMedium = function () {
         var node = this.create(nodes.Node);
         if (node.addChild(this._parseIdent())) {
@@ -1180,6 +1259,7 @@ var Parser = /** @class */ (function () {
         if (node.setOperator(this._parseOperator())) {
             node.setValue(this._parseBinaryExpr());
             this.acceptIdent('i'); // case insensitive matching
+            this.acceptIdent('s'); // case sensitive matching
         }
         if (!this.accept(TokenType.BracketR)) {
             return this.finish(node, ParseError.RightSquareBracketExpected);

package/lib/esm/parser/lessParser.js

@@ -86,8 +86,8 @@ var LESSParser = /** @class */ (function (_super) {
         }
         return this.finish(node);
     };
-    LESSParser.prototype._parseMediaQuery = function (resyncStopToken) {
-        var node = _super.prototype._parseMediaQuery.call(this, resyncStopToken);
+    LESSParser.prototype._parseMediaQuery = function () {
+        var node = _super.prototype._parseMediaQuery.call(this);
         if (!node) {
             var node_1 = this.create(nodes.MediaQuery);
             if (node_1.addChild(this._parseVariable())) {

package/lib/esm/parser/scssParser.js

@@ -104,8 +104,8 @@ var SCSSParser = /** @class */ (function (_super) {
         }
         return this.finish(node);
     };
-    SCSSParser.prototype._parseMediaContentStart = function () {
-        return this._parseInterpolation();
+    SCSSParser.prototype._parseMediaCondition = function () {
+        return this._parseInterpolation() || _super.prototype._parseMediaCondition.call(this);
     };
     SCSSParser.prototype._parseMediaFeatureName = function () {
         return this._parseModuleMember()

package/lib/esm/services/cssCompletion.js

@@ -457,7 +457,7 @@ var CSSCompletion = /** @class */ (function () {
         var symbols = this.getSymbolContext().findSymbolsAtOffset(this.offset, nodes.ReferenceType.Variable);
         for (var _i = 0, symbols_1 = symbols; _i < symbols_1.length; _i++) {
             var symbol = symbols_1[_i];
-            var insertText = strings.startsWith(symbol.name, '--') ? "var(" + symbol.name + ")" : symbol.name;
+            var insertText = strings.startsWith(symbol.name, '--') ? "var(".concat(symbol.name, ")") : symbol.name;
             var completionItem = {
                 label: symbol.name,
                 documentation: symbol.value ? strings.getLimitedString(symbol.value) : symbol.value,
@@ -479,22 +479,35 @@ var CSSCompletion = /** @class */ (function () {
         return result;
     };
     CSSCompletion.prototype.getVariableProposalsForCSSVarFunction = function (result) {
+        var allReferencedVariables = new Set();
+        this.styleSheet.acceptVisitor(new VariableCollector(allReferencedVariables, this.offset));
         var symbols = this.getSymbolContext().findSymbolsAtOffset(this.offset, nodes.ReferenceType.Variable);
-        symbols = symbols.filter(function (symbol) {
-            return strings.startsWith(symbol.name, '--');
-        });
         for (var _i = 0, symbols_2 = symbols; _i < symbols_2.length; _i++) {
             var symbol = symbols_2[_i];
-            var completionItem = {
-                label: symbol.name,
-                documentation: symbol.value ? strings.getLimitedString(symbol.value) : symbol.value,
-                textEdit: TextEdit.replace(this.getCompletionRange(null), symbol.name),
-                kind: CompletionItemKind.Variable
-            };
-            if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
-                completionItem.kind = CompletionItemKind.Color;
+            if (strings.startsWith(symbol.name, '--')) {
+                var completionItem = {
+                    label: symbol.name,
+                    documentation: symbol.value ? strings.getLimitedString(symbol.value) : symbol.value,
+                    textEdit: TextEdit.replace(this.getCompletionRange(null), symbol.name),
+                    kind: CompletionItemKind.Variable
+                };
+                if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
+                    completionItem.kind = CompletionItemKind.Color;
+                }
+                result.items.push(completionItem);
+            }
+            allReferencedVariables.remove(symbol.name);
+        }
+        for (var _a = 0, _b = allReferencedVariables.getEntries(); _a < _b.length; _a++) {
+            var name = _b[_a];
+            if (strings.startsWith(name, '--')) {
+                var completionItem = {
+                    label: name,
+                    textEdit: TextEdit.replace(this.getCompletionRange(null), name),
+                    kind: CompletionItemKind.Variable
+                };
+                result.items.push(completionItem);
             }
-            result.items.push(completionItem);
         }
         return result;
     };
@@ -1045,24 +1058,6 @@ function isDeprecated(entry) {
     }
     return false;
 }
-/**
- * Rank number should all be same length strings
- */
-function computeRankNumber(n) {
-    var nstr = n.toString();
-    switch (nstr.length) {
-        case 4:
-            return nstr;
-        case 3:
-            return '0' + nstr;
-        case 2:
-            return '00' + nstr;
-        case 1:
-            return '000' + nstr;
-        default:
-            return '0000';
-    }
-}
 var Set = /** @class */ (function () {
     function Set() {
         this.entries = {};
@@ -1070,6 +1065,9 @@ var Set = /** @class */ (function () {
     Set.prototype.add = function (entry) {
         this.entries[entry] = true;
     };
+    Set.prototype.remove = function (entry) {
+        delete this.entries[entry];
+    };
     Set.prototype.getEntries = function () {
         return Object.keys(this.entries);
     };
@@ -1121,6 +1119,22 @@ var ColorValueCollector = /** @class */ (function () {
     };
     return ColorValueCollector;
 }());
+var VariableCollector = /** @class */ (function () {
+    function VariableCollector(entries, currentOffset) {
+        this.entries = entries;
+        this.currentOffset = currentOffset;
+        // nothing to do
+    }
+    VariableCollector.prototype.visitNode = function (node) {
+        if (node instanceof nodes.Identifier && node.isCustomProperty) {
+            if (this.currentOffset < node.offset || node.end < this.currentOffset) {
+                this.entries.add(node.getText());
+            }
+        }
+        return true;
+    };
+    return VariableCollector;
+}());
 function getCurrentWord(document, offset) {
     var i = offset - 1;
     var text = document.getText();