@tbela99/css-parser 0.3.0 → 0.4.0

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

@@ -0,0 +1,337 @@
+import '../../parser/parse.js';
+import { isRectangularOrthogonalColorspace, isPolarColorspace } from '../../parser/utils/syntax.js';
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import { getNumber } from './color.js';
+import { srgb2rgb } from './rgb.js';
+import { powerlessColorComponent } from './utils/constants.js';
+import { getComponents } from './utils/components.js';
+import { srgb2hwb } from './hwb.js';
+import { srgb2hsl } from './hsl.js';
+import { srgbvalues, srgb2lsrgbvalues } from './srgb.js';
+import { srgb2lch, xyz2lchvalues } from './lch.js';
+import { srgb2lab } from './lab.js';
+import { srgb2p3values } from './p3.js';
+import { eq } from '../../parser/utils/eq.js';
+import { srgb2oklch } from './oklch.js';
+import { srgb2oklab } from './oklab.js';
+import { srgb2a98values } from './a98rgb.js';
+import { srgb2prophotorgbvalues } from './prophotorgb.js';
+import { srgb2xyz } from './xyz.js';
+import { XYZ_D65_to_D50, xyzd502lch } from './xyzd50.js';
+import { srgb2rec2020values } from './rec2020.js';
+import '../sourcemap/lib/encode.js';
+
+function interpolateHue(interpolationMethod, h1, h2) {
+    switch (interpolationMethod.val) {
+        case 'longer':
+            if (h2 - h1 < 180 && h2 - h1 > 0) {
+                h1 += 360;
+            }
+            else if (h2 - h1 <= 0 && h2 - h1 > -180) {
+                h2 += 360;
+            }
+            break;
+        case 'increasing':
+            if (h2 < h1) {
+                h2 += 360;
+            }
+            break;
+        case 'decreasing':
+            if (h2 > h1) {
+                h1 += 360;
+            }
+            break;
+        case 'shorter':
+        default:
+            // shorter
+            if (h2 - h1 > 180) {
+                h1 += 360;
+            }
+            else if (h2 - h1 < -180) {
+                h2 += 360;
+            }
+            break;
+    }
+    return [h1, h2];
+}
+function colorMix(colorSpace, hueInterpolationMethod, color1, percentage1, color2, percentage2) {
+    if (hueInterpolationMethod != null && isRectangularOrthogonalColorspace(colorSpace)) {
+        return null;
+    }
+    if (isPolarColorspace(colorSpace) && hueInterpolationMethod == null) {
+        hueInterpolationMethod = { typ: EnumToken.IdenTokenType, val: 'shorter' };
+    }
+    if (percentage1 == null) {
+        if (percentage2 == null) {
+            // @ts-ignore
+            percentage1 = { typ: EnumToken.NumberTokenType, val: '.5' };
+            // @ts-ignore
+            percentage2 = { typ: EnumToken.NumberTokenType, val: '.5' };
+        }
+        else {
+            if (+percentage2.val <= 0) {
+                return null;
+            }
+            if (+percentage2.val >= 100) {
+                // @ts-ignore
+                percentage2 = { typ: EnumToken.NumberTokenType, val: '1' };
+            }
+            // @ts-ignore
+            percentage1 = { typ: EnumToken.NumberTokenType, val: String(1 - percentage2.val / 100) };
+        }
+    }
+    else {
+        // @ts-ignore
+        if (percentage1.val <= 0) {
+            return null;
+        }
+        if (percentage2 == null) {
+            // @ts-ignore
+            if (percentage1.val >= 100) {
+                // @ts-ignore
+                percentage1 = { typ: EnumToken.NumberTokenType, val: '1' };
+            }
+            // @ts-ignore
+            percentage2 = { typ: EnumToken.NumberTokenType, val: String(1 - percentage1.val / 100) };
+        }
+        else {
+            // @ts-ignore
+            if (percentage2.val <= 0) {
+                return null;
+            }
+        }
+    }
+    let values1 = srgbvalues(color1);
+    let values2 = srgbvalues(color2);
+    if (values1 == null || values2 == null) {
+        return null;
+    }
+    const components1 = getComponents(color1);
+    const components2 = getComponents(color2);
+    if (eq(components1[3], powerlessColorComponent) && values2.length == 4) {
+        values1[3] = values2[3];
+    }
+    if (eq(components2[3], powerlessColorComponent) && values1.length == 4) {
+        values2[3] = values1[3];
+    }
+    const p1 = getNumber(percentage1);
+    const p2 = getNumber(percentage2);
+    const mul1 = values1.length == 4 ? values1.pop() : 1;
+    const mul2 = values2.length == 4 ? values2.pop() : 1;
+    const mul = mul1 * p1 + mul2 * p2;
+    // @ts-ignore
+    const calculate = () => [colorSpace].concat(values1.map((v1, i) => {
+        return {
+            // @ts-ignore
+            typ: EnumToken.NumberTokenType, val: String((mul1 * v1 * p1 + mul2 * values2[i] * p2) / mul)
+        };
+    }).concat(mul == 1 ? [] : [{
+            typ: EnumToken.NumberTokenType, val: String(mul)
+        }]));
+    switch (colorSpace.val) {
+        case 'srgb':
+            break;
+        case 'display-p3':
+            // @ts-ignore
+            values1 = srgb2p3values(...values1);
+            // @ts-ignore
+            values2 = srgb2p3values(...values2);
+            break;
+        case 'a98-rgb':
+            // @ts-ignore
+            values1 = srgb2a98values(...values1);
+            // @ts-ignore
+            values2 = srgb2a98values(...values2);
+            break;
+        case 'prophoto-rgb':
+            // @ts-ignore
+            values1 = srgb2prophotorgbvalues(...values1);
+            // @ts-ignore
+            values2 = srgb2prophotorgbvalues(...values2);
+            break;
+        case 'srgb-linear':
+            // @ts-ignore
+            values1 = srgb2lsrgbvalues(...values1);
+            // @ts-ignore
+            values2 = srgb2lsrgbvalues(...values2);
+            break;
+        case 'rec2020':
+            // @ts-ignore
+            values1 = srgb2rec2020values(...values1);
+            // @ts-ignore
+            values2 = srgb2rec2020values(...values2);
+            break;
+        case 'xyz':
+        case 'xyz-d65':
+        case 'xyz-d50':
+            // @ts-ignore
+            values1 = srgb2xyz(...values1);
+            // @ts-ignore
+            values2 = srgb2xyz(...values2);
+            if (colorSpace.val == 'xyz-d50') {
+                // @ts-ignore
+                values1 = XYZ_D65_to_D50(...values1);
+                // @ts-ignore
+                values2 = XYZ_D65_to_D50(...values2);
+            }
+            break;
+        case 'rgb':
+            // @ts-ignore
+            values1 = srgb2rgb(...values1);
+            // @ts-ignore
+            values2 = srgb2rgb(...values2);
+            break;
+        case 'hsl':
+            // @ts-ignore
+            values1 = srgb2hsl(...values1);
+            // @ts-ignore
+            values2 = srgb2hsl(...values2);
+            break;
+        case 'hwb':
+            // @ts-ignore
+            values1 = srgb2hwb(...values1);
+            // @ts-ignore
+            values2 = srgb2hwb(...values2);
+            break;
+        case 'lab':
+            // @ts-ignore
+            values1 = srgb2lab(...values1);
+            // @ts-ignore
+            values2 = srgb2lab(...values2);
+            break;
+        case 'lch':
+            // @ts-ignore
+            values1 = srgb2lch(...values1);
+            // @ts-ignore
+            values2 = srgb2lch(...values2);
+            break;
+        case 'oklab':
+            // @ts-ignore
+            values1 = srgb2oklab(...values1);
+            // @ts-ignore
+            values2 = srgb2oklab(...values2);
+            break;
+        case 'oklch':
+            // @ts-ignore
+            values1 = srgb2oklch(...values1);
+            // @ts-ignore
+            values2 = srgb2oklch(...values2);
+            break;
+        default:
+            return null;
+    }
+    const lchSpaces = ['lch', 'oklch'];
+    // powerless
+    if (lchSpaces.includes(color1.kin) || lchSpaces.includes(colorSpace.val)) {
+        if (eq(components1[2], powerlessColorComponent) || values1[2] == 0) {
+            values1[2] = values2[2];
+        }
+    }
+    // powerless
+    if (lchSpaces.includes(color1.kin) || lchSpaces.includes(colorSpace.val)) {
+        if (eq(components2[2], powerlessColorComponent) || values2[2] == 0) {
+            values2[2] = values1[2];
+        }
+    }
+    if (hueInterpolationMethod != null) {
+        let hueIndex = 2;
+        let multiplier = 1;
+        if (['hwb', 'hsl'].includes(colorSpace.val)) {
+            hueIndex = 0;
+            multiplier = 360;
+        }
+        const [h1, h2] = interpolateHue(hueInterpolationMethod, values1[hueIndex] * multiplier, values2[hueIndex] * multiplier);
+        values1[hueIndex] = h1 / multiplier;
+        values2[hueIndex] = h2 / multiplier;
+    }
+    switch (colorSpace.val) {
+        case 'xyz':
+        case 'xyz-d65':
+        case 'xyz-d50':
+            let values = values1.map((v1, i) => (mul1 * v1 * p1 + mul2 * values2[i] * p2) / mul)
+                .concat(mul == 1 ? [] : [mul]);
+            if (colorSpace.val == 'xyz-d50') {
+                // @ts-ignore
+                values = xyzd502lch(...values);
+            }
+            else {
+                // @ts-ignore
+                values = xyz2lchvalues(...values);
+            }
+            // @ts-ignore
+            return {
+                typ: EnumToken.ColorTokenType,
+                val: 'lch',
+                chi: values.map(v => {
+                    return {
+                        typ: EnumToken.NumberTokenType,
+                        val: String(v)
+                    };
+                }),
+                kin: 'lch'
+            };
+        case 'srgb':
+        case 'srgb-linear':
+        case 'a98-rgb':
+        case 'rec2020':
+            // @ts-ignore
+            return {
+                typ: EnumToken.ColorTokenType,
+                val: 'color',
+                chi: calculate(),
+                kin: 'color',
+                cal: 'col'
+            };
+        case 'rgb':
+        case 'hsl':
+        case 'hwb':
+        case 'lab':
+        case 'lch':
+        case 'oklab':
+        case 'oklch':
+            if (['hsl', 'hwb'].includes(colorSpace.val)) {
+                // @ts-ignore
+                if (values1[2] < 0) {
+                    // @ts-ignore
+                    values1[2] += 1;
+                }
+                // @ts-ignore
+                if (values2[2] < 0) {
+                    // @ts-ignore
+                    values2[2] += 1;
+                }
+            }
+            else if (['lch', 'oklch'].includes(colorSpace.val)) {
+                // @ts-ignore
+                if (values1[2] < 0) {
+                    // @ts-ignore
+                    values1[2] += 360;
+                }
+                // @ts-ignore
+                if (values2[2] < 0) {
+                    // @ts-ignore
+                    values2[2] += 360;
+                }
+            }
+            // @ts-ignore
+            const result = {
+                typ: EnumToken.ColorTokenType,
+                val: colorSpace.val,
+                chi: calculate().slice(1),
+                kin: colorSpace.val
+            };
+            if (colorSpace.val == 'hsl' || colorSpace.val == 'hwb') {
+                // @ts-ignore
+                result.chi[0] = { typ: EnumToken.AngleTokenType, val: String(result.chi[0].val * 360), unit: 'deg' };
+                // @ts-ignore
+                result.chi[1] = { typ: EnumToken.PercentageTokenType, val: String(result.chi[1].val * 100) };
+                // @ts-ignore
+                result.chi[2] = { typ: EnumToken.PercentageTokenType, val: String(result.chi[2].val * 100) };
+            }
+            return result;
+    }
+    return null;
+}
+
+export { colorMix };

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

@@ -0,0 +1,92 @@
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { getNumber, minmax } 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';
+
+function toHexString(acc, value) {
+    return acc + value.toString(16).padStart(2, '0');
+}
+function reduceHexValue(value) {
+    const named_color = NAMES_COLORS[expandHexValue(value)];
+    if (value.length == 7) {
+        if (value[1] == value[2] &&
+            value[3] == value[4] &&
+            value[5] == value[6]) {
+            value = `#${value[1]}${value[3]}${value[5]}`;
+        }
+    }
+    else if (value.length == 9) {
+        if (value[1] == value[2] &&
+            value[3] == value[4] &&
+            value[5] == value[6] &&
+            value[7] == value[8]) {
+            value = `#${value[1]}${value[3]}${value[5]}${value[7]}`;
+        }
+    }
+    return named_color != null && named_color.length <= value.length ? named_color : value;
+}
+function expandHexValue(value) {
+    if (value.length == 4) {
+        return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`;
+    }
+    if (value.length == 5) {
+        return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}${value[4]}${value[4]}`;
+    }
+    return value;
+}
+function rgb2hex(token) {
+    let value = '#';
+    let t;
+    // @ts-ignore
+    const components = getComponents(token);
+    // @ts-ignore
+    for (let i = 0; i < 3; i++) {
+        // @ts-ignore
+        t = components[i];
+        // @ts-ignore
+        value += (t.typ == EnumToken.Iden && t.val == 'none' ? '0' : Math.round(getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 255 : 1))).toString(16).padStart(2, '0');
+    }
+    // @ts-ignore
+    if (components.length == 4) {
+        // @ts-ignore
+        t = components[3];
+        // @ts-ignore
+        const v = (t.typ == EnumToken.IdenTokenType && t.val == 'none') ? 1 : getNumber(t);
+        // @ts-ignore
+        if (v < 1) {
+            // @ts-ignore
+            value += Math.round(255 * getNumber(t)).toString(16).padStart(2, '0');
+        }
+    }
+    return value;
+}
+function hsl2hex(token) {
+    return `${hsl2rgb(token).reduce(toHexString, '#')}`;
+}
+function hwb2hex(token) {
+    return `${hwb2rgb(token).reduce(toHexString, '#')}`;
+}
+function cmyk2hex(token) {
+    return `#${cmyk2rgb(token).reduce(toHexString, '')}`;
+}
+function oklab2hex(token) {
+    return `${oklab2rgb(token).reduce(toHexString, '#')}`;
+}
+function oklch2hex(token) {
+    return `${oklch2rgb(token).reduce(toHexString, '#')}`;
+}
+function lab2hex(token) {
+    return `${lab2rgb(token).reduce(toHexString, '#')}`;
+}
+function lch2hex(token) {
+    return `${lch2rgb(token).reduce(toHexString, '#')}`;
+}
+function srgb2hexvalues(r, g, b, alpha) {
+    return [r, g, b].concat(alpha == null || alpha == 1 ? [] : [alpha]).reduce((acc, value) => acc + minmax(Math.round(255 * value), 0, 255).toString(16).padStart(2, '0'), '#');
+}
+
+export { cmyk2hex, expandHexValue, hsl2hex, hwb2hex, lab2hex, lch2hex, oklab2hex, oklch2hex, reduceHexValue, rgb2hex, srgb2hexvalues };

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

@@ -0,0 +1,118 @@
+import { hwb2hsv } from './hsv.js';
+import { getNumber } from './color.js';
+import { hex2rgb, lab2rgb, lch2rgb, oklab2rgb, oklch2rgb } from './rgb.js';
+import './utils/constants.js';
+import { getComponents } from './utils/components.js';
+import { eq } from '../../parser/utils/eq.js';
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { hslvalues } from './srgb.js';
+import '../sourcemap/lib/encode.js';
+
+function hex2hsl(token) {
+    // @ts-ignore
+    return rgb2hslvalues(...hex2rgb(token));
+}
+function rgb2hsl(token) {
+    const chi = getComponents(token);
+    // @ts-ignore
+    let t = chi[0];
+    // @ts-ignore
+    let r = getNumber(t);
+    // @ts-ignore
+    t = chi[1];
+    // @ts-ignore
+    let g = getNumber(t);
+    // @ts-ignore
+    t = chi[2];
+    // @ts-ignore
+    let b = getNumber(t);
+    // @ts-ignore
+    t = chi[3];
+    // @ts-ignore
+    let a = null;
+    if (t != null && !eq(t, { typ: EnumToken.IdenTokenType, val: 'none' })) {
+        // @ts-ignore
+        a = getNumber(t) / 255;
+    }
+    const values = [r, g, b];
+    if (a != null && a != 1) {
+        values.push(a);
+    }
+    // @ts-ignore
+    return rgb2hslvalues(...values);
+}
+// https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117#file-annotated-js
+function hsv2hsl(h, s, v, a) {
+    const result = [
+        //[hue, saturation, lightness]
+        //Range should be between 0 - 1
+        h, //Hue stays the same
+        //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
+    ];
+    if (a != null) {
+        result.push(a);
+    }
+    return result;
+}
+function hwb2hsl(token) {
+    // @ts-ignore
+    return hsv2hsl(...hwb2hsv(...Object.values(hslvalues(token))));
+}
+function lab2hsl(token) {
+    // @ts-ignore
+    return rgb2hslvalues(...lab2rgb(token));
+}
+function lch2hsl(token) {
+    // @ts-ignore
+    return rgb2hslvalues(...lch2rgb(token));
+}
+function oklab2hsl(token) {
+    // @ts-ignore
+    return rgb2hslvalues(...oklab2rgb(token));
+}
+function oklch2hsl(token) {
+    // @ts-ignore
+    return rgb2hslvalues(...oklch2rgb(token));
+}
+function rgb2hslvalues(r, g, b, a = null) {
+    return srgb2hsl(r / 255, g / 255, b / 255, a);
+}
+function srgb2hsl(r, g, b, a = null) {
+    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;
+    }
+    const hsl = [h, s, l];
+    if (a != null && a < 1) {
+        // @ts-ignore
+        return hsl.concat([a]);
+    }
+    // @ts-ignore
+    return hsl;
+}
+
+export { hex2hsl, hsv2hsl, hwb2hsl, lab2hsl, lch2hsl, oklab2hsl, oklch2hsl, rgb2hsl, rgb2hslvalues, srgb2hsl };

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

@@ -0,0 +1,20 @@
+function hwb2hsv(h, w, b, a) {
+    // @ts-ignore
+    return [h, 1 - w / (1 - b), 1 - b, a];
+}
+// https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117#file-annotated-js
+function hsl2hsv(h, s, l, a = null) {
+    s *= l < .5 ? l : 1 - l;
+    const result = [
+        //Range should be between 0 - 1
+        h, //Hue stays the same
+        2 * s / (l + s), //Saturation
+        l + s //Value
+    ];
+    if (a != null) {
+        result.push(a);
+    }
+    return result;
+}
+
+export { hsl2hsv, hwb2hsv };

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

@@ -0,0 +1,101 @@
+import { hsl2hsv } from './hsv.js';
+import './utils/constants.js';
+import { getComponents } from './utils/components.js';
+import { getNumber, getAngle } from './color.js';
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { lab2srgb, lch2srgb, oklab2srgb, oklch2srgb } from './srgb.js';
+import { eq } from '../../parser/utils/eq.js';
+import '../sourcemap/lib/encode.js';
+
+function rgb2hwb(token) {
+    // @ts-ignore
+    return srgb2hwb(...getComponents(token).map((t, index) => {
+        if (index == 3 && eq(t, { typ: EnumToken.IdenTokenType, val: 'none' })) {
+            return 1;
+        }
+        return getNumber(t) / 255;
+    }));
+}
+function hsl2hwb(token) {
+    // @ts-ignore
+    return hsl2hwbvalues(...getComponents(token).map((t, index) => {
+        if (index == 3 && eq(t, { typ: EnumToken.IdenTokenType, val: 'none' })) {
+            return 1;
+        }
+        if (index == 0) {
+            return getAngle(t);
+        }
+        return getNumber(t);
+    }));
+}
+function lab2hwb(token) {
+    // @ts-ignore
+    return srgb2hwb(...lab2srgb(token));
+}
+function lch2hwb(token) {
+    // @ts-ignore
+    return srgb2hwb(...lch2srgb(token));
+}
+function oklab2hwb(token) {
+    // @ts-ignore
+    return srgb2hwb(...oklab2srgb(token));
+}
+function oklch2hwb(token) {
+    // @ts-ignore
+    return srgb2hwb(...oklch2srgb(token));
+}
+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 srgb2hwb(r, g, b, a = null, fallback = 0) {
+    r *= 100;
+    g *= 100;
+    b *= 100;
+    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, a = null) {
+    const result = [h, (1 - s) * v, 1 - v];
+    if (a != null) {
+        result.push(a);
+    }
+    return result;
+}
+function hsl2hwbvalues(h, s, l, a = null) {
+    // @ts-ignore
+    return hsv2hwb(...hsl2hsv(h, s, l, a));
+}
+
+export { hsl2hwb, hsl2hwbvalues, hsv2hwb, lab2hwb, lch2hwb, oklab2hwb, oklch2hwb, rgb2hwb, srgb2hwb };