@tbela99/css-parser 0.1.0 → 0.3.0

package/dist/lib/renderer/utils/calccolor.js

@@ -0,0 +1,238 @@
+import { COLORS_NAMES, getNumber, getAngle } from './color.js';
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import { walkValues } from '../../ast/walk.js';
+import '../../parser/parse.js';
+import { reduceNumber } from '../render.js';
+import { hwb2rgb, hsl2rgb } from './rgb.js';
+import { rgb2hwb, hsl2hwb } from './hwb.js';
+import { rgb2hsl, hwb2hsl } from './hsl.js';
+import { evaluate } from '../../ast/math/expression.js';
+
+function parseRelativeColor(relativeKeys, original, rExp, gExp, bExp, aExp) {
+    const type = relativeKeys.join('');
+    let r;
+    let g;
+    let b;
+    let alpha = null;
+    let keys = {};
+    let values = {};
+    let children;
+    switch (original.kin) {
+        case 'lit':
+        case 'hex':
+            let value = original.val.toLowerCase();
+            if (original.kin == 'lit') {
+                if (original.val.toLowerCase() in COLORS_NAMES) {
+                    value = COLORS_NAMES[original.val.toLowerCase()];
+                }
+                else {
+                    return null;
+                }
+            }
+            if (value.length == 4) {
+                value = '#' + value[1] + value[1] + value[2] + value[2] + value[3] + value[3];
+            }
+            else if (value.length == 5) {
+                value = '#' + value[1] + value[1] + value[2] + value[2] + value[3] + value[3] + value[4] + value[4];
+            }
+            r = parseInt(value.slice(1, 3), 16);
+            g = parseInt(value.slice(3, 5), 16);
+            b = parseInt(value.slice(5, 7), 16);
+            alpha = value.length == 9 ? parseInt(value.slice(7, 9), 16) : null;
+            break;
+        case 'rgb':
+        case 'rgba':
+            children = original.chi.filter((t) => t.typ == EnumToken.NumberTokenType || t.typ == EnumToken.IdenTokenType || t.typ == EnumToken.PercentageTokenType);
+            if (children.every((t) => (t.typ == EnumToken.IdenTokenType && t.val == 'none') || t.typ == EnumToken.NumberTokenType)) {
+                r = children[0].typ == EnumToken.IdenTokenType && children[0].val == 'none' ? 0 : +children[0].val;
+                g = children[1].typ == EnumToken.IdenTokenType && children[1].val == 'none' ? 0 : +children[1].val;
+                b = children[2].typ == EnumToken.IdenTokenType && children[2].val == 'none' ? 0 : +children[2].val;
+                alpha = children.length < 4 ? null : children[3].typ == EnumToken.IdenTokenType && children[3].val == 'none' ? 0 : +children[3].val;
+            }
+            else if (children.every((t) => t.typ == EnumToken.PercentageTokenType || (t.typ == EnumToken.IdenTokenType && t.val == 'none') || (t.typ == EnumToken.NumberTokenType && t.val == '0'))) {
+                // @ts-ignore
+                r = children[0].typ == EnumToken.IdenTokenType && children[0].val == 'none' ? 0 : children[0].val * 255 / 100;
+                // @ts-ignore
+                g = children[1].typ == EnumToken.IdenTokenType && children[1].val == 'none' ? 0 : children[1].val * 255 / 100;
+                // @ts-ignore
+                b = children[2].typ == EnumToken.IdenTokenType && children[2].val == 'none' ? 0 : children[2].val * 255 / 100;
+                alpha = children.length < 4 ? null : children[3].typ == EnumToken.IdenTokenType && children[3].val == 'none' ? 0 : +children[3].val / 100;
+            }
+            else {
+                return null;
+            }
+            break;
+        case 'hsl':
+        case 'hsla':
+        case 'hwb':
+            children = original.chi.filter((t) => t.typ == EnumToken.AngleTokenType || t.typ == EnumToken.NumberTokenType || t.typ == EnumToken.IdenTokenType || t.typ == EnumToken.PercentageTokenType);
+            if (children.length == 3 || children.length == 4) {
+                [r, g, b, alpha] = children;
+            }
+            else {
+                return null;
+            }
+            break;
+        default:
+            return null;
+    }
+    const from = ['rgb', 'rgba', 'hex', 'lit'].includes(original.kin) ? 'rgb' : original.kin;
+    if (from != type) {
+        if (type == 'hsl' || type == 'hwb') {
+            if (from == 'rgb') {
+                [r, g, b] = (type == 'hwb' ? rgb2hwb : rgb2hsl)(r, g, b);
+                // @ts-ignore
+                r *= 360;
+                // @ts-ignore
+                g *= 100;
+                // @ts-ignore
+                b *= 100;
+                values = {
+                    [relativeKeys[0]]: { typ: EnumToken.AngleTokenType, val: r, unit: 'deg' },
+                    [relativeKeys[1]]: { typ: EnumToken.PercentageTokenType, val: g },
+                    [relativeKeys[2]]: { typ: EnumToken.PercentageTokenType, val: b }
+                };
+            }
+            else if (from == 'hwb' || from == 'hsl') {
+                if (type == 'hsl') {
+                    if (from == 'hwb') {
+                        [r, g, b] = hwb2hsl(getAngle(r), getNumber(g), getNumber(b));
+                        // @ts-ignore
+                        r *= 360;
+                        // @ts-ignore
+                        g *= 100;
+                        // @ts-ignore
+                        b *= 100;
+                        // @ts-ignore
+                        values = {
+                            [relativeKeys[0]]: { typ: EnumToken.AngleTokenType, val: r, unit: 'deg' },
+                            [relativeKeys[1]]: { typ: EnumToken.PercentageTokenType, val: g },
+                            [relativeKeys[2]]: { typ: EnumToken.PercentageTokenType, val: b }
+                        };
+                    }
+                }
+                else if (type == 'hwb') {
+                    if (from == 'hsl') {
+                        [r, g, b] = hsl2hwb(getAngle(r), getNumber(g), getNumber(b));
+                        // @ts-ignore
+                        r *= 360;
+                        // @ts-ignore
+                        g *= 100;
+                        // @ts-ignore
+                        b *= 100;
+                        // @ts-ignore
+                        values = {
+                            [relativeKeys[0]]: { typ: EnumToken.AngleTokenType, val: r, unit: 'deg' },
+                            [relativeKeys[1]]: { typ: EnumToken.PercentageTokenType, val: g },
+                            [relativeKeys[2]]: { typ: EnumToken.PercentageTokenType, val: b }
+                        };
+                    }
+                }
+            }
+            else {
+                return null;
+            }
+        }
+        else if (type == 'rgb') {
+            if (from == 'hsl' || from == 'hwb') {
+                [r, g, b] = (from == 'hwb' ? hwb2rgb : hsl2rgb)(getAngle(r), getNumber(g), getNumber(b));
+                // @ts-ignore
+                values = {
+                    [relativeKeys[0]]: { typ: EnumToken.NumberTokenType, val: r },
+                    [relativeKeys[1]]: { typ: EnumToken.NumberTokenType, val: g },
+                    [relativeKeys[2]]: { typ: EnumToken.NumberTokenType, val: b }
+                };
+            }
+            else {
+                return null;
+            }
+        }
+    }
+    else {
+        values = {
+            [relativeKeys[0]]: r,
+            [relativeKeys[1]]: g,
+            [relativeKeys[2]]: b
+        };
+    }
+    if (aExp != null && aExp.typ == EnumToken.IdenTokenType && aExp.val == 'none') {
+        aExp = null;
+    }
+    keys = {
+        [relativeKeys[0]]: rExp,
+        [relativeKeys[1]]: gExp,
+        [relativeKeys[2]]: bExp,
+        alpha: aExp ?? { typ: EnumToken.IdenTokenType, val: 'alpha' }
+    };
+    // @ts-ignore
+    values.alpha = alpha != null && typeof alpha == 'object' ? alpha : b.typ == EnumToken.PercentageTokenType ? { typ: EnumToken.PercentageTokenType, val: String(alpha ?? 100) } : { typ: EnumToken.NumberTokenType, val: String(alpha ?? 1) };
+    return computeComponentValue(keys, values);
+}
+function computeComponentValue(expr, values) {
+    for (const [key, exp] of Object.entries(expr)) {
+        if (exp == null) {
+            if (key in values) {
+                if (typeof values[key] == 'number') {
+                    expr[key] = {
+                        typ: EnumToken.NumberTokenType,
+                        val: reduceNumber(values[key])
+                    };
+                }
+                else {
+                    expr[key] = values[key];
+                }
+            }
+        }
+        else if ([EnumToken.NumberTokenType, EnumToken.PercentageTokenType, EnumToken.AngleTokenType, EnumToken.LengthTokenType].includes(exp.typ)) ;
+        else if (exp.typ == EnumToken.IdenTokenType && exp.val in values) {
+            if (typeof values[exp.val] == 'number') {
+                expr[key] = {
+                    typ: EnumToken.NumberTokenType,
+                    val: reduceNumber(values[exp.val])
+                };
+            }
+            else {
+                expr[key] = values[exp.val];
+            }
+        }
+        else if (exp.typ == EnumToken.FunctionTokenType && exp.val == 'calc') {
+            for (let { value, parent } of walkValues(exp.chi)) {
+                if (value.typ == EnumToken.IdenTokenType) {
+                    if (!(value.val in values)) {
+                        return null;
+                    }
+                    if (parent == null) {
+                        parent = exp;
+                    }
+                    if (parent.typ == EnumToken.BinaryExpressionTokenType) {
+                        if (parent.l == value) {
+                            parent.l = values[value.val];
+                        }
+                        else {
+                            parent.r = values[value.val];
+                        }
+                    }
+                    else {
+                        for (let i = 0; i < parent.chi.length; i++) {
+                            if (parent.chi[i] == value) {
+                                parent.chi.splice(i, 1, values[value.val]);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            const result = evaluate(exp.chi);
+            if (result.length == 1 && result[0].typ != EnumToken.BinaryExpressionTokenType) {
+                expr[key] = result[0];
+            }
+            else {
+                return null;
+            }
+        }
+    }
+    return expr;
+}
+
+export { parseRelativeColor };

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

@@ -307,122 +307,47 @@ const NAMES_COLORS = Object.seal({
     '#663399': 'rebeccapurple',
     '#00000000': 'transparent'
 });
-function rgb2Hex(token) {
-    let value = '#';
-    let t;
-    // @ts-ignore
-    for (let i = 0; i < 6; i += 2) {
-        // @ts-ignore
-        t = token.chi[i];
-        // @ts-ignore
-        value += Math.round(t.typ == EnumToken.PercentageTokenType ? 255 * t.val / 100 : t.val).toString(16).padStart(2, '0');
+/**
+ * clamp color values
+ * @param token
+ */
+function clamp(token) {
+    if (token.kin == 'rgb' || token.kin == 'rgba') {
+        token.chi.filter((token) => ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(token.typ)).
+            forEach((token, index) => {
+            if (index <= 2) {
+                if (token.typ == EnumToken.NumberTokenType) {
+                    token.val = String(Math.min(255, Math.max(0, +token.val)));
+                }
+                else if (token.typ == EnumToken.PercentageTokenType) {
+                    token.val = String(Math.min(100, Math.max(0, +token.val)));
+                }
+            }
+            else {
+                if (token.typ == EnumToken.NumberTokenType) {
+                    token.val = String(Math.min(1, Math.max(0, +token.val)));
+                }
+                else if (token.typ == EnumToken.PercentageTokenType) {
+                    token.val = String(Math.min(100, Math.max(0, +token.val)));
+                }
+            }
+        });
     }
-    // @ts-ignore
-    if (token.chi.length == 7) {
-        // @ts-ignore
-        t = token.chi[6];
-        // @ts-ignore
-        if ((t.typ == EnumToken.NumberTokenType && t.val < 1) ||
-            // @ts-ignore
-            (t.typ == EnumToken.PercentageTokenType && t.val < 100)) {
-            // @ts-ignore
-            value += Math.round(255 * (t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val)).toString(16).padStart(2, '0');
-        }
-    }
-    return value;
+    return token;
 }
-function hsl2Hex(token) {
-    let t;
-    // @ts-ignore
-    let h = getAngle(token.chi[0]);
-    // @ts-ignore
-    t = token.chi[2];
-    // @ts-ignore
-    let s = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    // @ts-ignore
-    t = token.chi[4];
-    // @ts-ignore
-    let l = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    let a = null;
-    if (token.chi?.length == 7) {
-        // @ts-ignore
-        t = token.chi[6];
-        // @ts-ignore
-        if ((t.typ == EnumToken.PercentageTokenType && t.val < 100) ||
-            // @ts-ignore
-            (t.typ == EnumToken.NumberTokenType && t.val < 1)) {
-            // @ts-ignore
-            a = (t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val);
-        }
+function getNumber(token) {
+    if (token.typ == EnumToken.IdenTokenType && token.val == 'none') {
+        return 0;
     }
-    return `#${hsl2rgb(h, s, l, a).reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
-}
-function hwb2hex(token) {
-    let t;
-    // @ts-ignore
-    let h = getAngle(token.chi[0]);
-    // @ts-ignore
-    t = token.chi[2];
-    // @ts-ignore
-    let white = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
     // @ts-ignore
-    t = token.chi[4];
-    // @ts-ignore
-    let black = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    let a = null;
-    if (token.chi?.length == 7) {
-        // @ts-ignore
-        t = token.chi[6];
-        // @ts-ignore
-        if ((t.typ == EnumToken.PercentageTokenType && t.val < 100) ||
-            // @ts-ignore
-            (t.typ == EnumToken.NumberTokenType && t.val < 1)) {
-            // @ts-ignore
-            a = (t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val);
-        }
-    }
-    const rgb = hsl2rgb(h, 1, .5, a);
-    let value;
-    for (let i = 0; i < 3; i++) {
-        value = rgb[i] / 255;
-        value *= (1 - white - black);
-        value += white;
-        rgb[i] = Math.round(value * 255);
-    }
-    return `#${rgb.reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
-}
-function cmyk2hex(token) {
-    // @ts-ignore
-    let t = token.chi[0];
-    // @ts-ignore
-    const c = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    // @ts-ignore
-    t = token.chi[2];
-    // @ts-ignore
-    const m = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    // @ts-ignore
-    t = token.chi[4];
-    // @ts-ignore
-    const y = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    // @ts-ignore
-    t = token.chi[6];
-    // @ts-ignore
-    const k = t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val;
-    const rgb = [
-        Math.round(255 * (1 - Math.min(1, c * (1 - k) + k))),
-        Math.round(255 * (1 - Math.min(1, m * (1 - k) + k))),
-        Math.round(255 * (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(Math.round(255 * (t.typ == EnumToken.PercentageTokenType ? t.val / 100 : t.val)));
-    }
-    return `#${rgb.reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
+    return token.typ == EnumToken.PercentageTokenType ? token.val / 100 : +token.val;
 }
 function getAngle(token) {
+    if (token.typ == EnumToken.IdenTokenType) {
+        if (token.val == 'none') {
+            return 0;
+        }
+    }
     if (token.typ == EnumToken.AngleTokenType) {
         switch (token.unit) {
             case 'deg':
@@ -442,58 +367,5 @@ function getAngle(token) {
     // @ts-ignore
     return token.val / 360;
 }
-function hsl2rgb(h, s, l, a = null) {
-    let v = l <= .5 ? l * (1.0 + s) : l + s - l * s;
-    let r = l;
-    let g = l;
-    let b = l;
-    if (v > 0) {
-        let m = l + l - v;
-        let sv = (v - m) / v;
-        h *= 6.0;
-        let sextant = Math.floor(h);
-        let fract = h - sextant;
-        let vsf = v * sv * fract;
-        let mid1 = m + vsf;
-        let mid2 = v - vsf;
-        switch (sextant) {
-            case 0:
-                r = v;
-                g = mid1;
-                b = m;
-                break;
-            case 1:
-                r = mid2;
-                g = v;
-                b = m;
-                break;
-            case 2:
-                r = m;
-                g = v;
-                b = mid1;
-                break;
-            case 3:
-                r = m;
-                g = mid2;
-                b = v;
-                break;
-            case 4:
-                r = mid1;
-                g = m;
-                b = v;
-                break;
-            case 5:
-                r = v;
-                g = m;
-                b = mid2;
-                break;
-        }
-    }
-    const values = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-    if (a != null && a != 1) {
-        values.push(Math.round(a * 255));
-    }
-    return values;
-}
 
-export { COLORS_NAMES, NAMES_COLORS, cmyk2hex, getAngle, hsl2Hex, hwb2hex, rgb2Hex };
+export { COLORS_NAMES, NAMES_COLORS, clamp, getAngle, getNumber };

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

@@ -0,0 +1,124 @@
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { getNumber, getAngle } from './color.js';
+import { hsl2rgb } from './rgb.js';
+import '../sourcemap/lib/encode.js';
+
+function rgb2Hex(token) {
+    let value = '#';
+    let t;
+    // @ts-ignore
+    for (let i = 0; i < 3; i++) {
+        // @ts-ignore
+        t = token.chi[i];
+        // @ts-ignore
+        value += (t.val == 'none' ? '0' : Math.round(t.typ == EnumToken.PercentageTokenType ? 255 * t.val / 100 : t.val)).toString(16).padStart(2, '0');
+    }
+    // @ts-ignore
+    if (token.chi.length == 4) {
+        // @ts-ignore
+        t = token.chi[3];
+        // @ts-ignore
+        if ((t.typ == EnumToken.IdenTokenType && t.val == 'none') ||
+            (t.typ == EnumToken.NumberTokenType && +t.val < 1) ||
+            (t.typ == EnumToken.PercentageTokenType && +t.val < 100)) {
+            // @ts-ignore
+            value += Math.round(255 * getNumber(t)).toString(16).padStart(2, '0');
+        }
+    }
+    return value;
+}
+function hsl2Hex(token) {
+    let t;
+    // @ts-ignore
+    let h = getAngle(token.chi[0]);
+    // @ts-ignore
+    t = token.chi[1];
+    // @ts-ignore
+    let s = getNumber(t);
+    // @ts-ignore
+    t = token.chi[2];
+    // @ts-ignore
+    let l = getNumber(t);
+    let a = null;
+    if (token.chi?.length == 4) {
+        // @ts-ignore
+        t = token.chi[3];
+        // @ts-ignore
+        if ((t.typ == EnumToken.IdenTokenType && t.val == 'none') || (t.typ == EnumToken.PercentageTokenType && +t.val < 100) ||
+            // @ts-ignore
+            (t.typ == EnumToken.NumberTokenType && t.val < 1)) {
+            // @ts-ignore
+            a = getNumber(t);
+        }
+    }
+    return `#${hsl2rgb(h, s, l, a).reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
+}
+function hwb2hex(token) {
+    let t;
+    // @ts-ignore
+    let h = getAngle(token.chi[0]);
+    // @ts-ignore
+    t = token.chi[1];
+    // @ts-ignore
+    let white = getNumber(t);
+    // @ts-ignore
+    t = token.chi[2];
+    // @ts-ignore
+    let black = getNumber(t);
+    let a = null;
+    if (token.chi?.length == 4) {
+        // @ts-ignore
+        t = token.chi[3];
+        // @ts-ignore
+        if ((t.typ == EnumToken.IdenTokenType && t.val == 'none') ||
+            (t.typ == EnumToken.PercentageTokenType && +t.val < 100) ||
+            (t.typ == EnumToken.NumberTokenType && +t.val < 1)) {
+            // @ts-ignore
+            a = getNumber(t);
+        }
+    }
+    const rgb = hsl2rgb(h, 1, .5, a);
+    let value;
+    for (let i = 0; i < 3; i++) {
+        value = rgb[i] / 255;
+        value *= (1 - white - black);
+        value += white;
+        rgb[i] = Math.round(value * 255);
+    }
+    return `#${rgb.reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
+}
+function cmyk2hex(token) {
+    // @ts-ignore
+    let t = token.chi[0];
+    // @ts-ignore
+    const c = getNumber(t);
+    // @ts-ignore
+    t = token.chi[1];
+    // @ts-ignore
+    const m = getNumber(t);
+    // @ts-ignore
+    t = token.chi[2];
+    // @ts-ignore
+    const y = getNumber(t);
+    // @ts-ignore
+    t = token.chi[3];
+    // @ts-ignore
+    const k = getNumber(t);
+    const rgb = [
+        Math.round(255 * (1 - Math.min(1, c * (1 - k) + k))),
+        Math.round(255 * (1 - Math.min(1, m * (1 - k) + k))),
+        Math.round(255 * (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(Math.round(255 * getNumber(t)));
+    }
+    return `#${rgb.reduce((acc, curr) => acc + curr.toString(16).padStart(2, '0'), '')}`;
+}
+
+export { cmyk2hex, hsl2Hex, hwb2hex, rgb2Hex };

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

@@ -0,0 +1,49 @@
+import { hwb2hsv } from './hsv.js';
+
+function rgb2hsl(r, g, b, a) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    let max = Math.max(r, g, b);
+    let min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    let l = (max + min) / 2;
+    if (max != min) {
+        let d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [h, s, l, a == 1 ? null : a ?? null];
+}
+// https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117#file-annotated-js
+function hsv2hsl(h, s, v) {
+    return [
+        //[hue, saturation, lightness]
+        //Range should be between 0 - 1
+        h,
+        //Saturation is very different between the two color spaces
+        //If (2-sat)*val < 1 set it to sat*val/((2-sat)*val)
+        //Otherwise sat*val/(2-(2-sat)*val)
+        //Conditional is not operating with hue, it is reassigned!
+        s * v / ((h = (2 - s) * v) < 1 ? h : 2 - h),
+        h / 2 //Lightness is (2-sat)*val/2
+        //See reassignment of hue above
+    ];
+}
+function hwb2hsl(h, w, b) {
+    return hsv2hsl(...hwb2hsv(h, w, b));
+}
+
+export { hsv2hsl, hwb2hsl, rgb2hsl };

package/dist/lib/renderer/utils/hsv.js

@@ -0,0 +1,15 @@
+function hwb2hsv(h, w, b) {
+    return [h, 1 - w / (1 - b), 1 - b];
+}
+// https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117#file-annotated-js
+function hsl2hsv(h, s, l) {
+    s *= l < .5 ? l : 1 - l;
+    return [
+        //Range should be between 0 - 1
+        h,
+        2 * s / (l + s),
+        l + s //Value
+    ];
+}
+
+export { hsl2hsv, hwb2hsv };

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

@@ -0,0 +1,50 @@
+import { hsl2hsv } from './hsv.js';
+
+function rgb2hue(r, g, b, fallback = 0) {
+    let value = rgb2value(r, g, b);
+    let whiteness = rgb2whiteness(r, g, b);
+    let delta = value - whiteness;
+    if (delta > 0) {
+        // calculate segment
+        let segment = value === r ? (g - b) / delta : (value === g
+            ? (b - r) / delta
+            : (r - g) / delta);
+        // calculate shift
+        let shift = value === r ? segment < 0
+            ? 360 / 60
+            : 0 / 60 : (value === g
+            ? 120 / 60
+            : 240 / 60);
+        // calculate hue
+        return (segment + shift) * 60;
+    }
+    return fallback;
+}
+function rgb2value(r, g, b) {
+    return Math.max(r, g, b);
+}
+function rgb2whiteness(r, g, b) {
+    return Math.min(r, g, b);
+}
+function rgb2hwb(r, g, b, a = null, fallback = 0) {
+    r *= 100 / 255;
+    g *= 100 / 255;
+    b *= 100 / 255;
+    let hue = rgb2hue(r, g, b, fallback);
+    let whiteness = rgb2whiteness(r, g, b);
+    let value = Math.round(rgb2value(r, g, b));
+    let blackness = 100 - value;
+    const result = [hue / 360, whiteness / 100, blackness / 100];
+    if (a != null) {
+        result.push(a);
+    }
+    return result;
+}
+function hsv2hwb(h, s, v) {
+    return [h, (1 - s) * v, 1 - v];
+}
+function hsl2hwb(h, s, l) {
+    return hsv2hwb(...hsl2hsv(h, s, l));
+}
+
+export { hsl2hwb, hsv2hwb, rgb2hwb };