@tbela99/css-parser 1.1.1-alpha4 → 1.2.0

package/dist/lib/parser/parse.js

@@ -1,12 +1,12 @@
-import { isColor, parseColor, isIdent, mediaTypes, isDimension, parseDimension, isPseudo, pseudoElements, isAtKeyword, isFunction, isNumber, isPercentage, isFlex, isHexColor, isHash, isIdentStart, isIdentColor, mathFuncs } from '../syntax/syntax.js';
-import './utils/config.js';
-import { EnumToken, ValidationLevel, SyntaxValidationResult } from '../ast/types.js';
+import { isIdentStart, isIdent, isIdentColor, mathFuncs, isColor, parseColor, isPseudo, pseudoElements, isAtKeyword, isFunction, isNumber, isPercentage, isFlex, isDimension, parseDimension, isHexColor, isHash, mediaTypes } from '../syntax/syntax.js';
+import { EnumToken, ColorType, ValidationLevel, SyntaxValidationResult } from '../ast/types.js';
 import { minify, definedPropertySettings, combinators } from '../ast/minify.js';
 import { walkValues, walk, WalkerOptionEnum } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
+import './utils/config.js';
 import { parseDeclarationNode } from './utils/declaration.js';
 import { renderToken } from '../renderer/render.js';
-import { funcLike, ColorKind, COLORS_NAMES, systemColors, deprecatedSystemColors, colorsFunc } from '../renderer/color/utils/constants.js';
+import { funcLike, timingFunc, timelineFunc, COLORS_NAMES, systemColors, deprecatedSystemColors, colorsFunc } from '../syntax/color/utils/constants.js';
 import { buildExpression } from '../ast/math/expression.js';
 import { tokenize } from './tokenize.js';
 import '../validation/config.js';
@@ -234,7 +234,6 @@ async function doParse(iterator, options = {}) {
                 }
             }
             catch (error) {
-                // console.error(error);
                 // @ts-ignore
                 errors.push({ action: 'ignore', message: 'doParse: ' + error.message, error });
             }
@@ -485,7 +484,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
         }
         const t = parseAtRulePrelude(parseTokens(tokens, { minify: options.minify }), atRule);
         const raw = t.reduce((acc, curr) => {
-            acc.push(renderToken(curr, { removeComments: true }));
+            acc.push(renderToken(curr, { removeComments: true, convertColor: false }));
             return acc;
         }, []);
         const nam = renderToken(atRule, { removeComments: true });
@@ -507,7 +506,6 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
             node.loc = loc;
             node.loc.end = { ...map.get(delim).end };
         }
-        // if (options.validation) {
         let isValid = true;
         if (node.nam == 'else') {
             const prev = getLastNode(context);
@@ -544,6 +542,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
         else {
             node.val = node.tokens.reduce((acc, curr) => acc + renderToken(curr, {
                 minify: false,
+                convertColor: false,
                 removeComments: true
             }), '');
         }
@@ -675,7 +674,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                 if (name == null && [EnumToken.IdenTokenType, EnumToken.DashedIdenTokenType].includes(tokens[i].typ)) {
                     name = tokens.slice(0, i + 1);
                 }
-                else if (name == null && tokens[i].typ == EnumToken.ColorTokenType && [ColorKind.SYS, ColorKind.DPSYS].includes(tokens[i].kin)) {
+                else if (name == null && tokens[i].typ == EnumToken.ColorTokenType && [ColorType.SYS, ColorType.DPSYS].includes(tokens[i].kin)) {
                     name = tokens.slice(0, i + 1);
                     tokens[i].typ = EnumToken.IdenTokenType;
                 }
@@ -784,12 +783,11 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                         value: valid.valid == SyntaxValidationResult.Valid
                     });
                     if (valid.valid == SyntaxValidationResult.Drop) {
-                        // console.error({result, valid});
-                        // console.error(JSON.stringify({result, options, valid}, null, 1));
                         errors.push({
                             action: 'drop',
                             message: valid.error,
                             syntax: valid.syntax,
+                            node: valid.node,
                             location: map.get(valid.node) ?? valid.node?.loc ?? result.loc ?? location
                         });
                         if (!options.lenient) {
@@ -950,10 +948,7 @@ function parseAtRulePrelude(tokens, atRule) {
                 break;
             }
             if (valueIndex == -1) {
-                // @ts-ignore
-                // value.chi[nameIndex].typ = EnumToken.MediaFeatureTokenType;
                 continue;
-                // return tokens;
             }
             for (i = nameIndex + 1; i < value.chi.length; i++) {
                 if ([
@@ -965,7 +960,7 @@ function parseAtRulePrelude(tokens, atRule) {
                     const node = value.chi.splice(nameIndex, 1)[0];
                     // 'background'
                     // @ts-ignore
-                    if (node.typ == EnumToken.ColorTokenType && node.kin == ColorKind.DPSYS) {
+                    if (node.typ == EnumToken.ColorTokenType && node.kin == ColorType.DPSYS) {
                         // @ts-ignore
                         delete node.kin;
                         node.typ = EnumToken.IdenTokenType;
@@ -992,7 +987,7 @@ function parseAtRulePrelude(tokens, atRule) {
  * @param tokens
  */
 function parseSelector(tokens) {
-    for (const { value, previousValue, nextValue, parent } of walkValues(tokens)) {
+    for (const { value, parent } of walkValues(tokens)) {
         if (value.typ == EnumToken.CommentTokenType ||
             value.typ == EnumToken.WhitespaceTokenType ||
             value.typ == EnumToken.CommaTokenType ||
@@ -1005,43 +1000,6 @@ function parseSelector(tokens) {
                 // @ts-ignore
                 value.typ = EnumToken.ChildCombinatorTokenType;
             }
-            // @ts-ignore
-            else if (value.typ == EnumToken.WhitespaceTokenType) {
-                if (nextValue != null && nextValue.typ == EnumToken.LiteralTokenType) {
-                    if (['>', '+', '~'].includes(nextValue.val)) {
-                        switch (value.val) {
-                            case '>':
-                                // @ts-ignore
-                                nextValue.typ = EnumToken.ChildCombinatorTokenType;
-                                break;
-                            case '+':
-                                // @ts-ignore
-                                nextValue.typ = EnumToken.NextSiblingCombinatorTokenType;
-                                break;
-                            case '~':
-                                // @ts-ignore
-                                nextValue.typ = EnumToken.SubsequentSiblingCombinatorTokenType;
-                                break;
-                        }
-                        // @ts-ignore
-                        delete nextValue.val;
-                        continue;
-                    }
-                }
-                if (previousValue != null && [
-                    EnumToken.ChildCombinatorTokenType,
-                    EnumToken.DescendantCombinatorTokenType,
-                    EnumToken.NextSiblingCombinatorTokenType,
-                    EnumToken.SubsequentSiblingCombinatorTokenType,
-                    EnumToken.ColumnCombinatorTokenType,
-                    EnumToken.NameSpaceAttributeTokenType,
-                    EnumToken.CommaTokenType
-                ].includes(previousValue.typ)) {
-                    continue;
-                }
-                // @ts-ignore
-                value.typ = EnumToken.DescendantCombinatorTokenType;
-            }
             else if (value.typ == EnumToken.LiteralTokenType) {
                 if (value.val.charAt(0) == '&') {
                     // @ts-ignore
@@ -1059,12 +1017,7 @@ function parseSelector(tokens) {
                         value.typ = EnumToken.ClassSelectorTokenType;
                     }
                 }
-                // @ts-ignore
-                if (value.typ == EnumToken.DelimTokenType) {
-                    // @ts-ignore
-                    value.typ = EnumToken.NextSiblingCombinatorTokenType;
-                }
-                else if (['*', '>', '+', '~'].includes(value.val)) {
+                if (['*', '>', '+', '~'].includes(value.val)) {
                     switch (value.val) {
                         case '*':
                             // @ts-ignore
@@ -1084,13 +1037,12 @@ function parseSelector(tokens) {
                             break;
                     }
                     // @ts-ignore
-                    // @ts-ignore
                     delete value.val;
                 }
             }
             else if (value.typ == EnumToken.ColorTokenType) {
-                if (value.kin == ColorKind.LIT || value.kin == ColorKind.HEX || value.kin == ColorKind.SYS || value.kin == ColorKind.DPSYS) {
-                    if (value.kin == ColorKind.HEX) {
+                if (value.kin == ColorType.LIT || value.kin == ColorType.HEX || value.kin == ColorType.SYS || value.kin == ColorType.DPSYS) {
+                    if (value.kin == ColorType.HEX) {
                         if (!isIdent(value.val.slice(1))) {
                             continue;
                         }
@@ -1130,10 +1082,6 @@ function parseSelector(tokens) {
     }
     return tokens;
 }
-// export async function parseDeclarations(src: string, options: ParserOptions = {}): Promise<AstDeclaration[]> {
-//
-//     return doParse(`.x{${src}`, options).then((result: ParseResult) => <AstDeclaration[]>(<AstRule>result.ast.chi[0]).chi.filter(t => t.typ == EnumToken.DeclarationNodeType));
-// }
 /**
  * parse css string
  * @param src
@@ -1223,14 +1171,14 @@ function getTokenType(val, hint) {
                 chi: []
             };
         }
-        if (['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps', 'cubic-bezier'].includes(val)) {
+        if (timingFunc.includes(val.toLowerCase())) {
             return {
                 typ: EnumToken.TimingFunctionTokenType,
                 val,
                 chi: []
             };
         }
-        if (['view', 'scroll'].includes(val)) {
+        if (timelineFunc.includes(val)) {
             return {
                 typ: EnumToken.TimelineFunctionTokenType,
                 val,
@@ -1269,7 +1217,7 @@ function getTokenType(val, hint) {
         return {
             typ: EnumToken.ColorTokenType,
             val: v,
-            kin: ColorKind.LIT
+            kin: ColorType.LIT
         };
     }
     if (isIdent(val)) {
@@ -1277,14 +1225,14 @@ function getTokenType(val, hint) {
             return {
                 typ: EnumToken.ColorTokenType,
                 val,
-                kin: ColorKind.SYS
+                kin: ColorType.SYS
             };
         }
         if (deprecatedSystemColors.has(v)) {
             return {
                 typ: EnumToken.ColorTokenType,
                 val,
-                kin: ColorKind.DPSYS
+                kin: ColorType.DPSYS
             };
         }
         return {
@@ -1296,7 +1244,7 @@ function getTokenType(val, hint) {
         return {
             typ: EnumToken.ColorTokenType,
             val,
-            kin: ColorKind.HEX
+            kin: ColorType.HEX
         };
     }
     if (val.charAt(0) == '#' && isHash(val)) {
@@ -1373,7 +1321,6 @@ function parseTokens(tokens, options = {}) {
             }
             // @ts-ignore
             if (attr.chi.length > 1) {
-                /*(<AttrToken>t).chi =*/
                 // @ts-ignore
                 parseTokens(attr.chi, t.typ);
             }
@@ -1593,7 +1540,6 @@ function parseTokens(tokens, options = {}) {
             // @ts-ignore
             if (t.chi.length > 0) {
                 if (t.typ == EnumToken.PseudoClassFuncTokenType && t.val == ':is' && options.minify) {
-                    //
                     const count = t.chi.filter((t) => t.typ != EnumToken.CommentTokenType).length;
                     if (count == 1 ||
                         (i == 0 &&
@@ -1604,28 +1550,6 @@ function parseTokens(tokens, options = {}) {
                     }
                 }
             }
-            continue;
-        }
-        if (options.parseColor) {
-            if (t.typ == EnumToken.IdenTokenType) {
-                // named color
-                const value = t.val.toLowerCase();
-                if (value in COLORS_NAMES) {
-                    Object.assign(t, {
-                        typ: EnumToken.ColorTokenType,
-                        val: COLORS_NAMES[value].length < value.length ? COLORS_NAMES[value] : value,
-                        kin: ColorKind.HEX
-                    });
-                }
-                continue;
-            }
-            if (t.typ == EnumToken.HashTokenType && isHexColor(t.val)) {
-                // hex color
-                // @ts-ignore
-                t.typ = EnumToken.ColorTokenType;
-                // @ts-ignore
-                t.kin = ColorKind.HEX;
-            }
         }
     }
     return tokens;

package/dist/lib/parser/tokenize.js

@@ -4,7 +4,7 @@ import '../ast/walk.js';
 import './parse.js';
 import './utils/config.js';
 import { isWhiteSpace, isIdentStart, isIdent, isNewLine, isDigit, isNonPrintable } from '../syntax/syntax.js';
-import '../renderer/color/utils/constants.js';
+import '../syntax/color/utils/constants.js';
 import '../renderer/sourcemap/lib/encode.js';
 
 var TokenMap;
@@ -92,11 +92,6 @@ function* consumeString(quoteStr, buffer, parseInfo) {
                 }
                 break;
             }
-            if (i == 1) {
-                buffer += value + sequence[i];
-                next(parseInfo, 2);
-                continue;
-            }
             if (escapeSequence.trimEnd().length > 0) {
                 const codepoint = parseInt(escapeSequence, 16);
                 if (codepoint == 0 ||
@@ -119,7 +114,6 @@ function* consumeString(quoteStr, buffer, parseInfo) {
             buffer += value;
             yield pushToken(buffer, parseInfo, hasNewLine ? EnumToken.BadStringTokenType : EnumToken.StringTokenType);
             next(parseInfo);
-            // i += value.length;
             buffer = '';
             return;
         }
@@ -161,15 +155,9 @@ function prev(parseInfo, count = 1) {
 function next(parseInfo, count = 1) {
     let char = '';
     let chr = '';
-    if (count < 0) {
-        return '';
-    }
     while (count-- && (chr = parseInfo.stream.charAt(parseInfo.currentPosition.ind + 1))) {
         char += chr;
         const codepoint = parseInfo.stream.charCodeAt(++parseInfo.currentPosition.ind);
-        if (isNaN(codepoint)) {
-            return char;
-        }
         if (isNewLine(codepoint)) {
             parseInfo.currentPosition.lin++;
             parseInfo.currentPosition.col = 0;

package/dist/lib/parser/utils/declaration.js

@@ -5,7 +5,7 @@ import '../parse.js';
 import '../tokenize.js';
 import './config.js';
 import { isWhiteSpace } from '../../syntax/syntax.js';
-import '../../renderer/color/utils/constants.js';
+import '../../syntax/color/utils/constants.js';
 import '../../renderer/sourcemap/lib/encode.js';
 
 function parseDeclarationNode(node, errors, location) {

package/dist/lib/parser/utils/type.js

@@ -5,7 +5,7 @@ import '../parse.js';
 import '../tokenize.js';
 import './config.js';
 import { mathFuncs } from '../../syntax/syntax.js';
-import '../../renderer/color/utils/constants.js';
+import '../../syntax/color/utils/constants.js';
 import '../../renderer/sourcemap/lib/encode.js';
 
 function matchType(val, properties) {

package/dist/lib/renderer/render.js

@@ -1,33 +1,13 @@
-import { getAngle, color2srgbvalues, clamp } from './color/color.js';
-import { colorsFunc, ColorKind, colorFuncColorSpace, COLORS_NAMES, funcLike } from './color/utils/constants.js';
-import { getComponents } from './color/utils/components.js';
-import { reduceHexValue, srgb2hexvalues, rgb2hex, hsl2hex, hwb2hex, cmyk2hex, oklab2hex, oklch2hex, lab2hex, lch2hex } from './color/hex.js';
-import { EnumToken } from '../ast/types.js';
+import { getAngle, convertColor } from '../syntax/color/color.js';
+import { colorsFunc, funcLike } from '../syntax/color/utils/constants.js';
+import { EnumToken, ColorType } from '../ast/types.js';
 import '../ast/minify.js';
 import '../ast/walk.js';
 import { expand } from '../ast/expand.js';
-import { colorMix } from './color/color-mix.js';
-import { parseRelativeColor } from './color/relativecolor.js';
-import { SourceMap } from './sourcemap/sourcemap.js';
 import { isColor, pseudoElements, mathFuncs, isNewLine } from '../syntax/syntax.js';
+import { minifyNumber } from '../syntax/utils.js';
+import { SourceMap } from './sourcemap/sourcemap.js';
 
-function reduceNumber(val) {
-    val = String(+val);
-    if (val === '0') {
-        return '0';
-    }
-    const chr = val.charAt(0);
-    if (chr == '-') {
-        const slice = val.slice(0, 2);
-        if (slice == '-0') {
-            return val.length == 2 ? '0' : '-' + val.slice(2);
-        }
-    }
-    if (chr == '0') {
-        return val.slice(1);
-    }
-    return val;
-}
 function update(position, str) {
     let i = 0;
     for (; i < str.length; i++) {
@@ -236,10 +216,8 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
         case EnumToken.InvalidDeclarationNodeType:
         case EnumToken.InvalidRuleTokenType:
         case EnumToken.InvalidAtRuleTokenType:
-            return '';
         default:
-            // return renderToken(data as Token, options, cache, reducer, errors);
-            throw new Error(`render: unexpected token ${JSON.stringify(data, null, 1)}`);
+            return '';
     }
 }
 /**
@@ -315,7 +293,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.FractionTokenType:
             const fraction = renderToken(token.l) + '/' + renderToken(token.r);
             if (+token.r.val != 0) {
-                const value = reduceNumber(+token.l.val / +token.r.val);
+                const value = minifyNumber(+token.l.val / +token.r.val);
                 if (value.length <= fraction.length) {
                     return value;
                 }
@@ -331,143 +309,41 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
-            if (token.kin == ColorKind.LIGHT_DARK || ('chi' in token && !options.convertColor)) {
+            if (token.kin == ColorType.LIGHT_DARK || ('chi' in token && options.convertColor === false)) {
                 return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
             }
-            if (options.convertColor) {
-                if (token.cal == 'mix' && token.val == 'color-mix') {
-                    const children = token.chi.reduce((acc, t) => {
-                        if (t.typ == EnumToken.ColorTokenType) {
-                            acc.push([t]);
-                        }
-                        else {
-                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType].includes(t.typ)) {
-                                acc[acc.length - 1].push(t);
-                            }
-                        }
-                        return acc;
-                    }, [[]]);
-                    const value = colorMix(children[0][1], children[0][2], children[1][0], children[1][1], children[2][0], children[2][1]);
-                    if (value != null) {
-                        token = value;
-                    }
-                    else if (!token.chi.some(t => t.typ == EnumToken.CommaTokenType)) {
-                        token.chi = children.reduce((acc, curr, index) => {
-                            if (acc.length > 0) {
-                                acc.push({ typ: EnumToken.CommaTokenType });
-                            }
-                            acc.push(...curr);
-                            return acc;
-                        }, []);
-                    }
-                }
-                if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(token.val)) {
-                    const chi = getComponents(token);
-                    const offset = token.val == 'color' ? 2 : 1;
-                    if (chi != null) {
-                        // @ts-ignore
-                        const color = chi[1];
-                        const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
-                        if (components != null) {
-                            token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
-                            delete token.cal;
-                        }
-                    }
-                }
-                if (token.val == 'color') {
-                    if (token.chi[0].typ == EnumToken.IdenTokenType && colorFuncColorSpace.includes(token.chi[0].val.toLowerCase())) {
-                        const values = color2srgbvalues(token);
-                        if (Array.isArray(values) && values.every(t => !Number.isNaN(t))) {
-                            // @ts-ignore
-                            return reduceHexValue(srgb2hexvalues(...values));
-                        }
-                    }
-                }
-                if (token.cal != null) {
-                    let slice = false;
-                    if (token.cal == 'rel') {
-                        const last = token.chi.at(-1);
-                        if ((last.typ == EnumToken.NumberTokenType && last.val == '1') || (last.typ == EnumToken.IdenTokenType && last.val == 'none')) {
-                            const prev = token.chi.at(-2);
-                            if (prev.typ == EnumToken.LiteralTokenType && prev.val == '/') {
-                                slice = true;
-                            }
-                        }
-                    }
-                    return clamp(token).val + '(' + (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
-                        const val = renderToken(curr, options, cache);
-                        if (curr.typ == EnumToken.LiteralTokenType && curr.val == '/') {
-                            return acc.trimEnd() + '/';
-                        }
-                        if (curr.typ == EnumToken.CommaTokenType) {
-                            return acc.trimEnd() + ',';
-                        }
-                        if (curr.typ == EnumToken.WhitespaceTokenType) {
-                            const v = acc.at(-1);
-                            if (v == ' ' || v == ',' || v == '/') {
-                                return acc.trimEnd();
-                            }
-                            return acc.trimEnd() + ' ';
-                        }
-                        if (acc.length > 0) {
-                            return acc + (['/', ',', ' '].includes(acc.at(-1)) ? '' : ' ') + val;
-                        }
-                        return val;
-                    }, '') + ')';
-                }
-                if (token.kin == ColorKind.LIT && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
-                    return 'currentcolor';
-                }
-                clamp(token);
-                if (Array.isArray(token.chi) && token.chi.some((t) => t.typ == EnumToken.FunctionTokenType || (t.typ == EnumToken.ColorTokenType && Array.isArray(t.chi)))) {
-                    const replaceSemiColon = /^((rgba?)|(hsla?)|(hwb)|((ok)?lab)|((ok)?lch))$/i.test(token.val);
-                    return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr, index, array) => {
-                        if (curr.typ == EnumToken.Literal && curr.val == '/') {
-                            return acc.trimEnd() + '/';
-                        }
-                        if (curr.typ == EnumToken.CommaTokenType) {
-                            return acc.trimEnd() + (replaceSemiColon ? ' ' : ',');
-                        }
-                        if (curr.typ == EnumToken.WhitespaceTokenType) {
-                            return /[,\/\s]/.test(acc.at(-1)) ? acc.trimEnd() : acc.trimEnd() + ' ';
-                        }
-                        return acc + renderToken(curr, options, cache);
-                    }, '') + ')';
-                }
-                let value = token.kin == ColorKind.HEX ? token.val.toLowerCase() : (token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : '');
-                if (token.val == 'rgb' || token.val == 'rgba') {
-                    value = rgb2hex(token);
-                }
-                else if (token.val == 'hsl' || token.val == 'hsla') {
-                    value = hsl2hex(token);
-                }
-                else if (token.val == 'hwb') {
-                    value = hwb2hex(token);
-                }
-                else if (token.val == 'device-cmyk') {
-                    value = cmyk2hex(token);
-                }
-                else if (token.val == 'oklab') {
-                    value = oklab2hex(token);
-                }
-                else if (token.val == 'oklch') {
-                    value = oklch2hex(token);
-                }
-                else if (token.val == 'lab') {
-                    value = lab2hex(token);
-                }
-                else if (token.val == 'lch') {
-                    value = lch2hex(token);
-                }
-                if (value !== '' && value != null) {
-                    return reduceHexValue(value);
+            if (options.convertColor !== false) {
+                const value = convertColor(token, typeof options.convertColor == 'boolean' ? ColorType.HEX : ColorType[ColorType[options.convertColor ?? 'HEX']?.toUpperCase?.().replaceAll?.('-', '_')] ?? ColorType.HEX);
+                //
+                if (value != null) {
+                    token = value;
                 }
             }
-            if ([ColorKind.HEX, ColorKind.LIT, ColorKind.SYS, ColorKind.DPSYS].includes(token.kin)) {
+            if ([ColorType.HEX, ColorType.LIT, ColorType.SYS, ColorType.DPSYS].includes(token.kin)) {
                 return token.val;
             }
             if (Array.isArray(token.chi)) {
-                return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr) => acc + (acc.length > 0 && !(acc.endsWith('/') || curr.typ == EnumToken.LiteralTokenType) ? ' ' : '') + renderToken(curr, options, cache), '') + ')';
+                const isLegacy = ['rgb', 'rgba', 'hsl', 'hsla'].includes(token.val.toLowerCase());
+                const useAlpha = (['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'oklab', 'oklch', 'lab', 'lch'].includes(token.val.toLowerCase()) && token.chi.length == 4) ||
+                    ('color'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0 && token.chi.length == 5);
+                return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr, index, array) => {
+                    if (/[,/]\s*$/.test(acc)) {
+                        if (curr.typ == EnumToken.WhitespaceTokenType) {
+                            return acc.trimEnd();
+                        }
+                        return acc.trimStart() + renderToken(curr, options, cache);
+                    }
+                    if (isLegacy && curr.typ == EnumToken.CommaTokenType) {
+                        return acc.trimEnd() + ' ';
+                    }
+                    if (curr.typ == EnumToken.WhitespaceTokenType) {
+                        return acc.trimEnd() + ' ';
+                    }
+                    if (curr.typ == EnumToken.CommaTokenType || (curr.typ == EnumToken.LiteralTokenType && curr.val == '/')) {
+                        return acc.trimEnd() + (curr.typ == EnumToken.CommaTokenType ? ',' : '/');
+                    }
+                    return acc.trimEnd() + (useAlpha && index == array.length - 1 ? '/' : ' ') + renderToken(curr, options, cache);
+                }, '').trimStart() + ')';
             }
         case EnumToken.ParensTokenType:
         case EnumToken.FunctionTokenType:
@@ -554,7 +430,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.DimensionTokenType:
         case EnumToken.FrequencyTokenType:
         case EnumToken.ResolutionTokenType:
-            let val = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
+            let val = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : minifyNumber(token.val);
             let unit = token.unit;
             if (token.typ == EnumToken.AngleTokenType && !val.includes('/')) {
                 const angle = getAngle(token);
@@ -566,7 +442,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     }
                     switch (u) {
                         case 'turn':
-                            v = reduceNumber(angle);
+                            v = minifyNumber(angle);
                             if (v.length + 4 < value.length) {
                                 val = v;
                                 unit = u;
@@ -574,7 +450,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                             }
                             break;
                         case 'deg':
-                            v = reduceNumber(angle * 360);
+                            v = minifyNumber(angle * 360);
                             if (v.length + 3 < value.length) {
                                 val = v;
                                 unit = u;
@@ -582,7 +458,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                             }
                             break;
                         case 'rad':
-                            v = reduceNumber(angle * (2 * Math.PI));
+                            v = minifyNumber(angle * (2 * Math.PI));
                             if (v.length + 3 < value.length) {
                                 val = v;
                                 unit = u;
@@ -590,7 +466,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                             }
                             break;
                         case 'grad':
-                            v = reduceNumber(angle * 400);
+                            v = minifyNumber(angle * 400);
                             if (v.length + 4 < value.length) {
                                 val = v;
                                 unit = u;
@@ -616,7 +492,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             if (token.typ == EnumToken.TimeTokenType) {
                 if (unit == 'ms') {
                     // @ts-ignore
-                    const v = reduceNumber(val / 1000);
+                    const v = minifyNumber(val / 1000);
                     if (v.length + 1 <= val.length) {
                         return v + 's';
                     }
@@ -631,10 +507,10 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.FlexTokenType:
         case EnumToken.PercentageTokenType:
             const uni = token.typ == EnumToken.PercentageTokenType ? '%' : 'fr';
-            const perc = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
+            const perc = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : minifyNumber(token.val);
             return options.minify && perc == '0' ? '0' : (perc.includes('/') ? perc.replace('/', uni + '/') : perc + uni);
         case EnumToken.NumberTokenType:
-            return token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
+            return token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : minifyNumber(token.val);
         case EnumToken.CommentTokenType:
             if (options.removeComments && (!options.preserveLicense || !token.val.startsWith('/*!'))) {
                 return '';
@@ -718,4 +594,4 @@ function filterValues(values) {
     return values;
 }
 
-export { doRender, filterValues, reduceNumber, renderToken };
+export { doRender, filterValues, renderToken };

package/dist/lib/{renderer → syntax}/color/a98rgb.js

@@ -8,7 +8,7 @@ import '../../parser/parse.js';
 import '../../parser/tokenize.js';
 import '../../parser/utils/config.js';
 import { srgb2xyz } from './xyz.js';
-import '../sourcemap/lib/encode.js';
+import '../../renderer/sourcemap/lib/encode.js';
 
 function a98rgb2srgbvalues(r, g, b, a = null) {
     //  @ts-ignore
@@ -16,7 +16,7 @@ function a98rgb2srgbvalues(r, g, b, a = null) {
 }
 function srgb2a98values(r, g, b, a = null) {
     // @ts-ignore
-    return la98rgb2a98rgb(xyz2la98rgb(...srgb2xyz(r, g, b, a)));
+    return la98rgb2a98rgb(...xyz2la98rgb(...srgb2xyz(r, g, b, a)));
 }
 // a98-rgb functions
 function a98rgb2la98(r, g, b, a = null) {