vscode-css-languageservice 6.1.0 → 6.2.1

package/lib/esm/languageFacts/colors.js

@@ -3,14 +3,13 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import * as nodes from '../parser/cssNodes';
-import * as nls from 'vscode-nls';
-const localize = nls.loadMessageBundle();
+import * as l10n from '@vscode/l10n';
 export const colorFunctions = [
-    { func: 'rgb($red, $green, $blue)', desc: localize('css.builtin.rgb', 'Creates a Color from red, green, and blue values.') },
-    { func: 'rgba($red, $green, $blue, $alpha)', desc: localize('css.builtin.rgba', 'Creates a Color from red, green, blue, and alpha values.') },
-    { func: 'hsl($hue, $saturation, $lightness)', desc: localize('css.builtin.hsl', 'Creates a Color from hue, saturation, and lightness values.') },
-    { func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: localize('css.builtin.hsla', 'Creates a Color from hue, saturation, lightness, and alpha values.') },
-    { func: 'hwb($hue $white $black)', desc: localize('css.builtin.hwb', 'Creates a Color from hue, white and black.') }
+    { func: 'rgb($red, $green, $blue)', desc: l10n.t('Creates a Color from red, green, and blue values.') },
+    { func: 'rgba($red, $green, $blue, $alpha)', desc: l10n.t('Creates a Color from red, green, blue, and alpha values.') },
+    { func: 'hsl($hue, $saturation, $lightness)', desc: l10n.t('Creates a Color from hue, saturation, and lightness values.') },
+    { func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: l10n.t('Creates a Color from hue, saturation, lightness, and alpha values.') },
+    { func: 'hwb($hue $white $black)', desc: l10n.t('Creates a Color from hue, white and black.') }
 ];
 export const colors = {
     aliceblue: '#f0f8ff',

package/lib/esm/parser/cssErrors.js

@@ -3,8 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 'use strict';
-import * as nls from 'vscode-nls';
-const localize = nls.loadMessageBundle();
+import * as l10n from '@vscode/l10n';
 export class CSSIssueType {
     constructor(id, message) {
         this.id = id;
@@ -12,37 +11,37 @@ export class CSSIssueType {
     }
 }
 export const ParseError = {
-    NumberExpected: new CSSIssueType('css-numberexpected', localize('expected.number', "number expected")),
-    ConditionExpected: new CSSIssueType('css-conditionexpected', localize('expected.condt', "condition expected")),
-    RuleOrSelectorExpected: new CSSIssueType('css-ruleorselectorexpected', localize('expected.ruleorselector', "at-rule or selector expected")),
-    DotExpected: new CSSIssueType('css-dotexpected', localize('expected.dot', "dot expected")),
-    ColonExpected: new CSSIssueType('css-colonexpected', localize('expected.colon', "colon expected")),
-    SemiColonExpected: new CSSIssueType('css-semicolonexpected', localize('expected.semicolon', "semi-colon expected")),
-    TermExpected: new CSSIssueType('css-termexpected', localize('expected.term', "term expected")),
-    ExpressionExpected: new CSSIssueType('css-expressionexpected', localize('expected.expression', "expression expected")),
-    OperatorExpected: new CSSIssueType('css-operatorexpected', localize('expected.operator', "operator expected")),
-    IdentifierExpected: new CSSIssueType('css-identifierexpected', localize('expected.ident', "identifier expected")),
-    PercentageExpected: new CSSIssueType('css-percentageexpected', localize('expected.percentage', "percentage expected")),
-    URIOrStringExpected: new CSSIssueType('css-uriorstringexpected', localize('expected.uriorstring', "uri or string expected")),
-    URIExpected: new CSSIssueType('css-uriexpected', localize('expected.uri', "URI expected")),
-    VariableNameExpected: new CSSIssueType('css-varnameexpected', localize('expected.varname', "variable name expected")),
-    VariableValueExpected: new CSSIssueType('css-varvalueexpected', localize('expected.varvalue', "variable value expected")),
-    PropertyValueExpected: new CSSIssueType('css-propertyvalueexpected', localize('expected.propvalue', "property value expected")),
-    LeftCurlyExpected: new CSSIssueType('css-lcurlyexpected', localize('expected.lcurly', "{ expected")),
-    RightCurlyExpected: new CSSIssueType('css-rcurlyexpected', localize('expected.rcurly', "} expected")),
-    LeftSquareBracketExpected: new CSSIssueType('css-rbracketexpected', localize('expected.lsquare', "[ expected")),
-    RightSquareBracketExpected: new CSSIssueType('css-lbracketexpected', localize('expected.rsquare', "] expected")),
-    LeftParenthesisExpected: new CSSIssueType('css-lparentexpected', localize('expected.lparen', "( expected")),
-    RightParenthesisExpected: new CSSIssueType('css-rparentexpected', localize('expected.rparent', ") expected")),
-    CommaExpected: new CSSIssueType('css-commaexpected', localize('expected.comma', "comma expected")),
-    PageDirectiveOrDeclarationExpected: new CSSIssueType('css-pagedirordeclexpected', localize('expected.pagedirordecl', "page directive or declaraton expected")),
-    UnknownAtRule: new CSSIssueType('css-unknownatrule', localize('unknown.atrule', "at-rule unknown")),
-    UnknownKeyword: new CSSIssueType('css-unknownkeyword', localize('unknown.keyword', "unknown keyword")),
-    SelectorExpected: new CSSIssueType('css-selectorexpected', localize('expected.selector', "selector expected")),
-    StringLiteralExpected: new CSSIssueType('css-stringliteralexpected', localize('expected.stringliteral', "string literal expected")),
-    WhitespaceExpected: new CSSIssueType('css-whitespaceexpected', localize('expected.whitespace', "whitespace expected")),
-    MediaQueryExpected: new CSSIssueType('css-mediaqueryexpected', localize('expected.mediaquery', "media query expected")),
-    IdentifierOrWildcardExpected: new CSSIssueType('css-idorwildcardexpected', localize('expected.idorwildcard', "identifier or wildcard expected")),
-    WildcardExpected: new CSSIssueType('css-wildcardexpected', localize('expected.wildcard', "wildcard expected")),
-    IdentifierOrVariableExpected: new CSSIssueType('css-idorvarexpected', localize('expected.idorvar', "identifier or variable expected")),
+    NumberExpected: new CSSIssueType('css-numberexpected', l10n.t("number expected")),
+    ConditionExpected: new CSSIssueType('css-conditionexpected', l10n.t("condition expected")),
+    RuleOrSelectorExpected: new CSSIssueType('css-ruleorselectorexpected', l10n.t("at-rule or selector expected")),
+    DotExpected: new CSSIssueType('css-dotexpected', l10n.t("dot expected")),
+    ColonExpected: new CSSIssueType('css-colonexpected', l10n.t("colon expected")),
+    SemiColonExpected: new CSSIssueType('css-semicolonexpected', l10n.t("semi-colon expected")),
+    TermExpected: new CSSIssueType('css-termexpected', l10n.t("term expected")),
+    ExpressionExpected: new CSSIssueType('css-expressionexpected', l10n.t("expression expected")),
+    OperatorExpected: new CSSIssueType('css-operatorexpected', l10n.t("operator expected")),
+    IdentifierExpected: new CSSIssueType('css-identifierexpected', l10n.t("identifier expected")),
+    PercentageExpected: new CSSIssueType('css-percentageexpected', l10n.t("percentage expected")),
+    URIOrStringExpected: new CSSIssueType('css-uriorstringexpected', l10n.t("uri or string expected")),
+    URIExpected: new CSSIssueType('css-uriexpected', l10n.t("URI expected")),
+    VariableNameExpected: new CSSIssueType('css-varnameexpected', l10n.t("variable name expected")),
+    VariableValueExpected: new CSSIssueType('css-varvalueexpected', l10n.t("variable value expected")),
+    PropertyValueExpected: new CSSIssueType('css-propertyvalueexpected', l10n.t("property value expected")),
+    LeftCurlyExpected: new CSSIssueType('css-lcurlyexpected', l10n.t("{ expected")),
+    RightCurlyExpected: new CSSIssueType('css-rcurlyexpected', l10n.t("} expected")),
+    LeftSquareBracketExpected: new CSSIssueType('css-rbracketexpected', l10n.t("[ expected")),
+    RightSquareBracketExpected: new CSSIssueType('css-lbracketexpected', l10n.t("] expected")),
+    LeftParenthesisExpected: new CSSIssueType('css-lparentexpected', l10n.t("( expected")),
+    RightParenthesisExpected: new CSSIssueType('css-rparentexpected', l10n.t(") expected")),
+    CommaExpected: new CSSIssueType('css-commaexpected', l10n.t("comma expected")),
+    PageDirectiveOrDeclarationExpected: new CSSIssueType('css-pagedirordeclexpected', l10n.t("page directive or declaraton expected")),
+    UnknownAtRule: new CSSIssueType('css-unknownatrule', l10n.t("at-rule unknown")),
+    UnknownKeyword: new CSSIssueType('css-unknownkeyword', l10n.t("unknown keyword")),
+    SelectorExpected: new CSSIssueType('css-selectorexpected', l10n.t("selector expected")),
+    StringLiteralExpected: new CSSIssueType('css-stringliteralexpected', l10n.t("string literal expected")),
+    WhitespaceExpected: new CSSIssueType('css-whitespaceexpected', l10n.t("whitespace expected")),
+    MediaQueryExpected: new CSSIssueType('css-mediaqueryexpected', l10n.t("media query expected")),
+    IdentifierOrWildcardExpected: new CSSIssueType('css-idorwildcardexpected', l10n.t("identifier or wildcard expected")),
+    WildcardExpected: new CSSIssueType('css-wildcardexpected', l10n.t("wildcard expected")),
+    IdentifierOrVariableExpected: new CSSIssueType('css-idorvarexpected', l10n.t("identifier or variable expected")),
 };

package/lib/esm/parser/cssNodes.js

@@ -96,6 +96,7 @@ export var NodeType;
     NodeType[NodeType["Layer"] = 83] = "Layer";
     NodeType[NodeType["LayerNameList"] = 84] = "LayerNameList";
     NodeType[NodeType["LayerName"] = 85] = "LayerName";
+    NodeType[NodeType["PropertyAtRule"] = 86] = "PropertyAtRule";
 })(NodeType || (NodeType = {}));
 export var ReferenceType;
 (function (ReferenceType) {
@@ -108,6 +109,7 @@ export var ReferenceType;
     ReferenceType[ReferenceType["Module"] = 6] = "Module";
     ReferenceType[ReferenceType["Forward"] = 7] = "Forward";
     ReferenceType[ReferenceType["ForwardVisibility"] = 8] = "ForwardVisibility";
+    ReferenceType[ReferenceType["Property"] = 9] = "Property";
 })(ReferenceType || (ReferenceType = {}));
 export function getNodeAtOffset(node, offset) {
     let candidate = null;
@@ -150,6 +152,7 @@ export function getParentDeclaration(node) {
     return null;
 }
 export class Node {
+    get end() { return this.offset + this.length; }
     constructor(offset = -1, len = -1, nodeType) {
         this.parent = null;
         this.offset = offset;
@@ -158,7 +161,6 @@ export class Node {
             this.nodeType = nodeType;
         }
     }
-    get end() { return this.offset + this.length; }
     set type(type) {
         this.nodeType = type;
     }
@@ -893,6 +895,25 @@ export class Layer extends BodyDeclaration {
         return this.names;
     }
 }
+export class PropertyAtRule extends BodyDeclaration {
+    constructor(offset, length) {
+        super(offset, length);
+    }
+    get type() {
+        return NodeType.PropertyAtRule;
+    }
+    setName(node) {
+        if (node) {
+            node.attachTo(this);
+            this.name = node;
+            return true;
+        }
+        return false;
+    }
+    getName() {
+        return this.name;
+    }
+}
 export class Document extends BodyDeclaration {
     constructor(offset, length) {
         super(offset, length);
@@ -1494,14 +1515,14 @@ export class DefaultVisitor implements IVisitor {
 }
 */
 export class ParseErrorCollector {
-    constructor() {
-        this.entries = [];
-    }
     static entries(node) {
         const visitor = new ParseErrorCollector();
         node.acceptVisitor(visitor);
         return visitor.entries;
     }
+    constructor() {
+        this.entries = [];
+    }
     visitNode(node) {
         if (node.isErroneous()) {
             node.collectIssues(this.entries);

package/lib/esm/parser/cssParser.js

@@ -272,6 +272,7 @@ export class Parser {
             || this._parseKeyframe()
             || this._parseSupports(isNested)
             || this._parseLayer()
+            || this._parsePropertyAtRule()
             || this._parseViewPort()
             || this._parseNamespace()
             || this._parseDocument()
@@ -717,6 +718,20 @@ export class Parser {
         }
         return this._parseBody(node, this._parseRuleSetDeclaration.bind(this));
     }
+    _parsePropertyAtRule() {
+        // @property <custom-property-name> {
+        // 	<declaration-list>
+        //  }
+        if (!this.peekKeyword('@property')) {
+            return null;
+        }
+        const node = this.create(nodes.PropertyAtRule);
+        this.consumeToken(); // @layer
+        if (!this.peekRegExp(TokenType.Ident, /^--/) || !node.setName(this._parseIdent([nodes.ReferenceType.Property]))) {
+            return this.finish(node, ParseError.IdentifierExpected);
+        }
+        return this._parseBody(node, this._parseDeclaration.bind(this));
+    }
     _parseLayer() {
         // @layer layer-name {rules}
         // @layer layer-name;
@@ -954,29 +969,17 @@ export class Parser {
         // <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>
-        const parseRangeOperator = () => {
-            if (this.acceptDelim('<') || this.acceptDelim('>')) {
-                if (!this.hasWhitespace()) {
-                    this.acceptDelim('=');
-                }
-                return true;
-            }
-            else if (this.acceptDelim('=')) {
-                return true;
-            }
-            return false;
-        };
         if (node.addChild(this._parseMediaFeatureName())) {
             if (this.accept(TokenType.Colon)) {
                 if (!node.addChild(this._parseMediaFeatureValue())) {
                     return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
                 }
             }
-            else if (parseRangeOperator()) {
+            else if (this._parseMediaFeatureRangeOperator()) {
                 if (!node.addChild(this._parseMediaFeatureValue())) {
                     return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
                 }
-                if (parseRangeOperator()) {
+                if (this._parseMediaFeatureRangeOperator()) {
                     if (!node.addChild(this._parseMediaFeatureValue())) {
                         return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
                     }
@@ -987,13 +990,13 @@ export class Parser {
             }
         }
         else if (node.addChild(this._parseMediaFeatureValue())) {
-            if (!parseRangeOperator()) {
+            if (!this._parseMediaFeatureRangeOperator()) {
                 return this.finish(node, ParseError.OperatorExpected, [], resyncStopToken);
             }
             if (!node.addChild(this._parseMediaFeatureName())) {
                 return this.finish(node, ParseError.IdentifierExpected, [], resyncStopToken);
             }
-            if (parseRangeOperator()) {
+            if (this._parseMediaFeatureRangeOperator()) {
                 if (!node.addChild(this._parseMediaFeatureValue())) {
                     return this.finish(node, ParseError.TermExpected, [], resyncStopToken);
                 }
@@ -1004,6 +1007,18 @@ export class Parser {
         }
         return this.finish(node);
     }
+    _parseMediaFeatureRangeOperator() {
+        if (this.acceptDelim('<') || this.acceptDelim('>')) {
+            if (!this.hasWhitespace()) {
+                this.acceptDelim('=');
+            }
+            return true;
+        }
+        else if (this.acceptDelim('=')) {
+            return true;
+        }
+        return false;
+    }
     _parseMediaFeatureName() {
         return this._parseIdent();
     }

package/lib/esm/parser/lessParser.js

@@ -273,6 +273,7 @@ export class LESSParser extends cssParser.Parser {
                 || this._parseImport()
                 || this._parseSupports(true) // @supports
                 || this._parseLayer() // @layer
+                || this._parsePropertyAtRule() // @property
                 || this._parseDetachedRuleSetMixin() // less detached ruleset mixin
                 || this._parseVariableDeclaration() // Variable declarations
                 || super._parseRuleSetDeclarationAtStatement();

package/lib/esm/parser/scssErrors.js

@@ -3,8 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 'use strict';
-import * as nls from 'vscode-nls';
-const localize = nls.loadMessageBundle();
+import * as l10n from '@vscode/l10n';
 export class SCSSIssueType {
     constructor(id, message) {
         this.id = id;
@@ -12,7 +11,7 @@ export class SCSSIssueType {
     }
 }
 export const SCSSParseError = {
-    FromExpected: new SCSSIssueType('scss-fromexpected', localize('expected.from', "'from' expected")),
-    ThroughOrToExpected: new SCSSIssueType('scss-throughexpected', localize('expected.through', "'through' or 'to' expected")),
-    InExpected: new SCSSIssueType('scss-fromexpected', localize('expected.in', "'in' expected")),
+    FromExpected: new SCSSIssueType('scss-fromexpected', l10n.t("'from' expected")),
+    ThroughOrToExpected: new SCSSIssueType('scss-throughexpected', l10n.t("'through' or 'to' expected")),
+    InExpected: new SCSSIssueType('scss-fromexpected', l10n.t("'in' expected")),
 };

package/lib/esm/parser/scssParser.js

@@ -89,6 +89,9 @@ export class SCSSParser extends cssParser.Parser {
     _parseMediaCondition() {
         return this._parseInterpolation() || super._parseMediaCondition();
     }
+    _parseMediaFeatureRangeOperator() {
+        return this.accept(scssScanner.SmallerEqualsOperator) || this.accept(scssScanner.GreaterEqualsOperator) || super._parseMediaFeatureRangeOperator();
+    }
     _parseMediaFeatureName() {
         return this._parseModuleMember()
             || this._parseFunction() // function before ident
@@ -215,6 +218,7 @@ export class SCSSParser extends cssParser.Parser {
                 || this._parseRuleset(true) // @at-rule
                 || this._parseSupports(true) // @supports
                 || this._parseLayer() // @layer
+                || this._parsePropertyAtRule() // @property
                 || super._parseRuleSetDeclarationAtStatement();
         }
         return this._parseVariableDeclaration() // variable declaration

package/lib/esm/services/cssCodeActions.js

@@ -7,8 +7,7 @@ import * as nodes from '../parser/cssNodes';
 import { difference } from '../utils/strings';
 import { Rules } from '../services/lintRules';
 import { Command, TextEdit, CodeAction, CodeActionKind, TextDocumentEdit, VersionedTextDocumentIdentifier } from '../cssLanguageTypes';
-import * as nls from 'vscode-nls';
-const localize = nls.loadMessageBundle();
+import * as l10n from '@vscode/l10n';
 export class CSSCodeActions {
     constructor(cssDataManager) {
         this.cssDataManager = cssDataManager;
@@ -44,7 +43,7 @@ export class CSSCodeActions {
         let maxActions = 3;
         for (const candidate of candidates) {
             const propertyName = candidate.property;
-            const title = localize('css.codeaction.rename', "Rename to '{0}'", propertyName);
+            const title = l10n.t("Rename to '{0}'", propertyName);
             const edit = TextEdit.replace(marker.range, propertyName);
             const documentIdentifier = VersionedTextDocumentIdentifier.create(document.uri, document.version);
             const workspaceEdit = { documentChanges: [TextDocumentEdit.create(documentIdentifier, [edit])] };

package/lib/esm/services/cssCompletion.js

@@ -8,10 +8,9 @@ import { Symbols } from '../parser/cssSymbolScope';
 import * as languageFacts from '../languageFacts/facts';
 import * as strings from '../utils/strings';
 import { Position, CompletionItemKind, Range, TextEdit, InsertTextFormat, MarkupKind, CompletionItemTag } from '../cssLanguageTypes';
-import * as nls from 'vscode-nls';
+import * as l10n from '@vscode/l10n';
 import { isDefined } from '../utils/objects';
 import { PathCompletionParticipant } from './pathCompletion';
-const localize = nls.loadMessageBundle();
 const SnippetFormat = InsertTextFormat.Snippet;
 const retriggerCommand = {
     title: 'Suggest',
@@ -57,6 +56,7 @@ export class CSSCompletion {
             const pathCompletionResult = await participant.computeCompletions(document, documentContext);
             return {
                 isIncomplete: result.isIncomplete || pathCompletionResult.isIncomplete,
+                itemDefaults: result.itemDefaults,
                 items: pathCompletionResult.items.concat(result.items)
             };
         }
@@ -73,7 +73,16 @@ export class CSSCompletion {
         this.styleSheet = styleSheet;
         this.documentSettings = documentSettings;
         try {
-            const result = { isIncomplete: false, items: [] };
+            const result = {
+                isIncomplete: false,
+                itemDefaults: {
+                    editRange: {
+                        start: { line: position.line, character: position.character - this.currentWord.length },
+                        end: position
+                    }
+                },
+                items: []
+            };
             this.nodePath = nodes.getNodePath(this.styleSheet, this.offset);
             for (let i = this.nodePath.length - 1; i >= 0; i--) {
                 const node = this.nodePath[i];
@@ -401,7 +410,7 @@ export class CSSCompletion {
             if (symbol.node.type === nodes.NodeType.FunctionParameter) {
                 const mixinNode = (symbol.node.getParent());
                 if (mixinNode.type === nodes.NodeType.MixinDeclaration) {
-                    completionItem.detail = localize('completion.argument', 'argument from \'{0}\'', mixinNode.getName());
+                    completionItem.detail = l10n.t('argument from \'{0}\'', mixinNode.getName());
                 }
             }
             result.items.push(completionItem);

package/lib/esm/services/cssNavigation.js

@@ -4,13 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 import { DocumentHighlightKind, Location, Range, SymbolKind, TextEdit, FileType } from '../cssLanguageTypes';
-import * as nls from 'vscode-nls';
+import * as l10n from '@vscode/l10n';
 import * as nodes from '../parser/cssNodes';
 import { Symbols } from '../parser/cssSymbolScope';
 import { getColorValue, hslFromColor, hwbFromColor } from '../languageFacts/facts';
 import { startsWith } from '../utils/strings';
 import { dirname, joinPath } from '../utils/resources';
-const localize = nls.loadMessageBundle();
 const startsWithSchemeRegex = /^\w+:\/\//;
 const startsWithData = /^data:/;
 export class CSSNavigation {
@@ -43,16 +42,23 @@ export class CSSNavigation {
             };
         });
     }
-    findDocumentHighlights(document, position, stylesheet) {
-        const result = [];
+    getHighlightNode(document, position, stylesheet) {
         const offset = document.offsetAt(position);
         let node = nodes.getNodeAtOffset(stylesheet, offset);
         if (!node || node.type === nodes.NodeType.Stylesheet || node.type === nodes.NodeType.Declarations) {
-            return result;
+            return;
         }
         if (node.type === nodes.NodeType.Identifier && node.parent && node.parent.type === nodes.NodeType.ClassSelector) {
             node = node.parent;
         }
+        return node;
+    }
+    findDocumentHighlights(document, position, stylesheet) {
+        const result = [];
+        const node = this.getHighlightNode(document, position, stylesheet);
+        if (!node) {
+            return result;
+        }
         const symbols = new Symbols(stylesheet);
         const symbol = symbols.findSymbolFromNode(node);
         const name = node.getText();
@@ -115,7 +121,7 @@ export class CSSNavigation {
                 resolvedLinks.push(link);
             }
             else {
-                const resolvedTarget = await this.resolveRelativeReference(target, document.uri, documentContext, data.isRawLink);
+                const resolvedTarget = await this.resolveReference(target, document.uri, documentContext, data.isRawLink);
                 if (resolvedTarget !== undefined) {
                     link.target = resolvedTarget;
                     resolvedLinks.push(link);
@@ -230,11 +236,11 @@ export class CSSNavigation {
                 collect(node.getName(), SymbolKind.Function, node, node.getIdentifier(), node.getDeclarations());
             }
             else if (node instanceof nodes.Keyframe) {
-                const name = localize('literal.keyframes', "@keyframes {0}", node.getName());
+                const name = l10n.t("@keyframes {0}", node.getName());
                 collect(name, SymbolKind.Class, node, node.getIdentifier(), node.getDeclarations());
             }
             else if (node instanceof nodes.FontFace) {
-                const name = localize('literal.fontface', "@font-face");
+                const name = l10n.t("@font-face");
                 collect(name, SymbolKind.Class, node, undefined, node.getDeclarations());
             }
             else if (node instanceof nodes.Media) {
@@ -294,6 +300,12 @@ export class CSSNavigation {
         result.push({ label: label, textEdit: TextEdit.replace(range, label) });
         return result;
     }
+    prepareRename(document, position, stylesheet) {
+        const node = this.getHighlightNode(document, position, stylesheet);
+        if (node) {
+            return Range.create(document.positionAt(node.offset), document.positionAt(node.end));
+        }
+    }
     doRename(document, position, newName, stylesheet) {
         const highlights = this.findDocumentHighlights(document, position, stylesheet);
         const edits = highlights.map(h => TextEdit.replace(h.range, newName));
@@ -304,39 +316,46 @@ export class CSSNavigation {
     async resolveModuleReference(ref, documentUri, documentContext) {
         if (startsWith(documentUri, 'file://')) {
             const moduleName = getModuleNameFromPath(ref);
-            const rootFolderUri = documentContext.resolveReference('/', documentUri);
-            const documentFolderUri = dirname(documentUri);
-            const modulePath = await this.resolvePathToModule(moduleName, documentFolderUri, rootFolderUri);
-            if (modulePath) {
-                const pathWithinModule = ref.substring(moduleName.length + 1);
-                return joinPath(modulePath, pathWithinModule);
+            if (moduleName && moduleName !== '.' && moduleName !== '..') {
+                const rootFolderUri = documentContext.resolveReference('/', documentUri);
+                const documentFolderUri = dirname(documentUri);
+                const modulePath = await this.resolvePathToModule(moduleName, documentFolderUri, rootFolderUri);
+                if (modulePath) {
+                    const pathWithinModule = ref.substring(moduleName.length + 1);
+                    return joinPath(modulePath, pathWithinModule);
+                }
             }
         }
         return undefined;
     }
-    async resolveRelativeReference(ref, documentUri, documentContext, isRawLink) {
-        const relativeReference = documentContext.resolveReference(ref, documentUri);
+    async mapReference(target, isRawLink) {
+        return target;
+    }
+    async resolveReference(target, documentUri, documentContext, isRawLink = false) {
         // Following [css-loader](https://github.com/webpack-contrib/css-loader#url)
         // and [sass-loader's](https://github.com/webpack-contrib/sass-loader#imports)
         // convention, if an import path starts with ~ then use node module resolution
         // *unless* it starts with "~/" as this refers to the user's home directory.
-        if (ref[0] === '~' && ref[1] !== '/' && this.fileSystemProvider) {
-            ref = ref.substring(1);
-            return await this.resolveModuleReference(ref, documentUri, documentContext) || relativeReference;
+        if (target[0] === '~' && target[1] !== '/' && this.fileSystemProvider) {
+            target = target.substring(1);
+            return this.mapReference(await this.resolveModuleReference(target, documentUri, documentContext), isRawLink);
         }
+        const ref = await this.mapReference(documentContext.resolveReference(target, documentUri), isRawLink);
         // Following [less-loader](https://github.com/webpack-contrib/less-loader#imports)
         // and [sass-loader's](https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules)
-        // new resolving import at-rules (~ is deprecated). The loader will first try to resolve @import as a relative path. If it cannot be resolved, 
+        // new resolving import at-rules (~ is deprecated). The loader will first try to resolve @import as a relative path. If it cannot be resolved,
         // then the loader will try to resolve @import inside node_modules.
         if (this.resolveModuleReferences) {
-            if (relativeReference && await this.fileExists(relativeReference)) {
-                return relativeReference;
+            if (ref && await this.fileExists(ref)) {
+                return ref;
             }
-            else {
-                return await this.resolveModuleReference(ref, documentUri, documentContext) || relativeReference;
+            const moduleReference = await this.mapReference(await this.resolveModuleReference(target, documentUri, documentContext), isRawLink);
+            if (moduleReference) {
+                return moduleReference;
             }
         }
-        return relativeReference;
+        // fall back. it might not exists
+        return ref;
     }
     async resolvePathToModule(_moduleName, documentFolderUri, rootFolderUri) {
         // resolve the module relative to the document. We can't use `require` here as the code is webpacked.