@master/css-language-service 2.0.0-rc.67 → 2.0.0-rc.69

package/dist/core.cjs

@@ -19,7 +19,7 @@ class CSSLanguageService extends EventEmitter {
     constructor(customSettings){
         super(), this.customSettings = customSettings;
         this.settings = extend(settings, customSettings);
-        this.css = new css.MasterCSS(this.settings.config);
+        this.css = css.createCSS(this.settings.config);
     }
     inspectSyntax(...params) {
         if (this.settings.inspectSyntax && this.isDocumentAccepted(params[0])) return inspectSyntax?.call(this, ...params);

package/dist/core.mjs

@@ -1,4 +1,4 @@
-import { MasterCSS } from '@master/css';
+import { createCSS } from '@master/css';
 import extend from '@techor/extend';
 import EventEmitter from 'node:events';
 import settings from './settings.mjs';
@@ -17,7 +17,7 @@ class CSSLanguageService extends EventEmitter {
     constructor(customSettings){
         super(), this.customSettings = customSettings;
         this.settings = extend(settings, customSettings);
-        this.css = new MasterCSS(this.settings.config);
+        this.css = createCSS(this.settings.config);
     }
     inspectSyntax(...params) {
         if (this.settings.inspectSyntax && this.isDocumentAccepted(params[0])) return inspectSyntax?.call(this, ...params);

package/dist/features/edit-syntax-colors.cjs

@@ -5,7 +5,7 @@ var convertColorToken = require('../utils/convert-color-token.cjs');
 function editSyntaxColors(document, color, range) {
     const colorPresentations = [];
     const selectedColorToken = document.getText(range);
-    const targetColorToken = convertColorToken(color, selectedColorToken, this.css);
+    const targetColorToken = convertColorToken.default(color, selectedColorToken, this.css);
     if (targetColorToken) colorPresentations.push({
         label: targetColorToken,
         textEdit: {

package/dist/features/render-syntax-colors.cjs

@@ -1,79 +1,80 @@
 'use strict';
 
 var regex = require('../utils/regex.cjs');
-var culori = require('culori');
+var Color = require('colorjs.io');
 var css = require('@master/css');
 
 async function renderSyntaxColors(document) {
     const text = document.getText() ?? '';
     const colorInformations = [];
-    for (const instanceMatch of text.matchAll(regex.instancePattern)){
-        if (instanceMatch.index === undefined) break;
-        const instanceStartIndex = instanceMatch.index;
-        const syntax = instanceMatch[0];
-        const rule = this.css.generate(syntax)[0];
-        if (rule && rule.type !== css.SyntaxRuleType.Utility) {
-            const keyTokenLength = rule.keyToken?.length ?? 0;
-            let currentLength = 0;
-            const resolveValueComponent = (valueComponent)=>{
-                if (valueComponent.text === undefined) return; // text is always existing, just for type
-                const startOffset = instanceStartIndex + keyTokenLength + currentLength;
-                // TODO: check number mt:30
-                const valueComponentTokenLength = valueComponent.token.length;
-                let color;
-                switch(valueComponent.type){
-                    case 'function':
-                        if ([
-                            'rgb',
-                            'rgba',
-                            'hsl',
-                            'hsla',
-                            'hwb',
-                            'lab',
-                            'lch',
-                            'oklab',
-                            'oklch',
-                            'color'
-                        ].includes(valueComponent.name)) {
-                            color = culori.parse(valueComponent.text);
-                        } else if (valueComponent.children.length) {
-                            currentLength += valueComponent.name.length + 1 // function name + '('
-                            ;
-                            valueComponent.children.forEach(resolveValueComponent);
-                        }
-                        break;
-                    case 'variable':
-                        if (valueComponent.variable?.type === 'color') {
-                            color = culori.parse(valueComponent.text);
-                        }
-                        break;
-                    case 'string':
-                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
-                            color = culori.parse(valueComponent.text);
-                        }
-                        break;
-                }
-                // check if rgba is valid
-                if (color) {
-                    const rgbaColor = color.mode !== 'rgb' ? culori.converter('rgb')(color) : color;
-                    colorInformations.push({
-                        range: {
-                            start: document.positionAt(startOffset),
-                            end: document.positionAt(startOffset + valueComponentTokenLength)
-                        },
-                        color: {
-                            red: rgbaColor.r,
-                            green: rgbaColor.g,
-                            blue: rgbaColor.b,
-                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
-                        }
-                    });
-                }
-                currentLength += valueComponentTokenLength || 0;
-            };
-            rule.valueComponents.forEach(resolveValueComponent);
+    try {
+        for (const instanceMatch of text.matchAll(regex.instancePattern)){
+            if (instanceMatch.index === undefined) break;
+            const instanceStartIndex = instanceMatch.index;
+            const syntax = instanceMatch[0];
+            const rule = this.css.generate(syntax)[0];
+            if (rule && rule.type !== css.SyntaxRuleType.Utility) {
+                const keyTokenLength = rule.keyToken?.length ?? 0;
+                let currentLength = 0;
+                const resolveValueComponent = (valueComponent)=>{
+                    if (valueComponent.text === undefined) return; // text is always existing, just for type
+                    const startOffset = instanceStartIndex + keyTokenLength + currentLength;
+                    // TODO: check number mt:30
+                    const valueComponentTokenLength = valueComponent.token.length;
+                    let color;
+                    switch(valueComponent.type){
+                        case 'function':
+                            if ([
+                                'rgb',
+                                'rgba',
+                                'hsl',
+                                'hsla',
+                                'hwb',
+                                'lab',
+                                'lch',
+                                'oklab',
+                                'oklch',
+                                'color'
+                            ].includes(valueComponent.name)) {
+                                color = new Color(valueComponent.text);
+                            } else if (valueComponent.children.length) {
+                                currentLength += valueComponent.name.length + 1; // function name + '('
+                                valueComponent.children.forEach(resolveValueComponent);
+                            }
+                            break;
+                        case 'variable':
+                            if (valueComponent.variable?.type === 'color') {
+                                color = new Color(valueComponent.text);
+                            }
+                            break;
+                        case 'string':
+                            if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                                color = new Color(valueComponent.text);
+                            }
+                            break;
+                    }
+                    // check if rgba is valid
+                    if (color) {
+                        const rgbaColor = color.to('srgb');
+                        colorInformations.push({
+                            range: {
+                                start: document.positionAt(startOffset),
+                                end: document.positionAt(startOffset + valueComponentTokenLength)
+                            },
+                            color: {
+                                red: rgbaColor.r,
+                                green: rgbaColor.g,
+                                blue: rgbaColor.b,
+                                alpha: Number(rgbaColor.alpha)
+                            }
+                        });
+                    }
+                    currentLength += valueComponentTokenLength || 0;
+                };
+                rule.valueComponents.forEach(resolveValueComponent);
+            }
         }
-    }
+    } catch (e) {}
     const colorIndexSet = new Set();
     return colorInformations.filter((item)=>{
         if (colorIndexSet.has(item.range.start)) {

package/dist/features/render-syntax-colors.mjs

@@ -1,77 +1,78 @@
 import { instancePattern } from '../utils/regex.mjs';
-import { parse, converter } from 'culori';
+import Color from 'colorjs.io';
 import { SyntaxRuleType } from '@master/css';
 
 async function renderSyntaxColors(document) {
     const text = document.getText() ?? '';
     const colorInformations = [];
-    for (const instanceMatch of text.matchAll(instancePattern)){
-        if (instanceMatch.index === undefined) break;
-        const instanceStartIndex = instanceMatch.index;
-        const syntax = instanceMatch[0];
-        const rule = this.css.generate(syntax)[0];
-        if (rule && rule.type !== SyntaxRuleType.Utility) {
-            const keyTokenLength = rule.keyToken?.length ?? 0;
-            let currentLength = 0;
-            const resolveValueComponent = (valueComponent)=>{
-                if (valueComponent.text === undefined) return; // text is always existing, just for type
-                const startOffset = instanceStartIndex + keyTokenLength + currentLength;
-                // TODO: check number mt:30
-                const valueComponentTokenLength = valueComponent.token.length;
-                let color;
-                switch(valueComponent.type){
-                    case 'function':
-                        if ([
-                            'rgb',
-                            'rgba',
-                            'hsl',
-                            'hsla',
-                            'hwb',
-                            'lab',
-                            'lch',
-                            'oklab',
-                            'oklch',
-                            'color'
-                        ].includes(valueComponent.name)) {
-                            color = parse(valueComponent.text);
-                        } else if (valueComponent.children.length) {
-                            currentLength += valueComponent.name.length + 1 // function name + '('
-                            ;
-                            valueComponent.children.forEach(resolveValueComponent);
-                        }
-                        break;
-                    case 'variable':
-                        if (valueComponent.variable?.type === 'color') {
-                            color = parse(valueComponent.text);
-                        }
-                        break;
-                    case 'string':
-                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
-                            color = parse(valueComponent.text);
-                        }
-                        break;
-                }
-                // check if rgba is valid
-                if (color) {
-                    const rgbaColor = color.mode !== 'rgb' ? converter('rgb')(color) : color;
-                    colorInformations.push({
-                        range: {
-                            start: document.positionAt(startOffset),
-                            end: document.positionAt(startOffset + valueComponentTokenLength)
-                        },
-                        color: {
-                            red: rgbaColor.r,
-                            green: rgbaColor.g,
-                            blue: rgbaColor.b,
-                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
-                        }
-                    });
-                }
-                currentLength += valueComponentTokenLength || 0;
-            };
-            rule.valueComponents.forEach(resolveValueComponent);
+    try {
+        for (const instanceMatch of text.matchAll(instancePattern)){
+            if (instanceMatch.index === undefined) break;
+            const instanceStartIndex = instanceMatch.index;
+            const syntax = instanceMatch[0];
+            const rule = this.css.generate(syntax)[0];
+            if (rule && rule.type !== SyntaxRuleType.Utility) {
+                const keyTokenLength = rule.keyToken?.length ?? 0;
+                let currentLength = 0;
+                const resolveValueComponent = (valueComponent)=>{
+                    if (valueComponent.text === undefined) return; // text is always existing, just for type
+                    const startOffset = instanceStartIndex + keyTokenLength + currentLength;
+                    // TODO: check number mt:30
+                    const valueComponentTokenLength = valueComponent.token.length;
+                    let color;
+                    switch(valueComponent.type){
+                        case 'function':
+                            if ([
+                                'rgb',
+                                'rgba',
+                                'hsl',
+                                'hsla',
+                                'hwb',
+                                'lab',
+                                'lch',
+                                'oklab',
+                                'oklch',
+                                'color'
+                            ].includes(valueComponent.name)) {
+                                color = new Color(valueComponent.text);
+                            } else if (valueComponent.children.length) {
+                                currentLength += valueComponent.name.length + 1; // function name + '('
+                                valueComponent.children.forEach(resolveValueComponent);
+                            }
+                            break;
+                        case 'variable':
+                            if (valueComponent.variable?.type === 'color') {
+                                color = new Color(valueComponent.text);
+                            }
+                            break;
+                        case 'string':
+                            if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                                color = new Color(valueComponent.text);
+                            }
+                            break;
+                    }
+                    // check if rgba is valid
+                    if (color) {
+                        const rgbaColor = color.to('srgb');
+                        colorInformations.push({
+                            range: {
+                                start: document.positionAt(startOffset),
+                                end: document.positionAt(startOffset + valueComponentTokenLength)
+                            },
+                            color: {
+                                red: rgbaColor.r,
+                                green: rgbaColor.g,
+                                blue: rgbaColor.b,
+                                alpha: Number(rgbaColor.alpha)
+                            }
+                        });
+                    }
+                    currentLength += valueComponentTokenLength || 0;
+                };
+                rule.valueComponents.forEach(resolveValueComponent);
+            }
         }
-    }
+    } catch (e) {}
     const colorIndexSet = new Set();
     return colorInformations.filter((item)=>{
         if (colorIndexSet.has(item.range.start)) {

package/dist/utils/convert-color-token.cjs

@@ -1,28 +1,60 @@
 'use strict';
 
-var convertColorSpace = require('./convert-color-space.cjs');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Color = require('colorjs.io');
 
 function convertColorByToken(color, colorToken, css) {
     const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
-    let outputColorSpace = 'hex';
+    let outputSpace = 'srgb';
     switch(valueComponent?.type){
         case 'function':
-            outputColorSpace = valueComponent.name;
+            outputSpace = valueComponent.name;
             break;
         case 'variable':
-            outputColorSpace = valueComponent.variable?.space;
+            outputSpace = valueComponent.variable?.space;
             break;
         case 'string':
-            outputColorSpace = 'hex';
+            outputSpace = 'srgb';
             break;
     }
-    return convertColorSpace({
-        r: color.red,
-        g: color.green,
-        b: color.blue,
-        alpha: color.alpha,
-        mode: 'rgb'
-    }, outputColorSpace);
+    outputSpace = normalizeCSSColorFunctionName(outputSpace);
+    if (!outputSpace) {
+        return;
+    }
+    return new Color({
+        space: 'srgb',
+        coords: [
+            color.red,
+            color.green,
+            color.blue
+        ],
+        alpha: color.alpha
+    }).to(outputSpace).toString({
+        format: 'css',
+        precision: 4,
+        inGamut: false
+    }).replace(' / ', '/').replaceAll(' ', '|');
+}
+function normalizeCSSColorFunctionName(fn) {
+    switch(fn){
+        case 'rgb':
+        case 'rgba':
+            return 'srgb';
+        case 'hsla':
+            return 'hsl';
+        case 'display-p3':
+        case 'p3':
+            return 'p3';
+        case 'rec2020':
+        case 'rec.2020':
+            return 'rec2020';
+        case 'color':
+            return '';
+        default:
+            return fn;
+    }
 }
 
-module.exports = convertColorByToken;
+exports.default = convertColorByToken;
+exports.normalizeCSSColorFunctionName = normalizeCSSColorFunctionName;

package/dist/utils/convert-color-token.d.ts

@@ -1,3 +1,4 @@
 import type { MasterCSS } from '@master/css';
 import type { ColorPresentationParams } from 'vscode-languageserver-protocol';
 export default function convertColorByToken(color: ColorPresentationParams['color'], colorToken: string, css: MasterCSS): string | undefined;
+export declare function normalizeCSSColorFunctionName(fn: string): string;

package/dist/utils/convert-color-token.mjs

@@ -1,26 +1,55 @@
-import convertColorSpace from './convert-color-space.mjs';
+import Color from 'colorjs.io';
 
 function convertColorByToken(color, colorToken, css) {
     const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
-    let outputColorSpace = 'hex';
+    let outputSpace = 'srgb';
     switch(valueComponent?.type){
         case 'function':
-            outputColorSpace = valueComponent.name;
+            outputSpace = valueComponent.name;
             break;
         case 'variable':
-            outputColorSpace = valueComponent.variable?.space;
+            outputSpace = valueComponent.variable?.space;
             break;
         case 'string':
-            outputColorSpace = 'hex';
+            outputSpace = 'srgb';
             break;
     }
-    return convertColorSpace({
-        r: color.red,
-        g: color.green,
-        b: color.blue,
-        alpha: color.alpha,
-        mode: 'rgb'
-    }, outputColorSpace);
+    outputSpace = normalizeCSSColorFunctionName(outputSpace);
+    if (!outputSpace) {
+        return;
+    }
+    return new Color({
+        space: 'srgb',
+        coords: [
+            color.red,
+            color.green,
+            color.blue
+        ],
+        alpha: color.alpha
+    }).to(outputSpace).toString({
+        format: 'css',
+        precision: 4,
+        inGamut: false
+    }).replace(' / ', '/').replaceAll(' ', '|');
+}
+function normalizeCSSColorFunctionName(fn) {
+    switch(fn){
+        case 'rgb':
+        case 'rgba':
+            return 'srgb';
+        case 'hsla':
+            return 'hsl';
+        case 'display-p3':
+        case 'p3':
+            return 'p3';
+        case 'rec2020':
+        case 'rec.2020':
+            return 'rec2020';
+        case 'color':
+            return '';
+        default:
+            return fn;
+    }
 }
 
-export { convertColorByToken as default };
+export { convertColorByToken as default, normalizeCSSColorFunctionName };

package/dist/utils/get-color-completion-items.cjs

@@ -4,7 +4,7 @@ var css = require('@master/css');
 var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
 var sortCompletionItems = require('./sort-completion-items.cjs');
 
-function getColorCompletionItems(css$1 = new css.MasterCSS()) {
+function getColorCompletionItems(css$1 = css.createCSS()) {
     const completionItems = [];
     css$1.variables.forEach((eachVariable, eachVariableName)=>{
         if (eachVariable.type === 'color') {

package/dist/utils/get-color-completion-items.mjs

@@ -1,8 +1,8 @@
-import { MasterCSS } from '@master/css';
+import { createCSS } from '@master/css';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
 
-function getColorCompletionItems(css = new MasterCSS()) {
+function getColorCompletionItems(css = createCSS()) {
     const completionItems = [];
     css.variables.forEach((eachVariable, eachVariableName)=>{
         if (eachVariable.type === 'color') {

package/dist/utils/get-css-data-documentation.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var beautifyCss = require('./beautify-css.cjs');
-var css = require('@master/css');
 
 function getCSSDataDocumentation(data, additional) {
     const values = [];
@@ -30,7 +29,7 @@ function getCSSDataDocumentation(data, additional) {
     if (additional?.docs) {
         references.unshift({
             name: 'Master CSS',
-            url: new URL(additional.docs, css.OFFICIAL_URL).href
+            url: new URL(additional.docs, 'https://rc.css.master.co').href
         });
     }
     if (references.length) {
@@ -64,8 +63,7 @@ function getEntryStatus(status) {
     }
 }
 function textToMarkedString(text) {
-    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
-    ;
+    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&'); // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
     return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 function getBrowserLabel(browsers = []) {

package/dist/utils/get-css-data-documentation.mjs

@@ -1,5 +1,4 @@
 import beautifyCSS from './beautify-css.mjs';
-import { OFFICIAL_URL } from '@master/css';
 
 function getCSSDataDocumentation(data, additional) {
     const values = [];
@@ -28,7 +27,7 @@ function getCSSDataDocumentation(data, additional) {
     if (additional?.docs) {
         references.unshift({
             name: 'Master CSS',
-            url: new URL(additional.docs, OFFICIAL_URL).href
+            url: new URL(additional.docs, 'https://rc.css.master.co').href
         });
     }
     if (references.length) {
@@ -62,8 +61,7 @@ function getEntryStatus(status) {
     }
 }
 function textToMarkedString(text) {
-    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
-    ;
+    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&'); // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
     return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 function getBrowserLabel(browsers = []) {

package/dist/utils/get-main-completion-items.cjs

@@ -7,7 +7,7 @@ var sortCompletionItems = require('./sort-completion-items.cjs');
 var getUtilityInfo = require('./get-utility-info.cjs');
 var cssDataProvider = require('./css-data-provider.cjs');
 
-function getMainCompletionItems(css$1 = new css.MasterCSS()) {
+function getMainCompletionItems(css$1 = css.createCSS()) {
     const completionItems = [];
     const addedKeys = new Set();
     for (const eachDefinedRule of css$1.definedRules){
@@ -58,25 +58,25 @@ function getMainCompletionItems(css$1 = new css.MasterCSS()) {
                     });
                 });
             }
-            if (eachDefinedRule.definition?.ambiguousKeys?.length) {
-                for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
-                    if (addedKeys.has(ambiguousKey)) {
+            if (eachDefinedRule.definition?.aliasGroups?.length) {
+                for (const aliasGroup of eachDefinedRule.definition.aliasGroups){
+                    if (addedKeys.has(aliasGroup)) {
                         continue;
                     }
-                    addedKeys.add(ambiguousKey);
+                    addedKeys.add(aliasGroup);
                 }
             }
         }
     }
-    addedKeys.forEach((ambiguousKey)=>{
+    addedKeys.forEach((aliasGroup)=>{
         /**
          * Ambiguous keys are added to the completion list
          * @example text: t:
          */ completionItems.push({
             kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
             detail: 'ambiguous key',
-            label: ambiguousKey + ':',
-            sortText: ambiguousKey,
+            label: aliasGroup + ':',
+            sortText: aliasGroup,
             command: {
                 title: 'triggerSuggest',
                 command: 'editor.action.triggerSuggest'

package/dist/utils/get-main-completion-items.mjs

@@ -1,11 +1,11 @@
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
-import { MasterCSS, SyntaxRuleType, generateCSS, isCoreRule } from '@master/css';
+import { createCSS, SyntaxRuleType, generateCSS, isCoreRule } from '@master/css';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 import sortCompletionItems from './sort-completion-items.mjs';
 import getUtilityInfo from './get-utility-info.mjs';
 import cssDataProvider from './css-data-provider.mjs';
 
-function getMainCompletionItems(css = new MasterCSS()) {
+function getMainCompletionItems(css = createCSS()) {
     const completionItems = [];
     const addedKeys = new Set();
     for (const eachDefinedRule of css.definedRules){
@@ -56,25 +56,25 @@ function getMainCompletionItems(css = new MasterCSS()) {
                     });
                 });
             }
-            if (eachDefinedRule.definition?.ambiguousKeys?.length) {
-                for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
-                    if (addedKeys.has(ambiguousKey)) {
+            if (eachDefinedRule.definition?.aliasGroups?.length) {
+                for (const aliasGroup of eachDefinedRule.definition.aliasGroups){
+                    if (addedKeys.has(aliasGroup)) {
                         continue;
                     }
-                    addedKeys.add(ambiguousKey);
+                    addedKeys.add(aliasGroup);
                 }
             }
         }
     }
-    addedKeys.forEach((ambiguousKey)=>{
+    addedKeys.forEach((aliasGroup)=>{
         /**
          * Ambiguous keys are added to the completion list
          * @example text: t:
          */ completionItems.push({
             kind: CompletionItemKind.Property,
             detail: 'ambiguous key',
-            label: ambiguousKey + ':',
-            sortText: ambiguousKey,
+            label: aliasGroup + ':',
+            sortText: aliasGroup,
             command: {
                 title: 'triggerSuggest',
                 command: 'editor.action.triggerSuggest'

package/dist/utils/get-pseudo-class-completion-items.cjs

@@ -7,7 +7,7 @@ var sortCompletionItems = require('./sort-completion-items.cjs');
 var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
 
 const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
-function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+function getPseudoClassCompletionItems(css$1 = css.createCSS(), syntax) {
     const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
         // exclude @page pseudo-classes
         if ([

package/dist/utils/get-pseudo-class-completion-items.mjs

@@ -1,11 +1,11 @@
-import { MasterCSS, generateCSS } from '@master/css';
+import { createCSS, generateCSS } from '@master/css';
 import cssDataProvider from './css-data-provider.mjs';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 
 const kind = CompletionItemKind.Function;
-function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
+function getPseudoClassCompletionItems(css = createCSS(), syntax) {
     const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
         // exclude @page pseudo-classes
         if ([

package/dist/utils/get-pseudo-element-completion-items.cjs

@@ -7,7 +7,7 @@ var sortCompletionItems = require('./sort-completion-items.cjs');
 var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
 
 const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
-function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+function getPseudoElementCompletionItems(css$1 = css.createCSS(), syntax) {
     const pseudoElementDataList = cssDataProvider.providePseudoElements();
     const completionItems = pseudoElementDataList.map((data)=>{
         // fix https://github.com/microsoft/vscode-custom-data/issues/78

package/dist/utils/get-pseudo-element-completion-items.mjs

@@ -1,11 +1,11 @@
-import { MasterCSS, generateCSS } from '@master/css';
+import { createCSS, generateCSS } from '@master/css';
 import cssDataProvider from './css-data-provider.mjs';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 
 const kind = CompletionItemKind.Function;
-function getPseudoElementCompletionItems(css = new MasterCSS(), syntax) {
+function getPseudoElementCompletionItems(css = createCSS(), syntax) {
     const pseudoElementDataList = cssDataProvider.providePseudoElements();
     const completionItems = pseudoElementDataList.map((data)=>{
         // fix https://github.com/microsoft/vscode-custom-data/issues/78

package/dist/utils/get-query-completion-items.cjs

@@ -6,7 +6,7 @@ var sortCompletionItems = require('./sort-completion-items.cjs');
 var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
 var cssDataProvider = require('./css-data-provider.cjs');
 
-function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter = css.AT_SIGN, syntax) {
+function getQueryCompletionItems(css$1 = css.createCSS(), triggerCharacter = css.AT_SIGN, syntax) {
     const atDataList = cssDataProvider.provideAtDirectives();
     const completionItems = [];
     if (!css.QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {

package/dist/utils/get-query-completion-items.mjs

@@ -1,10 +1,10 @@
-import { MasterCSS, AT_SIGN, QUERY_COMPARISON_OPERATORS, generateCSS, QUERY_LOGICAL_OPERATORS, generateAt, parseAt, getSingleAtNumberRuleNode } from '@master/css';
+import { createCSS, AT_SIGN, QUERY_COMPARISON_OPERATORS, generateCSS, QUERY_LOGICAL_OPERATORS, generateAt, parseAt, getSingleAtNumberRuleNode } from '@master/css';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 import cssDataProvider from './css-data-provider.mjs';
 
-function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SIGN, syntax) {
+function getQueryCompletionItems(css = createCSS(), triggerCharacter = AT_SIGN, syntax) {
     const atDataList = cssDataProvider.provideAtDirectives();
     const completionItems = [];
     if (!QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {

package/dist/utils/get-utility-info.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
+var css = require('@master/css');
 var cssDataProvider = require('./css-data-provider.cjs');
 
-function getUtilityInfo(syntax, css = new MasterCSS()) {
+function getUtilityInfo(syntax, css$1 = css.createCSS()) {
     const nativeProperties = cssDataProvider.provideProperties();
     const declarations = syntax.definition.declarations;
     const propsLength = Object.keys(declarations || {}).length;

package/dist/utils/get-utility-info.mjs

@@ -1,6 +1,7 @@
+import { createCSS } from '@master/css';
 import cssDataProvider from './css-data-provider.mjs';
 
-function getUtilityInfo(syntax, css = new MasterCSS()) {
+function getUtilityInfo(syntax, css = createCSS()) {
     const nativeProperties = cssDataProvider.provideProperties();
     const declarations = syntax.definition.declarations;
     const propsLength = Object.keys(declarations || {}).length;

package/dist/utils/get-value-completion-items.cjs

@@ -10,7 +10,7 @@ const SCOPED_VARIABLE_PRIORITY = 'aaaa';
 const AMBIGUOUS_PRIORITY = 'bbbb';
 const NATIVE_PRIORITY = 'ccccc';
 const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
-function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
+function getValueCompletionItems(css$1 = css.createCSS(), ruleKey) {
     const nativeProperties = cssDataProvider.provideProperties();
     const completionItems = [];
     const nativeKey = css$1.definedRules.find(({ keys })=>keys.includes(ruleKey))?.id;
@@ -78,10 +78,9 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
         /**
          * Scoped variables
          * @example box: + content -> box-sizing:content
-         */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey)) {
-            for(const variableName in eachDefinedRule.variables){
-                if (completionItems.find(({ label })=>label === variableName)) continue;
-                const variable = eachDefinedRule.variables[variableName];
+         */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.aliasGroups?.includes(ruleKey)) {
+            eachDefinedRule.variables?.forEach((variable, variableName)=>{
+                if (completionItems.find(({ label })=>label === variableName)) return;
                 const completionItem = generateVariableCompletionItem(variable, {
                     scoped: true
                 });
@@ -91,12 +90,12 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
                     completionItem.detail = '(scope) ' + completionItem.detail;
                     completionItems.push(completionItem);
                 }
-            }
+            });
         }
         /**
          * @example animation:fade
          */ if (eachDefinedRule.keys.includes(ruleKey) && eachDefinedRule.definition.includeAnimations) {
-            css$1.animations.forEach((animation, animationName)=>{
+            css$1.animations.forEach((_, animationName)=>{
                 const isNative = eachDefinedRule.definition.type && [
                     css.SyntaxRuleType.Native,
                     css.SyntaxRuleType.NativeShorthand
@@ -118,30 +117,30 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
          * Ambiguous values
          * @example text: -> center, left, right, justify
          * @example t: -> center, left, right, justify
-         */ if (eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey) && eachDefinedRule.definition.ambiguousValues?.length) {
+         */ if (eachDefinedRule.definition.aliasGroups?.includes(ruleKey) && eachDefinedRule.definition.values?.length) {
             const nativePropertyData = nativeProperties.find((x)=>x.name === eachDefinedRule.id);
-            for (const ambiguousValue of eachDefinedRule.definition.ambiguousValues){
-                if (typeof ambiguousValue !== 'string') continue;
-                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === ambiguousValue);
+            for (const value of eachDefinedRule.definition.values){
+                if (typeof value !== 'string') continue;
+                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === value);
                 const isNative = eachDefinedRule.definition.type && [
                     css.SyntaxRuleType.Native,
                     css.SyntaxRuleType.NativeShorthand
                 ].includes(eachDefinedRule.definition.type);
                 completionItems.push({
-                    label: ambiguousValue,
+                    label: value,
                     kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
-                    sortText: AMBIGUOUS_PRIORITY + ambiguousValue,
+                    sortText: AMBIGUOUS_PRIORITY + value,
                     documentation: getCssDataDocumentation.getCSSDataDocumentation({
                         ...nativeValueData || {},
                         // use nativePropertyData.reference because nativeValueData does not have references
                         references: nativePropertyData?.references
                     }, {
                         generatedCSS: css.generateCSS([
-                            ruleKey + ':' + ambiguousValue
+                            ruleKey + ':' + value
                         ], css$1),
                         docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
                     }),
-                    detail: isNative ? eachDefinedRule.id + ': ' + ambiguousValue : ambiguousValue
+                    detail: isNative ? eachDefinedRule.id + ': ' + value : value
                 });
             }
         }

package/dist/utils/get-value-completion-items.mjs

@@ -1,6 +1,6 @@
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import cssDataProvider from './css-data-provider.mjs';
-import { MasterCSS, SyntaxRuleType, isCoreRule, generateCSS } from '@master/css';
+import { createCSS, SyntaxRuleType, isCoreRule, generateCSS } from '@master/css';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 import sortCompletionItems from './sort-completion-items.mjs';
 
@@ -8,7 +8,7 @@ const SCOPED_VARIABLE_PRIORITY = 'aaaa';
 const AMBIGUOUS_PRIORITY = 'bbbb';
 const NATIVE_PRIORITY = 'ccccc';
 const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
-function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
+function getValueCompletionItems(css = createCSS(), ruleKey) {
     const nativeProperties = cssDataProvider.provideProperties();
     const completionItems = [];
     const nativeKey = css.definedRules.find(({ keys })=>keys.includes(ruleKey))?.id;
@@ -76,10 +76,9 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
         /**
          * Scoped variables
          * @example box: + content -> box-sizing:content
-         */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey)) {
-            for(const variableName in eachDefinedRule.variables){
-                if (completionItems.find(({ label })=>label === variableName)) continue;
-                const variable = eachDefinedRule.variables[variableName];
+         */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.aliasGroups?.includes(ruleKey)) {
+            eachDefinedRule.variables?.forEach((variable, variableName)=>{
+                if (completionItems.find(({ label })=>label === variableName)) return;
                 const completionItem = generateVariableCompletionItem(variable, {
                     scoped: true
                 });
@@ -89,12 +88,12 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
                     completionItem.detail = '(scope) ' + completionItem.detail;
                     completionItems.push(completionItem);
                 }
-            }
+            });
         }
         /**
          * @example animation:fade
          */ if (eachDefinedRule.keys.includes(ruleKey) && eachDefinedRule.definition.includeAnimations) {
-            css.animations.forEach((animation, animationName)=>{
+            css.animations.forEach((_, animationName)=>{
                 const isNative = eachDefinedRule.definition.type && [
                     SyntaxRuleType.Native,
                     SyntaxRuleType.NativeShorthand
@@ -116,30 +115,30 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
          * Ambiguous values
          * @example text: -> center, left, right, justify
          * @example t: -> center, left, right, justify
-         */ if (eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey) && eachDefinedRule.definition.ambiguousValues?.length) {
+         */ if (eachDefinedRule.definition.aliasGroups?.includes(ruleKey) && eachDefinedRule.definition.values?.length) {
             const nativePropertyData = nativeProperties.find((x)=>x.name === eachDefinedRule.id);
-            for (const ambiguousValue of eachDefinedRule.definition.ambiguousValues){
-                if (typeof ambiguousValue !== 'string') continue;
-                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === ambiguousValue);
+            for (const value of eachDefinedRule.definition.values){
+                if (typeof value !== 'string') continue;
+                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === value);
                 const isNative = eachDefinedRule.definition.type && [
                     SyntaxRuleType.Native,
                     SyntaxRuleType.NativeShorthand
                 ].includes(eachDefinedRule.definition.type);
                 completionItems.push({
-                    label: ambiguousValue,
+                    label: value,
                     kind: CompletionItemKind.Value,
-                    sortText: AMBIGUOUS_PRIORITY + ambiguousValue,
+                    sortText: AMBIGUOUS_PRIORITY + value,
                     documentation: getCSSDataDocumentation({
                         ...nativeValueData || {},
                         // use nativePropertyData.reference because nativeValueData does not have references
                         references: nativePropertyData?.references
                     }, {
                         generatedCSS: generateCSS([
-                            ruleKey + ':' + ambiguousValue
+                            ruleKey + ':' + value
                         ], css),
                         docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
                     }),
-                    detail: isNative ? eachDefinedRule.id + ': ' + ambiguousValue : ambiguousValue
+                    detail: isNative ? eachDefinedRule.id + ': ' + value : value
                 });
             }
         }

package/dist/utils/query-syntax-completions.cjs

@@ -10,7 +10,7 @@ var getValueCompletionItems = require('./get-value-completion-items.cjs');
 var getQueryCompletionItems = require('./get-query-completion-items.cjs');
 var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
 
-function querySyntaxCompletions(q = '', css$1 = new css.MasterCSS()) {
+function querySyntaxCompletions(q = '', css$1 = css.createCSS()) {
     const fields = q.split(' ');
     let field = fields[fields.length - 1];
     const triggerCharacter = q.charAt(q.length - 1);

package/dist/utils/query-syntax-completions.mjs

@@ -1,14 +1,14 @@
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import getPseudoClassCompletionItems from './get-pseudo-class-completion-items.mjs';
 import getPseudoElementCompletionItems from './get-pseudo-element-completion-items.mjs';
-import { MasterCSS, SELECTOR_SIGNS, ANIMATION_SIGN, TRANSITION_SIGN, AT_SIGN, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, generateCSS } from '@master/css';
+import { createCSS, SELECTOR_SIGNS, ANIMATION_SIGN, TRANSITION_SIGN, AT_SIGN, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, generateCSS } from '@master/css';
 import { GROUP_TRIGGER_CHARACTER, SELECTOR_TRIGGER_CHARACTERS } from '../common.mjs';
 import getMainCompletionItems from './get-main-completion-items.mjs';
 import getValueCompletionItems from './get-value-completion-items.mjs';
 import getQueryCompletionItems from './get-query-completion-items.mjs';
 import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
 
-function querySyntaxCompletions(q = '', css = new MasterCSS()) {
+function querySyntaxCompletions(q = '', css = createCSS()) {
     const fields = q.split(' ');
     let field = fields[fields.length - 1];
     const triggerCharacter = q.charAt(q.length - 1);

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-language-service","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","type-check":"tsc --noEmit","lint":"eslint","test":"vitest"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/language-service"},"dependencies":{"@babel/parser":"^7.27.0","@master/css":"^2.0.0-rc.67","@techor/extend":"^3.2.0","color-convert":"^2.0.1","color-rgba":"^3.0.0","color-space":"^2.3.1","culori":"^4.0.1","js-beautify":"^1.15.4","lodash.escaperegexp":"^4.1.2","minimatch":"^10.0.1","pex-color":"^2.2.0","vscode-css-languageservice":"^6.3.4","vscode-languageserver-protocol":"^3.17.5","vscode-languageserver-textdocument":"^1.0.12"},"devDependencies":{"@types/chroma-js":"^2.4.5","@types/color-convert":"^2.0.4","@types/color-rgba":"^2.1.3","@types/culori":"^2.1.1","@types/lodash.escaperegexp":"^4.1.9","@types/vscode":"^1.99.1","shared":"^2.0.0-rc.67","vscode-languageserver":"^9.0.1"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"version":"2.0.0-rc.67"}
+{"name":"@master/css-language-service","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","type-check":"tsc --noEmit","lint":"eslint","test":"vitest"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/language-service"},"dependencies":{"@babel/parser":"^7.27.0","@master/css":"^2.0.0-rc.69","@techor/extend":"^3.2.5","color-convert":"^2.0.1","color-rgba":"^3.0.0","color-space":"^2.3.1","colorjs.io":"^0.5.2","js-beautify":"^1.15.4","lodash.escaperegexp":"^4.1.2","minimatch":"^10.0.1","pex-color":"^2.2.0","vscode-css-languageservice":"^6.3.4","vscode-languageserver-protocol":"^3.17.5","vscode-languageserver-textdocument":"^1.0.12"},"devDependencies":{"@types/chroma-js":"^2.4.5","@types/color-convert":"^2.0.4","@types/color-rgba":"^2.1.3","@types/culori":"^2.1.1","@types/lodash.escaperegexp":"^4.1.9","@types/vscode":"^1.99.1","shared":"^2.0.0-rc.69","vscode-languageserver":"^9.0.1"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"version":"2.0.0-rc.69"}

package/dist/utils/convert-color-space.cjs

@@ -1,40 +0,0 @@
-'use strict';
-
-var culori = require('culori');
-
-function convertColorSpace(rgb, targetSpace) {
-    const alphaUsed = rgb.alpha !== 1;
-    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
-    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
-    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
-    switch(targetSpace){
-        case 'hex':
-            return alphaUsed ? culori.serializeHex8(rgb) : culori.serializeHex(rgb);
-        case 'rgba':
-        case 'rgb':
-            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
-        case 'hsla':
-        case 'hsl':
-            const hsl = culori.modeHsl.fromMode.rgb(rgb);
-            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
-        case 'hwb':
-            const hwb = culori.modeHwb.fromMode.rgb(rgb);
-            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
-        case 'lab':
-            const lab = culori.modeLab.fromMode.rgb(rgb);
-            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
-        case 'lch':
-            const lch = culori.modeLch.fromMode.rgb(rgb);
-            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
-        case 'oklab':
-            const oklab = culori.modeOklab.fromMode.rgb(rgb);
-            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
-        case 'oklch':
-            const oklch = culori.modeOklch.fromMode.rgb(rgb);
-            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
-    }
-    // color()
-    return culori.formatCss(rgb).replace(' / ', '/').replace(' ', '|');
-}
-
-module.exports = convertColorSpace;

package/dist/utils/convert-color-space.d.ts

@@ -1,2 +0,0 @@
-import { type Rgb } from 'culori';
-export default function convertColorSpace(rgb: Rgb, targetSpace: any): string | undefined;

package/dist/utils/convert-color-space.mjs

@@ -1,38 +0,0 @@
-import { modeOklch, modeOklab, modeLch, modeLab, modeHwb, modeHsl, serializeHex8, serializeHex, formatCss } from 'culori';
-
-function convertColorSpace(rgb, targetSpace) {
-    const alphaUsed = rgb.alpha !== 1;
-    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
-    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
-    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
-    switch(targetSpace){
-        case 'hex':
-            return alphaUsed ? serializeHex8(rgb) : serializeHex(rgb);
-        case 'rgba':
-        case 'rgb':
-            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
-        case 'hsla':
-        case 'hsl':
-            const hsl = modeHsl.fromMode.rgb(rgb);
-            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
-        case 'hwb':
-            const hwb = modeHwb.fromMode.rgb(rgb);
-            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
-        case 'lab':
-            const lab = modeLab.fromMode.rgb(rgb);
-            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
-        case 'lch':
-            const lch = modeLch.fromMode.rgb(rgb);
-            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
-        case 'oklab':
-            const oklab = modeOklab.fromMode.rgb(rgb);
-            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
-        case 'oklch':
-            const oklch = modeOklch.fromMode.rgb(rgb);
-            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
-    }
-    // color()
-    return formatCss(rgb).replace(' / ', '/').replace(' ', '|');
-}
-
-export { convertColorSpace as default };