@tbela99/css-parser 1.0.0 → 1.1.0

package/dist/lib/renderer/color/hex.js

@@ -2,12 +2,13 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { minmax, getNumber } from './color.js';
 import { hsl2rgb, hwb2rgb, cmyk2rgb, oklab2rgb, oklch2rgb, lab2rgb, lch2rgb } from './rgb.js';
 import { NAMES_COLORS } from './utils/constants.js';
 import { getComponents } from './utils/components.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function toHexString(acc, value) {
     return acc + value.toString(16).padStart(2, '0');

package/dist/lib/renderer/color/hsl.js

@@ -7,9 +7,10 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { hslvalues } from './srgb.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function hex2hsl(token) {
     // @ts-ignore

package/dist/lib/renderer/color/hwb.js

@@ -6,9 +6,10 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { lch2srgb, lab2srgb, oklch2srgb, oklab2srgb } from './srgb.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function rgb2hwb(token) {
     // @ts-ignore

package/dist/lib/renderer/color/lab.js

@@ -9,9 +9,10 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { xyzd502srgb } from './xyzd50.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 // L: 0% = 0.0, 100% = 100.0
 // for a and b: -100% = -125, 100% = 125

package/dist/lib/renderer/color/lch.js

@@ -5,9 +5,10 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { srgb2lab, xyz2lab, oklch2lab, oklab2lab, getLABComponents, hwb2lab, hsl2lab, rgb2lab, hex2lab } from './lab.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function hex2lch(token) {
     // @ts-ignore

package/dist/lib/renderer/color/oklab.js

@@ -7,10 +7,11 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { lch2labvalues } from './lab.js';
 import { getOKLCHComponents } from './oklch.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function hex2oklab(token) {
     // @ts-ignore

package/dist/lib/renderer/color/oklch.js

@@ -5,10 +5,11 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { lab2lchvalues } from './lch.js';
 import { srgb2oklab, lch2oklab, getOKLABComponents, lab2oklab, hwb2oklab, hsl2oklab, rgb2oklab, hex2oklab } from './oklab.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function hex2oklch(token) {
     // @ts-ignore

package/dist/lib/renderer/color/p3.js

@@ -5,9 +5,10 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { srgb2xyz } from './xyz.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function p32srgbvalues(r, g, b, alpha) {
     // @ts-ignore

package/dist/lib/renderer/color/rec2020.js

@@ -5,9 +5,10 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { srgb2xyz } from './xyz.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function rec20202srgb(r, g, b, a) {
     // @ts-ignore

package/dist/lib/renderer/color/relativecolor.js

@@ -3,11 +3,12 @@ import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import { walkValues } from '../../ast/walk.js';
 import '../../parser/parse.js';
-import { mathFuncs } from '../../syntax/syntax.js';
+import '../../parser/tokenize.js';
 import '../../parser/utils/config.js';
+import { mathFuncs } from '../../syntax/syntax.js';
 import { reduceNumber } from '../render.js';
+import { ColorKind, colorRange } from './utils/constants.js';
 import { evaluateFunc, evaluate } from '../../ast/math/expression.js';
-import { colorRange } from './utils/constants.js';
 
 function parseRelativeColor(relativeKeys, original, rExp, gExp, bExp, aExp) {
     let r;
@@ -18,21 +19,23 @@ function parseRelativeColor(relativeKeys, original, rExp, gExp, bExp, aExp) {
     let values = {};
     // colorFuncColorSpace x,y,z or r,g,b
     const names = relativeKeys.startsWith('xyz') ? 'xyz' : relativeKeys.slice(-3);
-    // @ts-ignore
-    const converted = convert(original, relativeKeys);
+    const converted = convert(original, ColorKind[relativeKeys.toUpperCase().replaceAll('-', '_')]);
     if (converted == null) {
         return null;
     }
     const children = converted.chi.filter(t => ![EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType, EnumToken.CommentTokenType].includes(t.typ));
-    [r, g, b, alpha] = converted.kin == 'color' ? children.slice(1) : children;
+    [r, g, b, alpha] = converted.kin == ColorKind.COLOR ? children.slice(1) : children;
     values = {
         [names[0]]: getValue(r, converted, names[0]),
         [names[1]]: getValue(g, converted, names[1]), // string,
         [names[2]]: getValue(b, converted, names[2]),
         // @ts-ignore
-        alpha: alpha == null || (alpha.typ == EnumToken.IdenTokenType && alpha.val == 'none') ? {
+        alpha: alpha == null ? {
             typ: EnumToken.NumberTokenType,
             val: '1'
+        } : (alpha.typ == EnumToken.IdenTokenType && alpha.val == 'none') ? {
+            typ: EnumToken.NumberTokenType,
+            val: '0'
         } : (alpha.typ == EnumToken.PercentageTokenType ? {
             typ: EnumToken.NumberTokenType,
             val: String(getNumber(alpha))
@@ -43,9 +46,12 @@ function parseRelativeColor(relativeKeys, original, rExp, gExp, bExp, aExp) {
         [names[1]]: getValue(gExp, converted, names[1]),
         [names[2]]: getValue(bExp, converted, names[2]),
         // @ts-ignore
-        alpha: getValue(aExp == null || (aExp.typ == EnumToken.IdenTokenType && aExp.val == 'none') ? {
+        alpha: getValue(aExp == null ? {
             typ: EnumToken.NumberTokenType,
             val: '1'
+        } : (aExp.typ == EnumToken.IdenTokenType && aExp.val == 'none') ? {
+            typ: EnumToken.NumberTokenType,
+            val: '0'
         } : aExp)
     };
     return computeComponentValue(keys, converted, values);
@@ -56,9 +62,10 @@ function getValue(t, converted, component) {
     }
     if (t.typ == EnumToken.PercentageTokenType) {
         let value = getNumber(t);
-        if (converted.kin in colorRange) {
+        let colorSpace = ColorKind[converted.kin].toLowerCase().replaceAll('-', '_');
+        if (colorSpace in colorRange) {
             // @ts-ignore
-            value *= colorRange[converted.kin][component].at(-1);
+            value *= colorRange[colorSpace][component].at(-1);
         }
         return {
             typ: EnumToken.NumberTokenType,
@@ -71,7 +78,6 @@ function computeComponentValue(expr, converted, values) {
     for (const object of [values, expr]) {
         if ('h' in object) {
             // normalize hue
-            // @ts-ignore
             for (const k of walkValues([object.h])) {
                 if (k.value.typ == EnumToken.AngleTokenType && k.value.unit == 'deg') {
                     // @ts-ignore
@@ -159,4 +165,4 @@ function replaceValue(parent, value, newValue) {
     }
 }
 
-export { parseRelativeColor };
+export { parseRelativeColor, replaceValue };

package/dist/lib/renderer/color/rgb.js

@@ -1,19 +1,20 @@
 import { minmax } from './color.js';
-import { COLORS_NAMES } from './utils/constants.js';
+import { COLORS_NAMES, ColorKind } from './utils/constants.js';
 import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { expandHexValue } from './hex.js';
 import { hslvalues, hsl2srgbvalues, hwb2srgb, cmyk2srgb, oklab2srgb, oklch2srgb, lab2srgb, lch2srgb } from './srgb.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function srgb2rgb(value) {
     return minmax(Math.round(value * 255), 0, 255);
 }
 function hex2rgb(token) {
-    const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
+    const value = expandHexValue(token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
     const rgb = [];
     for (let i = 1; i < value.length; i += 2) {
         rgb.push(parseInt(value.slice(i, i + 2), 16));

package/dist/lib/renderer/color/srgb.js

@@ -1,10 +1,12 @@
-import { COLORS_NAMES } from './utils/constants.js';
+import { ColorKind, COLORS_NAMES } from './utils/constants.js';
 import { getComponents } from './utils/components.js';
 import { color2srgbvalues, getNumber, getAngle } from './color.js';
 import { EnumToken } from '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { expandHexValue } from './hex.js';
 import { lch2labvalues, Lab_to_sRGB, getLABComponents } from './lab.js';
 import { OKLab_to_sRGB, getOKLABComponents } from './oklab.js';
@@ -12,33 +14,32 @@ import { getLCHComponents } from './lch.js';
 import { getOKLCHComponents } from './oklch.js';
 import { XYZ_to_lin_sRGB } from './xyz.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 // from https://www.w3.org/TR/css-color-4/#color-conversion-code
 // srgb-linear -> srgb
 // 0 <= r, g, b <= 1
 function srgbvalues(token) {
     switch (token.kin) {
-        case 'lit':
-        case 'hex':
+        case ColorKind.LIT:
+        case ColorKind.HEX:
             return hex2srgb(token);
-        case 'rgb':
-        case 'rgba':
+        case ColorKind.RGB:
+        case ColorKind.RGBA:
             return rgb2srgb(token);
-        case 'hsl':
-        case 'hsla':
+        case ColorKind.HSL:
+        case ColorKind.HSLA:
             return hsl2srgb(token);
-        case 'hwb':
+        case ColorKind.HWB:
             return hwb2srgb(token);
-        case 'lab':
+        case ColorKind.LAB:
             return lab2srgb(token);
-        case 'lch':
+        case ColorKind.LCH:
             return lch2srgb(token);
-        case 'oklab':
+        case ColorKind.OKLAB:
             return oklab2srgb(token);
-        case 'oklch':
+        case ColorKind.OKLCH:
             return oklch2srgb(token);
-        case 'color':
+        case ColorKind.COLOR:
             return color2srgbvalues(token);
     }
     return null;
@@ -47,7 +48,7 @@ function rgb2srgb(token) {
     return getComponents(token)?.map?.((t, index) => index == 3 ? ((t.typ == EnumToken.IdenTokenType && t.val == 'none') ? 1 : getNumber(t)) : (t.typ == EnumToken.PercentageTokenType ? 255 : 1) * getNumber(t) / 255) ?? null;
 }
 function hex2srgb(token) {
-    const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
+    const value = expandHexValue(token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
     const rgb = [];
     for (let i = 1; i < value.length; i += 2) {
         rgb.push(parseInt(value.slice(i, i + 2), 16) / 255);
@@ -155,9 +156,9 @@ function hslvalues(token) {
     // @ts-ignore
     let l = getNumber(t);
     let a = null;
-    if (token.chi?.length == 4) {
+    if (components.length == 4) {
         // @ts-ignore
-        t = token.chi[3];
+        t = components[3];
         // @ts-ignore
         a = getNumber(t);
     }

package/dist/lib/renderer/color/utils/components.js

@@ -2,14 +2,15 @@ import { EnumToken } from '../../../ast/types.js';
 import '../../../ast/minify.js';
 import '../../../ast/walk.js';
 import '../../../parser/parse.js';
-import { COLORS_NAMES } from './constants.js';
+import '../../../parser/tokenize.js';
+import '../../../parser/utils/config.js';
+import { ColorKind, COLORS_NAMES } from './constants.js';
 import { expandHexValue } from '../hex.js';
 import '../../sourcemap/lib/encode.js';
-import '../../../parser/utils/config.js';
 
 function getComponents(token) {
-    if (token.kin == 'hex' || token.kin == 'lit') {
-        const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
+    if (token.kin == ColorKind.HEX || token.kin == ColorKind.LIT) {
+        const value = expandHexValue(token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
         // @ts-ignore
         return value.slice(1).match(/([a-fA-F0-9]{2})/g).map((t) => {
             return { typ: EnumToken.Number, val: parseInt(t, 16).toString() };
@@ -22,7 +23,7 @@ function getComponents(token) {
         ].includes(child.typ)) {
             continue;
         }
-        if (child.typ == EnumToken.ColorTokenType && child.val == 'currentcolor') {
+        if (child.typ == EnumToken.ColorTokenType && child.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
             return null;
         }
         result.push(child);

package/dist/lib/renderer/color/utils/constants.js

@@ -2,8 +2,9 @@ import { EnumToken } from '../../../ast/types.js';
 import '../../../ast/minify.js';
 import '../../../ast/walk.js';
 import '../../../parser/parse.js';
-import '../../sourcemap/lib/encode.js';
+import '../../../parser/tokenize.js';
 import '../../../parser/utils/config.js';
+import '../../sourcemap/lib/encode.js';
 
 const colorRange = {
     lab: {
@@ -27,8 +28,51 @@ const colorRange = {
         b: [0, 0.4]
     }
 };
+// xyz-d65 is an alias for xyz
+// display-p3 is an alias for srgb
+var ColorKind;
+(function (ColorKind) {
+    ColorKind[ColorKind["SYS"] = 0] = "SYS";
+    ColorKind[ColorKind["DPSYS"] = 1] = "DPSYS";
+    ColorKind[ColorKind["LIT"] = 2] = "LIT";
+    ColorKind[ColorKind["HEX"] = 3] = "HEX";
+    ColorKind[ColorKind["RGB"] = 4] = "RGB";
+    ColorKind[ColorKind["RGBA"] = 5] = "RGBA";
+    ColorKind[ColorKind["HSL"] = 6] = "HSL";
+    ColorKind[ColorKind["HSLA"] = 7] = "HSLA";
+    ColorKind[ColorKind["HWB"] = 8] = "HWB";
+    ColorKind[ColorKind["DEVICE_CMYK"] = 9] = "DEVICE_CMYK";
+    ColorKind[ColorKind["OKLAB"] = 10] = "OKLAB";
+    ColorKind[ColorKind["OKLCH"] = 11] = "OKLCH";
+    ColorKind[ColorKind["LAB"] = 12] = "LAB";
+    ColorKind[ColorKind["LCH"] = 13] = "LCH";
+    ColorKind[ColorKind["COLOR"] = 14] = "COLOR";
+    ColorKind[ColorKind["SRGB"] = 15] = "SRGB";
+    ColorKind[ColorKind["PROPHOTO_RGB"] = 16] = "PROPHOTO_RGB";
+    ColorKind[ColorKind["A98_RGB"] = 17] = "A98_RGB";
+    ColorKind[ColorKind["REC2020"] = 18] = "REC2020";
+    ColorKind[ColorKind["DISPLAY_P3"] = 19] = "DISPLAY_P3";
+    ColorKind[ColorKind["SRGB_LINEAR"] = 20] = "SRGB_LINEAR";
+    ColorKind[ColorKind["XYZ"] = 21] = "XYZ";
+    ColorKind[ColorKind["XYZ_D50"] = 22] = "XYZ_D50";
+    ColorKind[ColorKind["XYZ_D65"] = 23] = "XYZ_D65";
+    ColorKind[ColorKind["LIGHT_DARK"] = 24] = "LIGHT_DARK";
+    ColorKind[ColorKind["COLOR_MIX"] = 25] = "COLOR_MIX";
+})(ColorKind || (ColorKind = {}));
+const generalEnclosedFunc = ['selector', 'font-tech', 'font-format', 'media', 'supports'];
+const funcLike = [
+    EnumToken.ParensTokenType,
+    EnumToken.FunctionTokenType,
+    EnumToken.UrlFunctionTokenType,
+    EnumToken.StartParensTokenType,
+    EnumToken.ImageFunctionTokenType,
+    EnumToken.TimingFunctionTokenType,
+    EnumToken.TimingFunctionTokenType,
+    EnumToken.PseudoClassFuncTokenType,
+    EnumToken.GridTemplateFuncTokenType
+];
+const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb', 'a98-rgb', 'rec2020', 'xyz', 'xyz-d65', 'xyz-d50'];
-({ typ: EnumToken.IdenTokenType});
 const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
 const k = Math.pow(29, 3) / Math.pow(3, 3);
 const e = Math.pow(6, 3) / Math.pow(29, 3);
@@ -194,4 +238,4 @@ const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key,
     return acc;
 }, Object.create(null)));
 
-export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, deprecatedSystemColors, e, k, systemColors };
+export { COLORS_NAMES, ColorKind, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, colorsFunc, deprecatedSystemColors, e, funcLike, generalEnclosedFunc, k, systemColors };

package/dist/lib/renderer/color/xyz.js

@@ -4,9 +4,10 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { srgb2lsrgbvalues } from './srgb.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function XYZ_to_lin_sRGB(x, y, z) {
     // convert XYZ to linear-light sRGB

package/dist/lib/renderer/color/xyzd50.js

@@ -5,11 +5,12 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { xyz2lab } from './lab.js';
 import { lab2lchvalues } from './lch.js';
 import { XYZ_D50_to_D65 } from './xyz.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 /*
 */

package/dist/lib/renderer/render.js

@@ -1,8 +1,8 @@
 import { getAngle, color2srgbvalues, clamp } from './color/color.js';
-import { colorFuncColorSpace, COLORS_NAMES } from './color/utils/constants.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, funcLike } from '../ast/types.js';
+import { EnumToken } from '../ast/types.js';
 import '../ast/minify.js';
 import '../ast/walk.js';
 import { expand } from '../ast/expand.js';
@@ -11,7 +11,6 @@ import { parseRelativeColor } from './color/relativecolor.js';
 import { SourceMap } from './sourcemap/sourcemap.js';
 import { isColor, pseudoElements, mathFuncs, isNewLine } from '../syntax/syntax.js';
 
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 function reduceNumber(val) {
     val = String(+val);
     if (val === '0') {
@@ -59,7 +58,8 @@ function doRender(data, options = {}) {
         }),
         ...(minify ? {
             removeEmpty: true,
-            removeComments: true
+            removeComments: true,
+            minify: true
         } : {
             removeEmpty: false,
             removeComments: false,
@@ -105,11 +105,17 @@ function doRender(data, options = {}) {
     }
     if (sourcemap != null) {
         result.map = sourcemap;
+        if (options.sourcemap === 'inline') {
+            result.code += `\n/*# sourceMappingURL=data:application/json,${encodeURIComponent(JSON.stringify(result.map))} */`;
+        }
     }
     return result;
 }
 function updateSourceMap(node, options, cache, sourcemap, position, str) {
-    if ([EnumToken.RuleNodeType, EnumToken.AtRuleNodeType, EnumToken.KeyFrameRuleNodeType, EnumToken.KeyframeAtRuleNodeType].includes(node.typ)) {
+    if ([
+        EnumToken.RuleNodeType, EnumToken.AtRuleNodeType,
+        EnumToken.KeyFrameRuleNodeType, EnumToken.KeyframeAtRuleNodeType
+    ].includes(node.typ)) {
         let src = node.loc?.src ?? '';
         let output = options.output ?? '';
         if (!(src in cache)) {
@@ -227,6 +233,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
                 return `@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val}${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
             }
             return data.sel + `${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
+        case EnumToken.InvalidDeclarationNodeType:
         case EnumToken.InvalidRuleTokenType:
         case EnumToken.InvalidAtRuleTokenType:
             return '';
@@ -324,7 +331,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
-            if (token.kin == 'light-dark') {
+            if (token.kin == ColorKind.LIGHT_DARK || ('chi' in token && !options.convertColor)) {
                 return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
             }
             if (options.convertColor) {
@@ -334,7 +341,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                             acc.push([t]);
                         }
                         else {
-                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
+                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType].includes(t.typ)) {
                                 acc[acc.length - 1].push(t);
                             }
                         }
@@ -389,23 +396,45 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     }
                     return clamp(token).val + '(' + (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
                         const val = renderToken(curr, options, cache);
-                        if ([EnumToken.LiteralTokenType, EnumToken.CommaTokenType].includes(curr.typ)) {
-                            return acc + val;
+                        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 acc + (['/', ',', ' '].includes(acc.at(-1)) ? '' : ' ') + val;
                         }
                         return val;
                     }, '') + ')';
                 }
-                if (token.kin == 'lit' && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
+                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)))) {
-                    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 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 == 'hex' ? token.val.toLowerCase() : (token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : '');
+                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);
                 }
@@ -434,7 +463,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     return reduceHexValue(value);
                 }
             }
-            if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
+            if ([ColorKind.HEX, ColorKind.LIT, ColorKind.SYS, ColorKind.DPSYS].includes(token.kin)) {
                 return token.val;
             }
             if (Array.isArray(token.chi)) {
@@ -454,9 +483,8 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 ![EnumToken.BinaryExpressionTokenType, EnumToken.FractionTokenType, EnumToken.IdenTokenType].includes(token.chi[0].typ) &&
                 // @ts-ignore
                 token.chi[0].val?.typ != EnumToken.FractionTokenType) {
-                return token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache, reducer), '');
+                return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache, reducer), '') + ')';
             }
-            // @ts-ignore
             return ( /* options.minify && 'Pseudo-class-func' == token.typ && token.val.slice(0, 2) == '::' ? token.val.slice(1) :*/token.val ?? '') + '(' + token.chi.reduce(reducer, '') + ')';
         case EnumToken.MatchExpressionTokenType:
             return renderToken(token.l, options, cache, reducer, errors) +
@@ -596,6 +624,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 return val + 's';
             }
+            if (token.typ == EnumToken.ResolutionTokenType && unit == 'dppx') {
+                unit = 'x';
+            }
             return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
         case EnumToken.FlexTokenType:
         case EnumToken.PercentageTokenType:
@@ -670,9 +701,6 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return 'and';
         case EnumToken.MediaFeatureOrTokenType:
             return 'or';
-        // default:
-        //
-        //     throw new Error(`render: unexpected token ${JSON.stringify(token, null, 1)}`);
     }
     errors?.push({ action: 'ignore', message: `render: unexpected token ${JSON.stringify(token, null, 1)}` });
     return '';
@@ -690,4 +718,4 @@ function filterValues(values) {
     return values;
 }
 
-export { colorsFunc, doRender, filterValues, reduceNumber, renderToken };
+export { doRender, filterValues, reduceNumber, renderToken };