@tbela99/css-parser 1.1.1-alpha4 → 1.2.0

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

@@ -1,45 +1,45 @@
-import { ColorKind, COLORS_NAMES } from './utils/constants.js';
+import { 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 { OKLab_to_sRGB, getOKLABComponents } from './oklab.js';
+import { ColorType, 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';
+import { lchvalues2labvalues, Lab_to_sRGB, getLABComponents } from './lab.js';
 import { getLCHComponents } from './lch.js';
 import { getOKLCHComponents } from './oklch.js';
 import { XYZ_to_lin_sRGB } from './xyz.js';
-import '../sourcemap/lib/encode.js';
+import '../../renderer/sourcemap/lib/encode.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 ColorKind.LIT:
-        case ColorKind.HEX:
-            return hex2srgb(token);
-        case ColorKind.RGB:
-        case ColorKind.RGBA:
+        case ColorType.LIT:
+        case ColorType.HEX:
+            return hex2srgbvalues(token);
+        case ColorType.RGB:
+        case ColorType.RGBA:
             return rgb2srgb(token);
-        case ColorKind.HSL:
-        case ColorKind.HSLA:
+        case ColorType.HSL:
+        case ColorType.HSLA:
             return hsl2srgb(token);
-        case ColorKind.HWB:
-            return hwb2srgb(token);
-        case ColorKind.LAB:
-            return lab2srgb(token);
-        case ColorKind.LCH:
-            return lch2srgb(token);
-        case ColorKind.OKLAB:
-            return oklab2srgb(token);
-        case ColorKind.OKLCH:
-            return oklch2srgb(token);
-        case ColorKind.COLOR:
+        case ColorType.HWB:
+            return hwb2srgbvalues(token);
+        case ColorType.LAB:
+            return lab2srgbvalues(token);
+        case ColorType.LCH:
+            return lch2srgbvalues(token);
+        case ColorType.OKLAB:
+            return oklab2srgbvalues(token);
+        case ColorType.OKLCH:
+            return oklch2srgbvalues(token);
+        case ColorType.COLOR:
             return color2srgbvalues(token);
     }
     return null;
@@ -47,24 +47,31 @@ function srgbvalues(token) {
 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 == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
+function rgb2srgbvalues(token) {
+    return getComponents(token)?.map?.((t, index) => index == 3 ? getNumber(t) : getNumber(t) / 255) ?? null;
+}
+function hex2srgbvalues(token) {
+    const value = expandHexValue(token.kin == ColorType.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);
     }
+    if (rgb.length == 4) {
+        rgb[3] = +rgb[3].toFixed(2);
+    }
     return rgb;
 }
-function xyz2srgb(x, y, z) {
+// xyz d65 input
+function xyz2srgb(x, y, z, alpha = null) {
     // @ts-ignore
-    return lsrgb2srgbvalues(...XYZ_to_lin_sRGB(x, y, z));
+    return lsrgb2srgbvalues(...XYZ_to_lin_sRGB(x, y, z, alpha));
 }
-function hwb2srgb(token) {
+function hwb2srgbvalues(token) {
     const { h: hue, s: white, l: black, a: alpha } = hslvalues(token) ?? {};
     if (hue == null || white == null || black == null) {
         return [];
     }
-    const rgb = hsl2srgbvalues(hue, 1, .5);
+    const rgb = hslvalues2srgbvalues(hue, 1, .5);
     for (let i = 0; i < 3; i++) {
         rgb[i] *= (1 - white - black);
         rgb[i] = rgb[i] + white;
@@ -79,9 +86,9 @@ function hsl2srgb(token) {
     if (h == null || s == null || l == null) {
         return null;
     }
-    return hsl2srgbvalues(h, s, l, a);
+    return hslvalues2srgbvalues(h, s, l, a);
 }
-function cmyk2srgb(token) {
+function cmyk2srgbvalues(token) {
     const components = getComponents(token);
     if (components == null) {
         return null;
@@ -107,16 +114,21 @@ function cmyk2srgb(token) {
         1 - Math.min(1, m * (1 - k) + k),
         1 - Math.min(1, y * (1 - k) + k)
     ];
-    // @ts-ignore
-    if (token.chi.length >= 9) {
-        // @ts-ignore
-        t = token.chi[8];
-        // @ts-ignore
-        rgb.push(getNumber(t));
+    if (components.length == 5) {
+        rgb.push(getNumber(components[4]));
     }
+    // @ts-ignore
+    // if (token.chi.length >= 9) {
+    //
+    //     // @ts-ignore
+    //     t = <NumberToken | PercentageToken>token.chi[8];
+    //
+    //     // @ts-ignore
+    //     rgb.push(getNumber(t));
+    // }
     return rgb;
 }
-function oklab2srgb(token) {
+function oklab2srgbvalues(token) {
     const [l, a, b, alpha] = getOKLABComponents(token) ?? [];
     if (l == null || a == null || b == null) {
         return null;
@@ -127,13 +139,13 @@ function oklab2srgb(token) {
     }
     return rgb;
 }
-function oklch2srgb(token) {
+function oklch2srgbvalues(token) {
     const [l, c, h, alpha] = getOKLCHComponents(token) ?? [];
     if (l == null || c == null || h == null) {
         return null;
     }
     // @ts-ignore
-    const rgb = OKLab_to_sRGB(...lch2labvalues(l, c, h));
+    const rgb = OKLab_to_sRGB(...lchvalues2labvalues(l, c, h));
     if (alpha != 1) {
         rgb.push(alpha);
     }
@@ -164,7 +176,7 @@ function hslvalues(token) {
     }
     return a == null ? { h, s, l } : { h, s, l, a };
 }
-function hsl2srgbvalues(h, s, l, a = null) {
+function hslvalues2srgbvalues(h, s, l, a = null) {
     let v = l <= .5 ? l * (1.0 + s) : l + s - l * s;
     let r = l;
     let g = l;
@@ -217,7 +229,7 @@ function hsl2srgbvalues(h, s, l, a = null) {
     }
     return values;
 }
-function lab2srgb(token) {
+function lab2srgbvalues(token) {
     const [l, a, b, alpha] = getLABComponents(token) ?? [];
     if (l == null || a == null || b == null) {
         return null;
@@ -228,9 +240,9 @@ function lab2srgb(token) {
     }
     return rgb;
 }
-function lch2srgb(token) {
+function lch2srgbvalues(token) {
     // @ts-ignore
-    const [l, a, b, alpha] = lch2labvalues(...getLCHComponents(token));
+    const [l, a, b, alpha] = lchvalues2labvalues(...getLCHComponents(token));
     if (l == null || a == null || b == null) {
         return null;
     }
@@ -261,7 +273,7 @@ function srgb2lsrgbvalues(r, g, b, a = null) {
     }
     return rgb;
 }
-function lsrgb2srgbvalues(r, g, b, alpha) {
+function lsrgb2srgbvalues(r, g, b, alpha = null) {
     // convert an array of linear-light sRGB values in the range 0.0-1.0
     // to gamma corrected form
     // https://en.wikipedia.org/wiki/SRGB
@@ -281,4 +293,4 @@ function lsrgb2srgbvalues(r, g, b, alpha) {
     return rgb;
 }
 
-export { cmyk2srgb, hex2srgb, hsl2srgb, hsl2srgbvalues, hslvalues, hwb2srgb, lab2srgb, lch2srgb, lsrgb2srgbvalues, oklab2srgb, oklch2srgb, rgb2srgb, srgb2lsrgbvalues, srgbvalues, xyz2srgb };
+export { cmyk2srgbvalues, hex2srgbvalues, hsl2srgb, hslvalues, hslvalues2srgbvalues, hwb2srgbvalues, lab2srgbvalues, lch2srgbvalues, lsrgb2srgbvalues, oklab2srgbvalues, oklch2srgbvalues, rgb2srgb, rgb2srgbvalues, srgb2lsrgbvalues, srgbvalues, xyz2srgb };

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

@@ -1,19 +1,19 @@
-import { EnumToken } from '../../../ast/types.js';
+import { ColorType, 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 { ColorKind, COLORS_NAMES } from './constants.js';
+import { COLORS_NAMES } from './constants.js';
 import { expandHexValue } from '../hex.js';
-import '../../sourcemap/lib/encode.js';
+import '../../../renderer/sourcemap/lib/encode.js';
 
 function getComponents(token) {
-    if (token.kin == ColorKind.HEX || token.kin == ColorKind.LIT) {
-        const value = expandHexValue(token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
+    if (token.kin == ColorType.HEX || token.kin == ColorType.LIT) {
+        const value = expandHexValue(token.kin == ColorType.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() };
+        return value.slice(1).match(/([a-fA-F0-9]{2})/g).map((t, index) => {
+            return { typ: EnumToken.Number, val: (index < 3 ? parseInt(t, 16) : parseInt(t, 16) / 255).toString() };
         });
     }
     const result = [];

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

@@ -4,8 +4,10 @@ import '../../../ast/walk.js';
 import '../../../parser/parse.js';
 import '../../../parser/tokenize.js';
 import '../../../parser/utils/config.js';
-import '../../sourcemap/lib/encode.js';
+import '../../../renderer/sourcemap/lib/encode.js';
 
+const colorPrecision = 6;
+const anglePrecision = .001;
 const colorRange = {
     lab: {
         l: [0, 100],
@@ -28,38 +30,9 @@ 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 timelineFunc = ['view', 'scroll'];
 const generalEnclosedFunc = ['selector', 'font-tech', 'font-format', 'media', 'supports'];
+const timingFunc = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps', 'cubic-bezier'];
 const funcLike = [
     EnumToken.ParensTokenType,
     EnumToken.FunctionTokenType,
@@ -77,7 +50,7 @@ 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);
 // color module v4
-const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText', '-webkit-focus-ring-color'].map(m => m.toLowerCase()));
 // deprecated
 const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
 // name to color
@@ -238,4 +211,4 @@ const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key,
     return acc;
 }, Object.create(null)));
 
-export { COLORS_NAMES, ColorKind, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, colorsFunc, deprecatedSystemColors, e, funcLike, generalEnclosedFunc, k, systemColors };
+export { COLORS_NAMES, D50, NAMES_COLORS, anglePrecision, colorFuncColorSpace, colorPrecision, colorRange, colorsFunc, deprecatedSystemColors, e, funcLike, generalEnclosedFunc, k, systemColors, timelineFunc, timingFunc };

package/dist/lib/syntax/color/utils/distance.js

@@ -0,0 +1,30 @@
+import { convertColor } from '../color.js';
+import { getOKLABComponents } from '../oklab.js';
+import { ColorType } 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 './constants.js';
+import '../../../renderer/sourcemap/lib/encode.js';
+
+function okLabDistance(okLab1, okLab2) {
+    return Math.sqrt(Math.pow(okLab1[0] - okLab2[0], 2) + Math.pow(okLab1[1] - okLab2[1], 2) + Math.pow(okLab1[2] - okLab2[2], 2));
+}
+function isOkLabClose(color1, color2, threshold = .01) {
+    color1 = convertColor(color1, ColorType.OKLAB);
+    color2 = convertColor(color2, ColorType.OKLAB);
+    // console.error(JSON.stringify({color1, color2}, null, 1));
+    if (color1 == null || color2 == null) {
+        return false;
+    }
+    const okLab1 = getOKLABComponents(color1);
+    const okLab2 = getOKLABComponents(color2);
+    if (okLab1 == null || okLab2 == null) {
+        return false;
+    }
+    return okLabDistance(okLab1, okLab2) < threshold;
+}
+
+export { isOkLabClose, okLabDistance };

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

@@ -7,9 +7,10 @@ import '../../parser/parse.js';
 import '../../parser/tokenize.js';
 import '../../parser/utils/config.js';
 import { srgb2lsrgbvalues } from './srgb.js';
-import '../sourcemap/lib/encode.js';
+import { XYZ_D65_to_D50 } from './xyzd50.js';
+import '../../renderer/sourcemap/lib/encode.js';
 
-function XYZ_to_lin_sRGB(x, y, z) {
+function XYZ_to_lin_sRGB(x, y, z, alpha = null) {
     // convert XYZ to linear-light sRGB
     const M = [
         [12831 / 3959, -329 / 214, -1974 / 3959],
@@ -17,7 +18,7 @@ function XYZ_to_lin_sRGB(x, y, z) {
         [705 / 12673, -2585 / 12673, 705 / 667],
     ];
     const XYZ = [x, y, z]; // convert to XYZ
-    return multiplyMatrices(M, XYZ).map((v) => v);
+    return multiplyMatrices(M, XYZ).map((v) => v).concat(alpha == null || alpha == 1 ? [] : [alpha]);
 }
 function XYZ_D50_to_D65(x, y, z) {
     // Bradford chromatic adaptation from D50 to D65
@@ -29,23 +30,35 @@ function XYZ_D50_to_D65(x, y, z) {
     const XYZ = [x, y, z];
     return multiplyMatrices(M, XYZ); //.map((v: number) => v);
 }
+// xyz d65
 function srgb2xyz(r, g, b, alpha) {
     [r, g, b] = srgb2lsrgbvalues(r, g, b);
-    const rgb = [
-        0.436065742824811 * r +
-            0.3851514688337912 * g +
-            0.14307845442264197 * b,
-        0.22249319175623702 * r +
-            0.7168870538238823 * g +
-            0.06061979053616537 * b,
-        0.013923904500943465 * r +
-            0.09708128566574634 * g +
-            0.7140993584005155 * b
+    // xyx d65
+    let rgb = [
+        0.4123907992659595 * r +
+            0.35758433938387796 * g +
+            0.1804807884018343 * b,
+        0.21263900587151036 * r +
+            0.7151686787677559 * g +
+            0.07219231536073371 * b,
+        0.01933081871559185 * r +
+            0.11919477979462599 * g +
+            0.9505321522496606 * b
     ];
     if (alpha != null && alpha != 1) {
         rgb.push(alpha);
     }
     return rgb;
 }
+// xyz d50
+function srgb2xyz_d50(r, g, b, alpha) {
+    // xyx d65
+    // @ts-ignore
+    let rgb = XYZ_D65_to_D50(...srgb2xyz(r, g, b));
+    if (alpha != null && alpha != 1) {
+        rgb.push(alpha);
+    }
+    return rgb;
+}
 
-export { XYZ_D50_to_D65, XYZ_to_lin_sRGB, srgb2xyz };
+export { XYZ_D50_to_D65, XYZ_to_lin_sRGB, srgb2xyz, srgb2xyz_d50 };

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

@@ -8,9 +8,9 @@ import '../../parser/parse.js';
 import '../../parser/tokenize.js';
 import '../../parser/utils/config.js';
 import { xyz2lab } from './lab.js';
-import { lab2lchvalues } from './lch.js';
+import { labvalues2lchvalues } from './lch.js';
 import { XYZ_D50_to_D65 } from './xyz.js';
-import '../sourcemap/lib/encode.js';
+import '../../renderer/sourcemap/lib/encode.js';
 
 /*
 */
@@ -18,23 +18,23 @@ function xyzd502lch(x, y, z, alpha) {
     // @ts-ignore
     const [l, a, b] = xyz2lab(...XYZ_D50_to_D65(x, y, z));
     // L in range [0,100]. For use in CSS, add a percent
-    return lab2lchvalues(l, a, b, alpha);
+    return labvalues2lchvalues(l, a, b, alpha);
 }
-function XYZ_D65_to_D50(x, y, z) {
+function XYZ_D65_to_D50(x, y, z, alpha = null) {
     // Bradford chromatic adaptation from D65 to D50
     // The matrix below is the result of three operations:
     // - convert from XYZ to retinal cone domain
     // - scale components from one reference white to another
     // - convert back to XYZ
     // see https://github.com/LeaVerou/color.js/pull/354/files
-    var M = [
+    let M = [
         [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
         [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
         [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371]
     ];
-    return multiplyMatrices(M, [x, y, z]);
+    return multiplyMatrices(M, [x, y, z]).concat(alpha == null || alpha == 1 ? [] : [alpha]);
 }
-function xyzd502srgb(x, y, z) {
+function xyzd502srgb(x, y, z, alpha = null) {
     // @ts-ignore
     return lsrgb2srgbvalues(
     /* r: */
@@ -48,7 +48,7 @@ function xyzd502srgb(x, y, z) {
     /*    b: */
     x * 0.07195537988411677 -
         y * 0.2289768264158322 +
-        1.405386058324125 * z);
+        1.405386058324125 * z, alpha);
 }
 
 export { XYZ_D65_to_D50, xyzd502lch, xyzd502srgb };

package/dist/lib/syntax/syntax.js

@@ -1,10 +1,10 @@
-import { EnumToken } from '../ast/types.js';
+import { EnumToken, ColorType } from '../ast/types.js';
 import '../ast/minify.js';
 import { walkValues, WalkerOptionEnum } from '../ast/walk.js';
 import '../parser/parse.js';
 import '../parser/tokenize.js';
 import '../parser/utils/config.js';
-import { COLORS_NAMES, colorsFunc, funcLike, ColorKind } from '../renderer/color/utils/constants.js';
+import { COLORS_NAMES, colorsFunc, funcLike } from './color/utils/constants.js';
 import { buildExpression } from '../ast/math/expression.js';
 import '../renderer/sourcemap/lib/encode.js';
 
@@ -498,15 +498,24 @@ function isPolarColorspace(token) {
     return ['hsl', 'hwb', 'lch', 'oklch'].includes(token.val);
 }
 function isHueInterpolationMethod(token) {
-    if (token.typ != EnumToken.IdenTokenType) {
+    if (!Array.isArray(token)) {
+        return token.typ == EnumToken.IdenTokenType && 'hue'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0;
+    }
+    if (token.length != 2 || token[0].typ != EnumToken.IdenTokenType || token[1].typ != EnumToken.IdenTokenType) {
         return false;
     }
-    return ['shorter', 'longer', 'increasing', 'decreasing'].includes(token.val);
+    return ['shorter', 'longer', 'increasing', 'decreasing'].includes(token[0].val) && 'hue'.localeCompare(token[1].val, undefined, { sensitivity: 'base' }) == 0;
 }
 function isIdentColor(token) {
-    return token.typ == EnumToken.ColorTokenType && [ColorKind.SYS, ColorKind.DPSYS, ColorKind.LIT].includes(token.kin) && isIdent(token.val);
+    return token.typ == EnumToken.ColorTokenType && [ColorType.SYS, ColorType.DPSYS, ColorType.LIT].includes(token.kin) && isIdent(token.val);
+}
+function isPercentageToken(token) {
+    return token.typ == EnumToken.PercentageTokenType || (token.typ == EnumToken.NumberTokenType && token.val == '0');
 }
 function isColor(token) {
+    if (token.typ == EnumToken.ColorTokenType) {
+        return true;
+    }
     if (token.typ == EnumToken.IdenTokenType) {
         // named color
         return token.val.toLowerCase() in COLORS_NAMES;
@@ -595,79 +604,80 @@ function isColor(token) {
                 }
                 return true;
             }
-            else { // @ts-ignore
-                if (token.val == 'color-mix') {
-                    // @ts-ignore
-                    const children = token.chi.reduce((acc, t) => {
-                        if (t.typ == EnumToken.CommaTokenType) {
-                            acc.push([]);
-                        }
-                        else {
-                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
-                                acc[acc.length - 1].push(t);
-                            }
+            // @ts-ignore
+            else if (token.val == 'color-mix') {
+                // @ts-ignore
+                const children = token.chi.reduce((acc, t) => {
+                    if (t.typ == EnumToken.CommaTokenType) {
+                        acc.push([]);
+                    }
+                    else {
+                        if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
+                            acc[acc.length - 1].push(t);
                         }
-                        return acc;
-                    }, [[]]);
-                    if (children.length == 3) {
-                        if (children[0].length > 3 ||
-                            children[0][0].typ != EnumToken.IdenTokenType ||
-                            children[0][0].val != 'in' ||
-                            !isColorspace(children[0][1]) ||
-                            (children[0].length == 3 && !isHueInterpolationMethod(children[0][2])) ||
-                            children[1].length > 2 ||
-                            children[1][0].typ != EnumToken.ColorTokenType ||
-                            children[2].length > 2 ||
-                            children[2][0].typ != EnumToken.ColorTokenType) {
+                    }
+                    return acc;
+                }, [[]]);
+                if (children.length == 3) {
+                    if (children[0].length > 4 ||
+                        children[0][0].typ != EnumToken.IdenTokenType ||
+                        'in'.localeCompare(children[0][0].val, undefined, { sensitivity: 'base' }) != 0 ||
+                        !isColorspace(children[0][1]) ||
+                        (children[0].length >= 3 && !isHueInterpolationMethod(children[0].slice(2))) ||
+                        children[1].length > 2 ||
+                        !isColor(children[1][0]) ||
+                        (children[1].length == 2 && !isPercentageToken(children[1][1])) ||
+                        children[2].length > 2 ||
+                        (children[2].length == 2 && !isPercentageToken(children[2][1])) ||
+                        !isColor(children[2][0])) {
+                        return false;
+                    }
+                    if (children[1].length == 2) {
+                        if (!(children[1][1].typ == EnumToken.PercentageTokenType || (children[1][1].typ == EnumToken.NumberTokenType && children[1][1].val == '0'))) {
                             return false;
                         }
-                        if (children[1].length == 2) {
-                            if (!(children[1][1].typ == EnumToken.PercentageTokenType || (children[1][1].typ == EnumToken.NumberTokenType && children[1][1].val == '0'))) {
-                                return false;
-                            }
-                        }
-                        if (children[2].length == 2) {
-                            if (!(children[2][1].typ == EnumToken.PercentageTokenType || (children[2][1].typ == EnumToken.NumberTokenType && children[2][1].val == '0'))) {
-                                return false;
-                            }
+                    }
+                    if (children[2].length == 2) {
+                        if (!(children[2][1].typ == EnumToken.PercentageTokenType || (children[2][1].typ == EnumToken.NumberTokenType && children[2][1].val == '0'))) {
+                            return false;
                         }
-                        return true;
                     }
-                    return false;
+                    return true;
                 }
-                else {
-                    const keywords = ['from', 'none'];
+                return false;
+            }
+            else {
+                const keywords = ['from', 'none'];
+                // @ts-ignore
+                if (['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch'].includes(token.val)) {
                     // @ts-ignore
-                    if (['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch'].includes(token.val)) {
-                        // @ts-ignore
-                        keywords.push('alpha', ...token.val.slice(-3).split(''));
+                    keywords.push('alpha', ...token.val.slice(-3).split(''));
+                }
+                // @ts-ignore
+                for (const v of token.chi) {
+                    if (v.typ == EnumToken.CommaTokenType) {
+                        isLegacySyntax = true;
                     }
-                    // @ts-ignore
-                    for (const v of token.chi) {
-                        if (v.typ == EnumToken.CommaTokenType) {
-                            isLegacySyntax = true;
+                    if (v.typ == EnumToken.IdenTokenType) {
+                        if (!(keywords.includes(v.val) || v.val.toLowerCase() in COLORS_NAMES)) {
+                            return false;
                         }
-                        if (v.typ == EnumToken.IdenTokenType) {
-                            if (!(keywords.includes(v.val) || v.val.toLowerCase() in COLORS_NAMES)) {
+                        if (keywords.includes(v.val)) {
+                            if (isLegacySyntax) {
                                 return false;
                             }
-                            if (keywords.includes(v.val)) {
-                                if (isLegacySyntax) {
-                                    return false;
-                                }
-                                // @ts-ignore
-                                if (v.val == 'from' && ['rgba', 'hsla'].includes(token.val)) {
-                                    return false;
-                                }
+                            // @ts-ignore
+                            if (v.val == 'from' && ['rgba', 'hsla'].includes(token.val)) {
+                                return false;
                             }
-                            continue;
-                        }
-                        if (v.typ == EnumToken.FunctionTokenType && (mathFuncs.includes(v.val) || v.val == 'var' || colorsFunc.includes(v.val))) {
-                            continue;
-                        }
-                        if (![EnumToken.ColorTokenType, EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.AngleTokenType, EnumToken.PercentageTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType].includes(v.typ)) {
-                            return false;
                         }
+                        continue;
+                    }
+                    if (v.typ == EnumToken.FunctionTokenType && (mathFuncs.includes(v.val) || v.val == 'var' || colorsFunc.includes(v.val))) {
+                        continue;
+                    }
+                    if (![EnumToken.ColorTokenType, EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.AngleTokenType, EnumToken.PercentageTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType].includes(v.typ)) {
+                        return false;
                     }
                 }
             }
@@ -680,7 +690,7 @@ function parseColor(token) {
     // @ts-ignore
     token.typ = EnumToken.ColorTokenType;
     // @ts-ignore
-    token.kin = ColorKind[token.val.replaceAll('-', '_').toUpperCase()];
+    token.kin = ColorType[token.val.replaceAll('-', '_').toUpperCase()];
     // @ts-ignore
     if (token.chi[0].typ == EnumToken.IdenTokenType) {
         // @ts-ignore
@@ -947,4 +957,4 @@ function isWhiteSpace(codepoint) {
         codepoint == 0xa || codepoint == 0xc || codepoint == 0xd;
 }
 
-export { colorFontTech, fontFeaturesTech, fontFormat, isAngle, isAtKeyword, isColor, isColorspace, isDigit, isDimension, isFlex, isFrequency, isFunction, isHash, isHexColor, isHueInterpolationMethod, isIdent, isIdentCodepoint, isIdentColor, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPolarColorspace, isPseudo, isRectangularOrthogonalColorspace, isResolution, isTime, isWhiteSpace, mathFuncs, mediaTypes, mozExtensions, parseColor, parseDimension, pseudoAliasMap, pseudoElements, transformFunctions, webkitExtensions, wildCardFuncs };
+export { colorFontTech, fontFeaturesTech, fontFormat, isAngle, isAtKeyword, isColor, isColorspace, isDigit, isDimension, isFlex, isFrequency, isFunction, isHash, isHexColor, isHueInterpolationMethod, isIdent, isIdentCodepoint, isIdentColor, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPercentageToken, isPolarColorspace, isPseudo, isRectangularOrthogonalColorspace, isResolution, isTime, isWhiteSpace, mathFuncs, mediaTypes, mozExtensions, parseColor, parseDimension, pseudoAliasMap, pseudoElements, transformFunctions, webkitExtensions, wildCardFuncs };