@tbela99/css-parser 0.2.0 → 0.3.0

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 };

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

@@ -0,0 +1,66 @@
+function hwb2rgb(hue, white, black, alpha = null) {
+    const rgb = hsl2rgb(hue, 1, .5);
+    for (let i = 0; i < 3; i++) {
+        rgb[i] *= (1 - white - black);
+        rgb[i] = Math.round(rgb[i] + white);
+    }
+    if (alpha != null && alpha != 1) {
+        rgb.push(alpha);
+    }
+    return rgb;
+}
+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 { hsl2rgb, hwb2rgb };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "exports": {
     ".": "./dist/node/index.js",
     "./umd": "./dist/index-umd-web.js",
@@ -12,11 +12,11 @@
   "typings": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c;./build.sh dist/index.d.ts 'declare interface' 'declare type'",
-    "test": "web-test-runner \"test/**/*.web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/*.node.spec.js\"",
-    "test:cov": "c8 --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' \"test/**/*.node.spec.js\"",
-    "test:web-cov": "web-test-runner --playwright --browsers chromium firefox webkit \"test/**/*.web.spec.js\" --node-resolve --root-dir=.  --coverage",
+    "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test:cov": "c8 --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test:web-cov": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=. --coverage",
     "profile": "node --inspect-brk test/inspect.mjs",
-    "debug": "web-test-runner \"test/**/*.web.spec.js\" --manual --open --node-resolve --root-dir=."
+    "debug": "web-test-runner \"test/**/web.spec.js\" --manual --open --node-resolve --root-dir=."
   },
   "repository": {
     "type": "git",