@tbela99/css-parser 0.3.0 → 0.4.0

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

@@ -0,0 +1,35 @@
+// from https://www.w3.org/TR/css-color-4/multiply-matrices.js
+/**
+ * Simple matrix (and vector) multiplication
+ * Warning: No error handling for incompatible dimensions!
+ * @author Lea Verou 2020 MIT License
+ */
+// A is m x n. B is n x p. product is m x p.
+function multiplyMatrices(A, B) {
+    let m = A.length;
+    if (!Array.isArray(A[0])) {
+        // A is vector, convert to [[a, b, c, ...]]
+        A = [A];
+    }
+    if (!Array.isArray(B[0])) {
+        // B is vector, convert to [[a], [b], [c], ...]]
+        B = B.map((x) => [x]);
+    }
+    let p = B[0].length;
+    let B_cols = B[0].map((_, i) => B.map((x) => x[i])); // transpose B
+    let product = A.map((row) => B_cols.map((col) => {
+        if (!Array.isArray(row)) {
+            return col.reduce((a, c) => a + c * row, 0);
+        }
+        return row.reduce((a, c, i) => a + c * (col[i] || 0), 0);
+    }));
+    if (m === 1) {
+        product = product[0]; // Avoid [[a, b, c, ...]]
+    }
+    if (p === 1) {
+        return product.map((x) => x[0]); // Avoid [[a], [b], [c], ...]]
+    }
+    return product;
+}
+
+export { multiplyMatrices };

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

@@ -0,0 +1,64 @@
+import { multiplyMatrices } from './utils/matrix.js';
+import './utils/constants.js';
+import '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { lsrgb2srgbvalues, srgb2lsrgbvalues } from './srgb.js';
+import '../sourcemap/lib/encode.js';
+
+function xyzd502srgb(x, y, z) {
+    // @ts-ignore
+    return lsrgb2srgbvalues(
+    /* r: */
+    x * 3.1341359569958707 -
+        y * 1.6173863321612538 -
+        0.4906619460083532 * z, 
+    /*  g: */
+    x * -0.978795502912089 +
+        y * 1.916254567259524 +
+        0.03344273116131949 * z, 
+    /*    b: */
+    x * 0.07195537988411677 -
+        y * 0.2289768264158322 +
+        1.405386058324125 * z);
+}
+function XYZ_to_lin_sRGB(x, y, z) {
+    // convert XYZ to linear-light sRGB
+    const M = [
+        [12831 / 3959, -329 / 214, -1974 / 3959],
+        [-851781 / 878810, 1648619 / 878810, 36519 / 878810],
+        [705 / 12673, -2585 / 12673, 705 / 667],
+    ];
+    const XYZ = [x, y, z]; // convert to XYZ
+    return multiplyMatrices(M, XYZ).map((v) => v);
+}
+function XYZ_D50_to_D65(x, y, z) {
+    // Bradford chromatic adaptation from D50 to D65
+    const M = [
+        [0.9554734527042182, -0.023098536874261423, 0.0632593086610217],
+        [-0.028369706963208136, 1.0099954580058226, 0.021041398966943008],
+        [0.012314001688319899, -0.020507696433477912, 1.3303659366080753]
+    ];
+    const XYZ = [x, y, z];
+    return multiplyMatrices(M, XYZ); //.map((v: number) => v);
+}
+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
+    ];
+    if (alpha != null && alpha != 1) {
+        rgb.push(alpha);
+    }
+    return rgb;
+}
+
+export { XYZ_D50_to_D65, XYZ_to_lin_sRGB, srgb2xyz, xyzd502srgb };

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

@@ -0,0 +1,33 @@
+import { multiplyMatrices } from './utils/matrix.js';
+import './utils/constants.js';
+import '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../parser/parse.js';
+import { xyz2lab } from './lab.js';
+import { lab2lchvalues } from './lch.js';
+import { XYZ_D50_to_D65 } from './xyz.js';
+import '../sourcemap/lib/encode.js';
+
+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
+    // @ts-ignore
+    return lab2lchvalues(l, a, b, alpha);
+}
+function XYZ_D65_to_D50(x, y, z) {
+    // 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 = [
+        [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
+        [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
+        [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371]
+    ];
+    return multiplyMatrices(M, [x, y, z]);
+}
+
+export { XYZ_D65_to_D50, xyzd502lch };

package/dist/lib/renderer/render.js

@@ -1,14 +1,17 @@
-import { getAngle, clamp, COLORS_NAMES, NAMES_COLORS } from './utils/color.js';
-import { rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex } from './utils/hex.js';
+import { getAngle, color2srgbvalues, clamp } from './color/color.js';
+import { colorFuncColorSpace, COLORS_NAMES } from './color/utils/constants.js';
+import { getComponents } from './color/utils/components.js';
+import { reduceHexValue, srgb2hexvalues, rgb2hex, hsl2hex, hwb2hex, cmyk2hex, oklab2hex, oklch2hex, lab2hex, lch2hex } from './color/hex.js';
 import { EnumToken } from '../ast/types.js';
 import '../ast/minify.js';
 import { expand } from '../ast/expand.js';
+import { colorMix } from './color/colormix.js';
+import { parseRelativeColor } from './color/relativecolor.js';
 import { SourceMap } from './sourcemap/sourcemap.js';
 import '../parser/parse.js';
 import { isColor, isNewLine } from '../parser/utils/syntax.js';
-import { parseRelativeColor } from './utils/calccolor.js';
 
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk'];
+const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
 function reduceNumber(val) {
     val = String(+val);
     if (val === '0') {
@@ -85,12 +88,10 @@ function updateSourceMap(node, options, cache, sourcemap, position, str) {
     if ([EnumToken.RuleNodeType, EnumToken.AtRuleNodeType].includes(node.typ)) {
         let src = node.loc?.src ?? '';
         let output = options.output ?? '';
-        // if (src !== '') {
         if (!(src in cache)) {
             // @ts-ignore
             cache[src] = options.resolve(src, options.cwd ?? '').relative;
         }
-        // }
         if (!(output in cache)) {
             // @ts-ignore
             cache[output] = options.resolve(output, options.cwd).relative;
@@ -209,7 +210,15 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 // @ts-ignore
                 token.cal = 'rel';
             }
+            else if (token.val == 'color-mix' && token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'in') {
+                // @ts-ignore
+                token.cal = 'mix';
+            }
             else {
+                if (token.val == 'color') {
+                    // @ts-ignore
+                    token.cal = 'col';
+                }
                 token.chi = token.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
             }
         }
@@ -257,17 +266,41 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return '/';
         case EnumToken.ColorTokenType:
             if (options.convertColor) {
-                if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb'].includes(token.val)) {
-                    const chi = token.chi.filter(x => ![
-                        EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType
-                    ].includes(x.typ));
-                    const components = parseRelativeColor(token.val.split(''), chi[1], chi[2], chi[3], chi[4], chi[5]);
+                if (token.cal == 'mix' && token.val == 'color-mix') {
+                    const children = token.chi.reduce((acc, t) => {
+                        if (t.typ == EnumToken.ColorTokenType) {
+                            acc.push([t]);
+                        }
+                        else {
+                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
+                                acc[acc.length - 1].push(t);
+                            }
+                        }
+                        return acc;
+                    }, [[]]);
+                    const value = colorMix(children[0][1], children[0][2], children[1][0], children[1][1], children[2][0], children[2][1]);
+                    if (value != null) {
+                        token = value;
+                    }
+                }
+                if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(token.val)) {
+                    const chi = getComponents(token);
+                    const offset = token.val == 'color' ? 2 : 1;
+                    // @ts-ignore
+                    const color = chi[1];
+                    const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
                     if (components != null) {
-                        token.chi = Object.values(components);
+                        token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
                         delete token.cal;
                     }
                 }
-                if (token.cal) {
+                if (token.val == 'color') {
+                    if (token.chi[0].typ == EnumToken.IdenTokenType && colorFuncColorSpace.includes(token.chi[0].val.toLowerCase())) {
+                        // @ts-ignore
+                        return reduceHexValue(srgb2hexvalues(...color2srgbvalues(token)));
+                    }
+                }
+                if (token.cal != null) {
                     let slice = false;
                     if (token.cal == 'rel') {
                         const last = token.chi.at(-1);
@@ -298,10 +331,10 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 let value = token.kin == 'hex' ? token.val.toLowerCase() : (token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : '');
                 if (token.val == 'rgb' || token.val == 'rgba') {
-                    value = rgb2Hex(token);
+                    value = rgb2hex(token);
                 }
                 else if (token.val == 'hsl' || token.val == 'hsla') {
-                    value = hsl2Hex(token);
+                    value = hsl2hex(token);
                 }
                 else if (token.val == 'hwb') {
                     value = hwb2hex(token);
@@ -309,24 +342,20 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 else if (token.val == 'device-cmyk') {
                     value = cmyk2hex(token);
                 }
-                const named_color = NAMES_COLORS[value];
+                else if (token.val == 'oklab') {
+                    value = oklab2hex(token);
+                }
+                else if (token.val == 'oklch') {
+                    value = oklch2hex(token);
+                }
+                else if (token.val == 'lab') {
+                    value = lab2hex(token);
+                }
+                else if (token.val == 'lch') {
+                    value = lch2hex(token);
+                }
                 if (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;
+                    return reduceHexValue(value);
                 }
             }
             if (token.kin == 'hex' || token.kin == 'lit') {

package/dist/node/index.js

@@ -6,7 +6,7 @@ import { doRender } from '../lib/renderer/render.js';
 export { renderToken } from '../lib/renderer/render.js';
 import { doParse } from '../lib/parser/parse.js';
 export { parseString, parseTokens } from '../lib/parser/parse.js';
-import '../lib/renderer/utils/color.js';
+import '../lib/renderer/color/utils/constants.js';
 import { resolve, dirname } from '../lib/fs/resolve.js';
 import { load } from './load.js';
 

package/dist/node/load.js

@@ -1,4 +1,4 @@
-import { readFile } from 'fs/promises';
+import { readFile } from 'node:fs/promises';
 import { resolve, matchUrl } from '../lib/fs/resolve.js';
 
 function parseResponse(response) {

package/dist/web/index.js

@@ -6,7 +6,7 @@ import { doRender } from '../lib/renderer/render.js';
 export { renderToken } from '../lib/renderer/render.js';
 import { doParse } from '../lib/parser/parse.js';
 export { parseString, parseTokens } from '../lib/parser/parse.js';
-import '../lib/renderer/utils/color.js';
+import '../lib/renderer/color/utils/constants.js';
 import { resolve, dirname } from '../lib/fs/resolve.js';
 import { load } from './load.js';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "exports": {
     ".": "./dist/node/index.js",
     "./umd": "./dist/index-umd-web.js",
@@ -45,19 +45,20 @@
   "homepage": "https://github.com/tbela99/css-parser#readme",
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@types/chai": "^4.3.5",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^20.4.10",
-    "@web/test-runner": "^0.17.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/chai": "^4.3.12",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^20.11.25",
+    "@web/test-runner": "^0.18.1",
     "@web/test-runner-playwright": "^0.11.0",
-    "c8": "^8.0.1",
-    "mocha": "^10.2.0",
-    "rollup": "^3.28.0",
-    "rollup-plugin-dts": "^5.3.1",
-    "tslib": "^2.6.1"
+    "c8": "^9.1.0",
+    "mocha": "^10.4.0",
+    "playwright": "^1.42.1",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "tslib": "^2.6.2"
   }
 }

package/quickjs.sh

@@ -0,0 +1 @@
+qjsc -e -o c/css.c dist/index-umd-web.js

package/dist/lib/ast/features/utils/math.js

@@ -1,95 +0,0 @@
-import { EnumToken } from '../../types.js';
-import { reduceNumber } from '../../../renderer/render.js';
-
-const gcd = (x, y) => {
-    x = Math.abs(x);
-    y = Math.abs(y);
-    let t;
-    if (x == 0 || y == 0) {
-        return 1;
-    }
-    while (y) {
-        t = y;
-        y = x % y;
-        x = t;
-    }
-    return x;
-};
-function compute(a, b, op) {
-    if (typeof a == 'number' && typeof b == 'number') {
-        switch (op) {
-            case EnumToken.Add:
-                return a + b;
-            case EnumToken.Sub:
-                return a - b;
-            case EnumToken.Mul:
-                return a * b;
-            case EnumToken.Div:
-                const r = simplify(a, b);
-                if (r[1] == 1) {
-                    return r[0];
-                }
-                const result = a / b;
-                const r2 = reduceNumber(r[0]) + '/' + reduceNumber(r[1]);
-                return reduceNumber(result).length <= r2.length ? result : {
-                    typ: EnumToken.FractionTokenType,
-                    l: { typ: EnumToken.NumberTokenType, val: reduceNumber(r[0]) },
-                    r: { typ: EnumToken.NumberTokenType, val: reduceNumber(r[1]) }
-                };
-        }
-    }
-    let l1 = typeof a == 'number' ? {
-        typ: EnumToken.FractionTokenType,
-        l: { typ: EnumToken.NumberTokenType, val: reduceNumber(a) },
-        r: { typ: EnumToken.NumberTokenType, val: '1' }
-    } : a;
-    let r1 = typeof b == 'number' ? {
-        typ: EnumToken.FractionTokenType,
-        l: { typ: EnumToken.NumberTokenType, val: reduceNumber(b) },
-        r: { typ: EnumToken.NumberTokenType, val: '1' }
-    } : b;
-    let l2;
-    let r2;
-    switch (op) {
-        case EnumToken.Add:
-            // @ts-ignore
-            l2 = l1.l.val * r1.r.val + l1.r.val * r1.l.val;
-            // @ts-ignore
-            r2 = l1.r.val * r1.r.val;
-            break;
-        case EnumToken.Sub:
-            // @ts-ignore
-            l2 = l1.l.val * r1.r.val - l1.r.val * r1.l.val;
-            // @ts-ignore
-            r2 = l1.r.val * r1.r.val;
-            break;
-        case EnumToken.Mul:
-            // @ts-ignore
-            l2 = l1.l.val * r1.l.val;
-            // @ts-ignore
-            r2 = l1.r.val * r1.r.val;
-            break;
-        case EnumToken.Div:
-            // @ts-ignore
-            l2 = l1.l.val * r1.r.val;
-            // @ts-ignore
-            r2 = l1.r.val * r1.l.val;
-            break;
-    }
-    const a2 = simplify(l2, r2);
-    if (a2[1] == 1) {
-        return a2[0];
-    }
-    const result = a2[0] / a2[1];
-    return reduceNumber(result).length <= reduceNumber(a2[0]).length + 1 + reduceNumber(a2[1]).length ? result : {
-        typ: EnumToken.FractionTokenType,
-        l: { typ: EnumToken.NumberTokenType, val: reduceNumber(a2[0]) },
-        r: { typ: EnumToken.NumberTokenType, val: reduceNumber(a2[1]) }
-    };
-}
-function simplify(a, b) {
-    const g = gcd(a, b);
-    return g > 1 ? [a / g, b / g] : [a, b];
-}
-
-export { compute, gcd, simplify };

package/dist/lib/iterable/set.js

@@ -1,48 +0,0 @@
-class IterableWeakSet {
-    #weakset = new WeakSet;
-    #set = new Set;
-    constructor(iterable) {
-        if (iterable) {
-            for (const value of iterable) {
-                const ref = new WeakRef(value);
-                this.#weakset.add(value);
-                this.#set.add(ref);
-            }
-        }
-    }
-    has(value) {
-        return this.#weakset.has(value);
-    }
-    delete(value) {
-        if (this.#weakset.has(value)) {
-            for (const ref of this.#set) {
-                if (ref.deref() === value) {
-                    this.#set.delete(ref);
-                    break;
-                }
-            }
-            return this.#weakset.delete(value);
-        }
-        return false;
-    }
-    add(value) {
-        if (!this.#weakset.has(value)) {
-            this.#weakset.add(value);
-            this.#set.add(new WeakRef(value));
-        }
-        return this;
-    }
-    *[Symbol.iterator]() {
-        for (const ref of new Set(this.#set)) {
-            const key = ref.deref();
-            if (key != null) {
-                yield key;
-            }
-            else {
-                this.#set.delete(ref);
-            }
-        }
-    }
-}
-
-export { IterableWeakSet };

package/dist/lib/iterable/weakmap.js

@@ -1,53 +0,0 @@
-class IterableWeakMap {
-    #map;
-    #set;
-    constructor(iterable) {
-        this.#map = new WeakMap;
-        this.#set = new Set;
-        if (iterable) {
-            for (const [key, value] of iterable) {
-                const ref = new WeakRef(key);
-                this.#set.add(ref);
-                this.#map.set(key, value);
-            }
-        }
-    }
-    has(key) {
-        return this.#map.has(key);
-    }
-    set(key, value) {
-        if (!this.#map.has(key)) {
-            this.#set.add(new WeakRef(key));
-        }
-        this.#map.set(key, value);
-        return this;
-    }
-    get(key) {
-        return this.#map.get(key);
-    }
-    delete(key) {
-        if (this.#map.has(key)) {
-            for (const ref of this.#set) {
-                if (ref.deref() === key) {
-                    this.#set.delete(ref);
-                    break;
-                }
-            }
-            return this.#map.delete(key);
-        }
-        return false;
-    }
-    *[Symbol.iterator]() {
-        for (const ref of new Set(this.#set)) {
-            const key = ref.deref();
-            if (key == null) {
-                this.#set.delete(ref);
-                continue;
-            }
-            // @ts-ignore
-            yield [key, this.#map.get(key)];
-        }
-    }
-}
-
-export { IterableWeakMap };