vscode-css-languageservice 6.2.4 → 6.2.6

package/lib/esm/languageFacts/builtinData.js

@@ -117,7 +117,7 @@ export const basicShapeFunctions = {
     'polygon()': 'Defines a polygon.'
 };
 export const units = {
-    'length': ['cap', 'ch', 'cm', 'cqb', 'cqh', 'cqi', 'cqmax', 'cqmin', 'cqw', 'dvb', 'dvh', 'dvi', 'dvw', 'em', 'ex', 'ic', 'in', 'lh', 'lvb', 'lvh', 'lvi', 'lvw', 'mm', 'pc', 'pt', 'px', 'q', 'rem', 'svb', 'svh', 'svi', 'svw', 'vb', 'vh', 'vi', 'vmax', 'vmin', 'vw'],
+    'length': ['cap', 'ch', 'cm', 'cqb', 'cqh', 'cqi', 'cqmax', 'cqmin', 'cqw', 'dvb', 'dvh', 'dvi', 'dvw', 'em', 'ex', 'ic', 'in', 'lh', 'lvb', 'lvh', 'lvi', 'lvw', 'mm', 'pc', 'pt', 'px', 'q', 'rcap', 'rch', 'rem', 'rex', 'ric', 'rlh', 'svb', 'svh', 'svi', 'svw', 'vb', 'vh', 'vi', 'vmax', 'vmin', 'vw'],
     'angle': ['deg', 'rad', 'grad', 'turn'],
     'time': ['ms', 's'],
     'frequency': ['Hz', 'kHz'],

package/lib/esm/languageFacts/colors.js

@@ -4,13 +4,130 @@
  *--------------------------------------------------------------------------------------------*/
 import * as nodes from '../parser/cssNodes';
 import * as l10n from '@vscode/l10n';
+const hexColorRegExp = /(^#([0-9A-F]{3}){1,2}$)|(^#([0-9A-F]{4}){1,2}$)/i;
 export const colorFunctions = [
-    { 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.') }
+    {
+        label: 'rgb',
+        func: 'rgb($red, $green, $blue)',
+        insertText: 'rgb(${1:red}, ${2:green}, ${3:blue})',
+        desc: l10n.t('Creates a Color from red, green, and blue values.')
+    },
+    {
+        label: 'rgba',
+        func: 'rgba($red, $green, $blue, $alpha)',
+        insertText: 'rgba(${1:red}, ${2:green}, ${3:blue}, ${4:alpha})',
+        desc: l10n.t('Creates a Color from red, green, blue, and alpha values.')
+    },
+    {
+        label: 'rgb relative',
+        func: 'rgb(from $color $red $green $blue)',
+        insertText: 'rgb(from ${1:color} ${2:r} ${3:g} ${4:b})',
+        desc: l10n.t('Creates a Color from the red, green, and blue values of another Color.')
+    },
+    {
+        label: 'hsl',
+        func: 'hsl($hue, $saturation, $lightness)',
+        insertText: 'hsl(${1:hue}, ${2:saturation}, ${3:lightness})',
+        desc: l10n.t('Creates a Color from hue, saturation, and lightness values.')
+    },
+    {
+        label: 'hsla',
+        func: 'hsla($hue, $saturation, $lightness, $alpha)',
+        insertText: 'hsla(${1:hue}, ${2:saturation}, ${3:lightness}, ${4:alpha})',
+        desc: l10n.t('Creates a Color from hue, saturation, lightness, and alpha values.')
+    },
+    {
+        label: 'hsl relative',
+        func: 'hsl(from $color $hue $saturation $lightness)',
+        insertText: 'hsl(from ${1:color} ${2:h} ${3:s} ${4:l})',
+        desc: l10n.t('Creates a Color from the hue, saturation, and lightness values of another Color.')
+    },
+    {
+        label: 'hwb',
+        func: 'hwb($hue $white $black)',
+        insertText: 'hwb(${1:hue} ${2:white} ${3:black})',
+        desc: l10n.t('Creates a Color from hue, white, and black values.')
+    },
+    {
+        label: 'hwb relative',
+        func: 'hwb(from $color $hue $white $black)',
+        insertText: 'hwb(from ${1:color} ${2:h} ${3:w} ${4:b})',
+        desc: l10n.t('Creates a Color from the hue, white, and black values of another Color.')
+    },
+    {
+        label: 'lab',
+        func: 'lab($lightness $a $b)',
+        insertText: 'lab(${1:lightness} ${2:a} ${3:b})',
+        desc: l10n.t('Creates a Color from lightness, a, and b values.')
+    },
+    {
+        label: 'lab relative',
+        func: 'lab(from $color $lightness $a $b)',
+        insertText: 'lab(from ${1:color} ${2:l} ${3:a} ${4:b})',
+        desc: l10n.t('Creates a Color from the lightness, a, and b values of another Color.')
+    },
+    {
+        label: 'oklab',
+        func: 'oklab($lightness $a $b)',
+        insertText: 'oklab(${1:lightness} ${2:a} ${3:b})',
+        desc: l10n.t('Creates a Color from lightness, a, and b values.')
+    },
+    {
+        label: 'oklab relative',
+        func: 'oklab(from $color $lightness $a $b)',
+        insertText: 'oklab(from ${1:color} ${2:l} ${3:a} ${4:b})',
+        desc: l10n.t('Creates a Color from the lightness, a, and b values of another Color.')
+    },
+    {
+        label: 'lch',
+        func: 'lch($lightness $chroma $hue)',
+        insertText: 'lch(${1:lightness} ${2:chroma} ${3:hue})',
+        desc: l10n.t('Creates a Color from lightness, chroma, and hue values.')
+    },
+    {
+        label: 'lch relative',
+        func: 'lch(from $color $lightness $chroma $hue)',
+        insertText: 'lch(from ${1:color} ${2:l} ${3:c} ${4:h})',
+        desc: l10n.t('Creates a Color from the lightness, chroma, and hue values of another Color.')
+    },
+    {
+        label: 'oklch',
+        func: 'oklch($lightness $chroma $hue)',
+        insertText: 'oklch(${1:lightness} ${2:chroma} ${3:hue})',
+        desc: l10n.t('Creates a Color from lightness, chroma, and hue values.')
+    },
+    {
+        label: 'oklch relative',
+        func: 'oklch(from $color $lightness $chroma $hue)',
+        insertText: 'oklch(from ${1:color} ${2:l} ${3:c} ${4:h})',
+        desc: l10n.t('Creates a Color from the lightness, chroma, and hue values of another Color.')
+    },
+    {
+        label: 'color',
+        func: 'color($color-space $red $green $blue)',
+        insertText: 'color(${1|srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyx,xyz-d50,xyz-d65|} ${2:red} ${3:green} ${4:blue})',
+        desc: l10n.t('Creates a Color in a specific color space from red, green, and blue values.')
+    },
+    {
+        label: 'color relative',
+        func: 'color(from $color $color-space $red $green $blue)',
+        insertText: 'color(from ${1:color} ${2|srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyx,xyz-d50,xyz-d65|} ${3:r} ${4:g} ${5:b})',
+        desc: l10n.t('Creates a Color in a specific color space from the red, green, and blue values of another Color.')
+    },
+    {
+        label: 'color-mix',
+        func: 'color-mix(in $color-space, $color $percentage, $color $percentage)',
+        insertText: 'color-mix(in ${1|srgb,srgb-linear,lab,oklab,xyz,xyz-d50,xyz-d65|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
+        desc: l10n.t('Mix two colors together in a rectangular color space.')
+    },
+    {
+        label: 'color-mix hue',
+        func: 'color-mix(in $color-space $interpolation-method hue, $color $percentage, $color $percentage)',
+        insertText: 'color-mix(in ${1|hsl,hwb,lch,oklch|} ${2|shorter hue,longer hue,increasing hue,decreasing hue|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
+        desc: l10n.t('Mix two colors together in a polar color space.')
+    },
 ];
+const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb)$/i;
 export const colors = {
     aliceblue: '#f0f8ff',
     antiquewhite: '#faebd7',
@@ -161,10 +278,12 @@ export const colors = {
     yellow: '#ffff00',
     yellowgreen: '#9acd32'
 };
+const colorsRegExp = new RegExp(`^(${Object.keys(colors).join('|')})$`, "i");
 export const colorKeywords = {
     'currentColor': 'The value of the \'color\' property. The computed value of the \'currentColor\' keyword is the computed value of the \'color\' property. If the \'currentColor\' keyword is set on the \'color\' property itself, it is treated as \'color:inherit\' at parse time.',
     'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.',
 };
+const colorKeywordsRegExp = new RegExp(`^(${Object.keys(colorKeywords).join('|')})$`, "i");
 function getNumericValue(node, factor) {
     const val = node.getText();
     const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
@@ -205,7 +324,10 @@ export function isColorConstructor(node) {
     if (!name) {
         return false;
     }
-    return /^(rgb|rgba|hsl|hsla|hwb)$/gi.test(name);
+    return colorFunctionNameRegExp.test(name);
+}
+export function isColorString(s) {
+    return hexColorRegExp.test(s) || colorsRegExp.test(s) || colorKeywordsRegExp.test(s);
 }
 /**
  * Returns true if the node is a color value - either

package/lib/esm/parser/cssNodes.js

@@ -1197,7 +1197,7 @@ export class MixinContentDeclaration extends BodyDeclaration {
         super(offset, length);
     }
     get type() {
-        return NodeType.MixinContentReference;
+        return NodeType.MixinContentDeclaration;
     }
     getParameters() {
         if (!this.parameters) {

package/lib/esm/parser/cssParser.js

@@ -271,7 +271,7 @@ export class Parser {
             || this._parseFontFace()
             || this._parseKeyframe()
             || this._parseSupports(isNested)
-            || this._parseLayer()
+            || this._parseLayer(isNested)
             || this._parsePropertyAtRule()
             || this._parseViewPort()
             || this._parseNamespace()
@@ -306,14 +306,20 @@ export class Parser {
         return this._parseBody(node, this._parseRuleSetDeclaration.bind(this));
     }
     _parseRuleSetDeclarationAtStatement() {
-        return this._parseUnknownAtRule();
+        return this._parseMedia(true)
+            || this._parseSupports(true)
+            || this._parseLayer(true)
+            || this._parseUnknownAtRule();
     }
     _parseRuleSetDeclaration() {
         // https://www.w3.org/TR/css-syntax-3/#consume-a-list-of-declarations
         if (this.peek(TokenType.AtKeyword)) {
             return this._parseRuleSetDeclarationAtStatement();
         }
-        return this._parseDeclaration();
+        if (!this.peek(TokenType.Ident)) {
+            return this._parseRuleset(true);
+        }
+        return this._tryParseRuleset(true) || this._parseDeclaration();
     }
     _needsSemicolonAfter(node) {
         switch (node.type) {
@@ -395,9 +401,9 @@ export class Parser {
         return hasContent ? this.finish(node) : null;
     }
     _parseDeclaration(stopTokens) {
-        const custonProperty = this._tryParseCustomPropertyDeclaration(stopTokens);
-        if (custonProperty) {
-            return custonProperty;
+        const customProperty = this._tryParseCustomPropertyDeclaration(stopTokens);
+        if (customProperty) {
+            return customProperty;
         }
         const node = this.create(nodes.Declaration);
         if (!node.setProperty(this._parseProperty())) {
@@ -732,7 +738,7 @@ export class Parser {
         }
         return this._parseBody(node, this._parseDeclaration.bind(this));
     }
-    _parseLayer() {
+    _parseLayer(isNested = false) {
         // @layer layer-name {rules}
         // @layer layer-name;
         // @layer layer-name, layer-name, layer-name;
@@ -747,13 +753,22 @@ export class Parser {
             node.setNames(names);
         }
         if ((!names || names.getChildren().length === 1) && this.peek(TokenType.CurlyL)) {
-            return this._parseBody(node, this._parseStylesheetStatement.bind(this));
+            return this._parseBody(node, this._parseLayerDeclaration.bind(this, isNested));
         }
         if (!this.accept(TokenType.SemiColon)) {
             return this.finish(node, ParseError.SemiColonExpected);
         }
         return this.finish(node);
     }
+    _parseLayerDeclaration(isNested = false) {
+        if (isNested) {
+            // if nested, the body can contain rulesets, but also declarations
+            return this._tryParseRuleset(true)
+                || this._tryToParseDeclaration()
+                || this._parseStylesheetStatement(true);
+        }
+        return this._parseStylesheetStatement(false);
+    }
     _parseLayerNameList() {
         const node = this.createNode(nodes.NodeType.LayerNameList);
         if (!node.addChild(this._parseLayerName())) {
@@ -1251,7 +1266,7 @@ export class Parser {
         //  : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ;
         const node = this.create(nodes.SimpleSelector);
         let c = 0;
-        if (node.addChild(this._parseElementName())) {
+        if (node.addChild(this._parseElementName() || this._parseNestingSelector())) {
             c++;
         }
         while ((c === 0 || !this.hasWhitespace()) && node.addChild(this._parseSimpleSelectorBody())) {
@@ -1259,6 +1274,14 @@ export class Parser {
         }
         return c > 0 ? this.finish(node) : null;
     }
+    _parseNestingSelector() {
+        if (this.peekDelim('&')) {
+            const node = this.createNode(nodes.NodeType.SelectorCombinator);
+            this.consumeToken();
+            return this.finish(node);
+        }
+        return null;
+    }
     _parseSimpleSelectorBody() {
         return this._parsePseudo() || this._parseHash() || this._parseClass() || this._parseAttrib();
     }

package/lib/esm/parser/lessParser.js

@@ -276,14 +276,14 @@ export class LESSParser extends cssParser.Parser {
                 || this._parsePropertyAtRule() // @property
                 || this._parseDetachedRuleSetMixin() // less detached ruleset mixin
                 || this._parseVariableDeclaration() // Variable declarations
-                || super._parseRuleSetDeclarationAtStatement();
+                || this._parseRuleSetDeclarationAtStatement();
         }
         return this._tryParseMixinDeclaration()
             || this._tryParseRuleset(true) // nested ruleset
             || this._tryParseMixinReference() // less mixin reference
             || this._parseFunction()
             || this._parseExtend() // less extend declaration
-            || super._parseRuleSetDeclaration(); // try css ruleset declaration as the last option
+            || this._parseDeclaration(); // try css ruleset declaration as the last option
     }
     _parseKeyframeIdent() {
         return this._parseIdent([nodes.ReferenceType.Keyframe]) || this._parseVariable();
@@ -292,9 +292,9 @@ export class LESSParser extends cssParser.Parser {
         return this._parseDetachedRuleSetMixin() // less detached ruleset mixin
             || super._parseKeyframeSelector();
     }
-    _parseSimpleSelectorBody() {
-        return this._parseSelectorCombinator() || super._parseSimpleSelectorBody();
-    }
+    // public _parseSimpleSelectorBody(): nodes.Node | null {
+    // 	return this._parseNestingSelector() || super._parseSimpleSelectorBody();
+    // }
     _parseSelector(isNested) {
         // CSS Guards
         const node = this.create(nodes.Selector);
@@ -314,7 +314,7 @@ export class LESSParser extends cssParser.Parser {
         }
         return hasContent ? this.finish(node) : null;
     }
-    _parseSelectorCombinator() {
+    _parseNestingSelector() {
         if (this.peekDelim('&')) {
             const node = this.createNode(nodes.NodeType.SelectorCombinator);
             this.consumeToken();

package/lib/esm/parser/scssParser.js

@@ -161,7 +161,7 @@ export class SCSSParser extends cssParser.Parser {
     _parseTermExpression() {
         return this._parseModuleMember() ||
             this._parseVariable() ||
-            this._parseSelectorCombinator() ||
+            this._parseNestingSelector() ||
             //this._tryParsePrio() ||
             super._parseTermExpression();
     }
@@ -169,7 +169,7 @@ export class SCSSParser extends cssParser.Parser {
         if (this.peek(scssScanner.InterpolationFunction)) {
             const node = this.create(nodes.Interpolation);
             this.consumeToken();
-            if (!node.addChild(this._parseExpr()) && !this._parseSelectorCombinator()) {
+            if (!node.addChild(this._parseExpr()) && !this._parseNestingSelector()) {
                 if (this.accept(TokenType.CurlyR)) {
                     return this.finish(node);
                 }
@@ -219,11 +219,11 @@ export class SCSSParser extends cssParser.Parser {
                 || this._parseSupports(true) // @supports
                 || this._parseLayer() // @layer
                 || this._parsePropertyAtRule() // @property
-                || super._parseRuleSetDeclarationAtStatement();
+                || this._parseRuleSetDeclarationAtStatement();
         }
         return this._parseVariableDeclaration() // variable declaration
             || this._tryParseRuleset(true) // nested ruleset
-            || super._parseRuleSetDeclaration(); // try css ruleset declaration as last so in the error case, the ast will contain a declaration
+            || this._parseDeclaration(); // try css ruleset declaration as last so in the error case, the ast will contain a declaration
     }
     _parseDeclaration(stopTokens) {
         const custonProperty = this._tryParseCustomPropertyDeclaration(stopTokens);
@@ -282,9 +282,9 @@ export class SCSSParser extends cssParser.Parser {
         return null;
     }
     _parseSimpleSelectorBody() {
-        return this._parseSelectorCombinator() || this._parseSelectorPlaceholder() || super._parseSimpleSelectorBody();
+        return this._parseSelectorPlaceholder() || super._parseSimpleSelectorBody();
     }
-    _parseSelectorCombinator() {
+    _parseNestingSelector() {
         if (this.peekDelim('&')) {
             const node = this.createNode(nodes.NodeType.SelectorCombinator);
             this.consumeToken();

package/lib/esm/services/cssCompletion.js

@@ -404,7 +404,7 @@ export class CSSCompletion {
                 kind: CompletionItemKind.Variable,
                 sortText: SortTexts.Variable
             };
-            if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
+            if (typeof completionItem.documentation === 'string' && languageFacts.isColorString(completionItem.documentation)) {
                 completionItem.kind = CompletionItemKind.Color;
             }
             if (symbol.node.type === nodes.NodeType.FunctionParameter) {
@@ -429,7 +429,7 @@ export class CSSCompletion {
                     textEdit: TextEdit.replace(this.getCompletionRange(null), symbol.name),
                     kind: CompletionItemKind.Variable
                 };
-                if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
+                if (typeof completionItem.documentation === 'string' && languageFacts.isColorString(completionItem.documentation)) {
                     completionItem.kind = CompletionItemKind.Color;
                 }
                 result.items.push(completionItem);
@@ -517,14 +517,11 @@ export class CSSCompletion {
             });
         }
         for (const p of languageFacts.colorFunctions) {
-            let tabStop = 1;
-            const replaceFunction = (_match, p1) => '${' + tabStop++ + ':' + p1 + '}';
-            const insertText = p.func.replace(/\[?\$(\w+)\]?/g, replaceFunction);
             result.items.push({
-                label: p.func.substr(0, p.func.indexOf('(')),
+                label: p.label,
                 detail: p.func,
                 documentation: p.desc,
-                textEdit: TextEdit.replace(this.getCompletionRange(existingNode), insertText),
+                textEdit: TextEdit.replace(this.getCompletionRange(existingNode), p.insertText),
                 insertTextFormat: SnippetFormat,
                 kind: CompletionItemKind.Function
             });
@@ -1057,7 +1054,3 @@ function getCurrentWord(document, offset) {
     }
     return text.substring(i + 1, offset);
 }
-function isColorString(s) {
-    // From https://stackoverflow.com/questions/8027423/how-to-check-if-a-string-is-a-valid-hex-color-representation/8027444
-    return (s.toLowerCase() in languageFacts.colors) || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(s);
-}

package/lib/esm/services/cssNavigation.js

@@ -173,7 +173,7 @@ export class CSSNavigation {
         const addSymbolInformation = (name, kind, symbolNodeOrRange) => {
             const range = symbolNodeOrRange instanceof nodes.Node ? getRange(symbolNodeOrRange, document) : symbolNodeOrRange;
             const entry = {
-                name,
+                name: name || l10n.t('<undefined>'),
                 kind,
                 location: Location.create(document.uri, range)
             };
@@ -187,9 +187,12 @@ export class CSSNavigation {
         const parents = [];
         const addDocumentSymbol = (name, kind, symbolNodeOrRange, nameNodeOrRange, bodyNode) => {
             const range = symbolNodeOrRange instanceof nodes.Node ? getRange(symbolNodeOrRange, document) : symbolNodeOrRange;
-            const selectionRange = (nameNodeOrRange instanceof nodes.Node ? getRange(nameNodeOrRange, document) : nameNodeOrRange) ?? Range.create(range.start, range.start);
+            let selectionRange = nameNodeOrRange instanceof nodes.Node ? getRange(nameNodeOrRange, document) : nameNodeOrRange;
+            if (!selectionRange || !containsRange(range, selectionRange)) {
+                selectionRange = Range.create(range.start, range.start);
+            }
             const entry = {
-                name,
+                name: name || l10n.t('<undefined>'),
                 kind,
                 range,
                 selectionRange

package/lib/esm/services/lessCompletion.js

@@ -6,7 +6,7 @@
 import { CSSCompletion } from './cssCompletion';
 import { CompletionItemKind, InsertTextFormat, TextEdit } from '../cssLanguageTypes';
 import * as l10n from '@vscode/l10n';
-export class LESSCompletion extends CSSCompletion {
+class LESSCompletion extends CSSCompletion {
     constructor(lsOptions, cssDataManager) {
         super('@', lsOptions, cssDataManager);
     }
@@ -375,3 +375,4 @@ LESSCompletion.colorProposals = [
         'example': 'negation(@color1, @color2);'
     }
 ];
+export { LESSCompletion };

package/lib/esm/services/lint.js

@@ -25,7 +25,7 @@ class NodesByRootMap {
         }
     }
 }
-export class LintVisitor {
+class LintVisitor {
     static entries(node, document, settings, cssDataManager, entryFilter) {
         const visitor = new LintVisitor(document, settings, cssDataManager);
         node.acceptVisitor(visitor);
@@ -562,3 +562,4 @@ LintVisitor.prefixes = [
     '-ms-', '-moz-', '-o-', '-webkit-', // Quite common
     //		'-xv-', '-atsc-', '-wap-', '-khtml-', 'mso-', 'prince-', '-ah-', '-hp-', '-ro-', '-rim-', '-tc-' // Quite un-common
 ];
+export { LintVisitor };

package/lib/esm/services/scssCompletion.js

@@ -8,7 +8,7 @@ import * as nodes from '../parser/cssNodes';
 import { CompletionItemKind, TextEdit, InsertTextFormat } from '../cssLanguageTypes';
 import * as l10n from '@vscode/l10n';
 const sassDocumentationName = l10n.t('Sass documentation');
-export class SCSSCompletion extends CSSCompletion {
+class SCSSCompletion extends CSSCompletion {
     constructor(lsServiceOptions, cssDataManager) {
         super('$', lsServiceOptions, cssDataManager);
         addReferencesToDocumentation(SCSSCompletion.scssModuleLoaders);
@@ -333,6 +333,7 @@ SCSSCompletion.scssModuleBuiltIns = [
         references: [{ name: sassDocumentationName, url: 'https://sass-lang.com/documentation/modules/meta' }]
     },
 ];
+export { SCSSCompletion };
 /**
  * Todo @Pine: Remove this and do it through custom data
  */

package/lib/esm/services/selectorPrinting.js

@@ -402,8 +402,7 @@ export class SelectorPrinting {
             return specificity;
         };
         const specificity = calculateScore(node);
-        ;
-        return l10n.t("[Selector Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): ({0}, {1}, {2})", specificity.id, specificity.attr, specificity.tag);
+        return `[${l10n.t("Selector Specificity")}](https://developer.mozilla.org/docs/Web/CSS/Specificity): (${specificity.id}, ${specificity.attr}, ${specificity.tag})`;
     }
 }
 class SelectorElementBuilder {