vscode-css-languageservice 5.1.5 → 5.1.9

package/lib/esm/languageFacts/builtinData.js

@@ -47,6 +47,10 @@ export var cssWideKeywords = {
     'inherit': 'Represents the computed value of the property on the element’s parent.',
     'unset': 'Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.'
 };
+export var cssWideFunctions = {
+    'var()': 'Evaluates the value of a custom variable.',
+    'calc()': 'Evaluates an mathematical expression. The following operators can be used: + - * /.'
+};
 export var imageFunctions = {
     'url()': 'Reference an image file by URL',
     'image()': 'Provide image fallbacks and annotations.',

package/lib/esm/languageFacts/colors.js

@@ -354,6 +354,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',
@@ -86,8 +87,12 @@ 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) + ')';

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

@@ -3,6 +3,15 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 'use strict';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { TokenType, Scanner } from './cssScanner';
 import * as nodes from './cssNodes';
 import { ParseError } from './cssErrors';
@@ -33,7 +42,11 @@ var Parser = /** @class */ (function () {
     Parser.prototype.peek = function (type) {
         return type === this.token.type;
     };
-    Parser.prototype.peekOne = function (types) {
+    Parser.prototype.peekOne = function () {
+        var types = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            types[_i] = arguments[_i];
+        }
         return types.indexOf(this.token.type) !== -1;
     };
     Parser.prototype.peekRegExp = function (type, regEx) {
@@ -442,13 +455,15 @@ var Parser = /** @class */ (function () {
             }
             this.restoreAtMark(mark);
         }
-        // try tp parse as expression
+        // try to parse as expression
         var expression = this._parseExpr();
         if (expression && !expression.isErroneous(true)) {
             this._parsePrio();
-            if (this.peekOne(stopTokens || [TokenType.SemiColon])) {
+            if (this.peekOne.apply(this, __spreadArray(__spreadArray([], (stopTokens || []), false), [TokenType.SemiColon, TokenType.EOF], false))) {
                 node.setValue(expression);
-                node.semicolonPosition = this.token.offset; // not part of the declaration, but useful information for code assist
+                if (this.peek(TokenType.SemiColon)) {
+                    node.semicolonPosition = this.token.offset; // not part of the declaration, but useful information for code assist
+                }
                 return this.finish(node);
             }
         }
@@ -800,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>
             }
-            parseExpression = this.acceptIdent('and');
+        }
+        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);
+                }
+            }
+        }
+        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())) {

package/lib/esm/parser/cssScanner.js

@@ -506,8 +506,8 @@ var Scanner = /** @class */ (function () {
     Scanner.prototype.ident = function (result) {
         var pos = this.stream.pos();
         var hasMinus = this._minus(result);
-        if (hasMinus && this._minus(result) /* -- */) {
-            if (this._identFirstChar(result) || this._escape(result)) {
+        if (hasMinus) {
+            if (this._minus(result) /* -- */ || this._identFirstChar(result) || this._escape(result)) {
                 while (this._identChar(result) || this._escape(result)) {
                     // loop
                 }

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

@@ -49,6 +49,10 @@ import { isDefined } from '../utils/objects';
 import { PathCompletionParticipant } from './pathCompletion';
 var localize = nls.loadMessageBundle();
 var SnippetFormat = InsertTextFormat.Snippet;
+var retriggerCommand = {
+    title: 'Suggest',
+    command: 'editor.action.triggerSuggest'
+};
 var SortTexts;
 (function (SortTexts) {
     // char code 32, comes before everything
@@ -282,10 +286,7 @@ var CSSCompletion = /** @class */ (function () {
                 retrigger = false;
             }
             if (triggerPropertyValueCompletion && retrigger) {
-                item.command = {
-                    title: 'Suggest',
-                    command: 'editor.action.triggerSuggest'
-                };
+                item.command = retriggerCommand;
             }
             var relevance = typeof entry.relevance === 'number' ? Math.min(Math.max(entry.relevance, 0), 99) : 50;
             var sortTextSuffix = (255 - relevance).toString(16);
@@ -433,6 +434,17 @@ var CSSCompletion = /** @class */ (function () {
                 kind: CompletionItemKind.Value
             });
         }
+        for (var func in languageFacts.cssWideFunctions) {
+            var insertText = moveCursorInsideParenthesis(func);
+            result.items.push({
+                label: func,
+                documentation: languageFacts.cssWideFunctions[func],
+                textEdit: TextEdit.replace(this.getCompletionRange(existingNode), insertText),
+                kind: CompletionItemKind.Function,
+                insertTextFormat: SnippetFormat,
+                command: strings.startsWith(func, 'var') ? retriggerCommand : undefined
+            });
+        }
         return result;
     };
     CSSCompletion.prototype.getCompletionsForInterpolation = function (node, result) {
@@ -467,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;
     };
@@ -1033,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 = {};
@@ -1058,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);
     };
@@ -1109,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();