@tbela99/css-parser 1.1.1 → 1.3.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/syntax/color/utils/components.js

@@ -0,0 +1,46 @@
+import { ColorType, EnumToken } from '../../../ast/types.js';
+import '../../../ast/minify.js';
+import { walkValues } from '../../../ast/walk.js';
+import '../../../parser/parse.js';
+import '../../../parser/tokenize.js';
+import '../../../parser/utils/config.js';
+import { COLORS_NAMES } from './constants.js';
+import { expandHexValue } from '../hex.js';
+import '../../../renderer/sourcemap/lib/encode.js';
+
+function getComponents(token) {
+    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, index) => {
+            return { typ: EnumToken.Number, val: index < 3 ? parseInt(t, 16) : parseInt(t, 16) / 255 };
+        });
+    }
+    const result = [];
+    for (const child of (token.chi)) {
+        if ([
+            EnumToken.LiteralTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType
+        ].includes(child.typ)) {
+            continue;
+        }
+        if (child.typ == EnumToken.FunctionTokenType) {
+            if ('var' == child.val.toLowerCase()) {
+                return null;
+            }
+            else {
+                for (const { value } of walkValues(child.chi)) {
+                    if (value.typ == EnumToken.FunctionTokenType && 'var' === value.val.toLowerCase()) {
+                        return null;
+                    }
+                }
+            }
+        }
+        if (child.typ == EnumToken.ColorTokenType && 'currentcolor' === child.val.toLowerCase()) {
+            return null;
+        }
+        result.push(child);
+    }
+    return result;
+}
+
+export { getComponents };

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,
@@ -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,40 @@
+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';
+
+/**
+ * Calculate the distance between two okLab colors.
+ * @param okLab1
+ * @param okLab2
+ */
+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));
+}
+/**
+ * Check if two colors are close.
+ * @param color1
+ * @param color2
+ * @param threshold
+ */
+function isOkLabClose(color1, color2, threshold = .01) {
+    color1 = convertColor(color1, ColorType.OKLAB);
+    color2 = convertColor(color2, ColorType.OKLAB);
+    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 };