vscode-css-languageservice 6.2.5 → 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,15 +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.peek(TokenType.Ident) && this._tryParseRuleset(true))
-            || this._parseDeclaration();
+        if (!this.peek(TokenType.Ident)) {
+            return this._parseRuleset(true);
+        }
+        return this._tryParseRuleset(true) || this._parseDeclaration();
     }
     _needsSemicolonAfter(node) {
         switch (node.type) {
@@ -396,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())) {
@@ -733,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;
@@ -748,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())) {

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/umd/languageFacts/builtinData.js

@@ -128,7 +128,7 @@
         'polygon()': 'Defines a polygon.'
     };
     exports.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/umd/languageFacts/colors.js

@@ -13,16 +13,133 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getColorValue = exports.hwbFromColor = exports.colorFromHWB = exports.hslFromColor = exports.colorFromHSL = exports.colorFrom256RGB = exports.colorFromHex = exports.hexDigit = exports.isColorValue = exports.isColorConstructor = exports.colorKeywords = exports.colors = exports.colorFunctions = void 0;
+    exports.getColorValue = exports.hwbFromColor = exports.colorFromHWB = exports.hslFromColor = exports.colorFromHSL = exports.colorFrom256RGB = exports.colorFromHex = exports.hexDigit = exports.isColorValue = exports.isColorString = exports.isColorConstructor = exports.colorKeywords = exports.colors = exports.colorFunctions = void 0;
     const nodes = require("../parser/cssNodes");
     const l10n = require("@vscode/l10n");
+    const hexColorRegExp = /(^#([0-9A-F]{3}){1,2}$)|(^#([0-9A-F]{4}){1,2}$)/i;
     exports.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;
     exports.colors = {
         aliceblue: '#f0f8ff',
         antiquewhite: '#faebd7',
@@ -173,10 +290,12 @@
         yellow: '#ffff00',
         yellowgreen: '#9acd32'
     };
+    const colorsRegExp = new RegExp(`^(${Object.keys(exports.colors).join('|')})$`, "i");
     exports.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(exports.colorKeywords).join('|')})$`, "i");
     function getNumericValue(node, factor) {
         const val = node.getText();
         const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
@@ -217,9 +336,13 @@
         if (!name) {
             return false;
         }
-        return /^(rgb|rgba|hsl|hsla|hwb)$/gi.test(name);
+        return colorFunctionNameRegExp.test(name);
     }
     exports.isColorConstructor = isColorConstructor;
+    function isColorString(s) {
+        return hexColorRegExp.test(s) || colorsRegExp.test(s) || colorKeywordsRegExp.test(s);
+    }
+    exports.isColorString = isColorString;
     /**
      * Returns true if the node is a color value - either
      * defined a hex number, as rgb or rgba function, or

package/lib/umd/parser/cssNodes.js

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

package/lib/umd/parser/cssParser.js

@@ -282,7 +282,7 @@
                 || this._parseFontFace()
                 || this._parseKeyframe()
                 || this._parseSupports(isNested)
-                || this._parseLayer()
+                || this._parseLayer(isNested)
                 || this._parsePropertyAtRule()
                 || this._parseViewPort()
                 || this._parseNamespace()
@@ -317,15 +317,20 @@
             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(cssScanner_1.TokenType.AtKeyword)) {
                 return this._parseRuleSetDeclarationAtStatement();
             }
-            return (!this.peek(cssScanner_1.TokenType.Ident) && this._tryParseRuleset(true))
-                || this._parseDeclaration();
+            if (!this.peek(cssScanner_1.TokenType.Ident)) {
+                return this._parseRuleset(true);
+            }
+            return this._tryParseRuleset(true) || this._parseDeclaration();
         }
         _needsSemicolonAfter(node) {
             switch (node.type) {
@@ -407,9 +412,9 @@
             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())) {
@@ -744,7 +749,7 @@
             }
             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;
@@ -759,13 +764,22 @@
                 node.setNames(names);
             }
             if ((!names || names.getChildren().length === 1) && this.peek(cssScanner_1.TokenType.CurlyL)) {
-                return this._parseBody(node, this._parseStylesheetStatement.bind(this));
+                return this._parseBody(node, this._parseLayerDeclaration.bind(this, isNested));
             }
             if (!this.accept(cssScanner_1.TokenType.SemiColon)) {
                 return this.finish(node, cssErrors_1.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())) {

package/lib/umd/services/cssCompletion.js

@@ -415,7 +415,7 @@
                     kind: cssLanguageTypes_1.CompletionItemKind.Variable,
                     sortText: SortTexts.Variable
                 };
-                if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
+                if (typeof completionItem.documentation === 'string' && languageFacts.isColorString(completionItem.documentation)) {
                     completionItem.kind = cssLanguageTypes_1.CompletionItemKind.Color;
                 }
                 if (symbol.node.type === nodes.NodeType.FunctionParameter) {
@@ -440,7 +440,7 @@
                         textEdit: cssLanguageTypes_1.TextEdit.replace(this.getCompletionRange(null), symbol.name),
                         kind: cssLanguageTypes_1.CompletionItemKind.Variable
                     };
-                    if (typeof completionItem.documentation === 'string' && isColorString(completionItem.documentation)) {
+                    if (typeof completionItem.documentation === 'string' && languageFacts.isColorString(completionItem.documentation)) {
                         completionItem.kind = cssLanguageTypes_1.CompletionItemKind.Color;
                     }
                     result.items.push(completionItem);
@@ -528,14 +528,11 @@
                 });
             }
             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: cssLanguageTypes_1.TextEdit.replace(this.getCompletionRange(existingNode), insertText),
+                    textEdit: cssLanguageTypes_1.TextEdit.replace(this.getCompletionRange(existingNode), p.insertText),
                     insertTextFormat: SnippetFormat,
                     kind: cssLanguageTypes_1.CompletionItemKind.Function
                 });
@@ -1069,8 +1066,4 @@
         }
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vscode-css-languageservice",
-  "version": "6.2.5",
+  "version": "6.2.6",
   "description": "Language service for CSS, LESS and SCSS",
   "main": "./lib/umd/cssLanguageService.js",
   "typings": "./lib/umd/cssLanguageService",
@@ -17,18 +17,18 @@
   "devDependencies": {
     "@types/mocha": "^10.0.1",
     "@types/node": "16.x",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
     "@vscode/web-custom-data": "^0.4.6",
-    "eslint": "^8.39.0",
+    "eslint": "^8.41.0",
     "js-beautify": "^1.14.7",
     "mocha": "^10.2.0",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "source-map-support": "^0.5.21",
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@vscode/l10n": "^0.0.13",
+    "@vscode/l10n": "^0.0.14",
     "vscode-languageserver-textdocument": "^1.0.8",
     "vscode-languageserver-types": "^3.17.3",
     "vscode-uri": "^3.0.7"