@tbela99/css-parser 0.2.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,19 @@
-import { getAngle, COLORS_NAMES, rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex, NAMES_COLORS } from './utils/color.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 { isNewLine } from '../parser/utils/syntax.js';
+import { isColor, isNewLine } from '../parser/utils/syntax.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 = (+val).toString();
+    val = String(+val);
     if (val === '0') {
         return '0';
     }
@@ -47,7 +52,7 @@ function doRender(data, options = {}) {
             newLine: '\n',
             compress: false,
             removeComments: false,
-        }), sourcemap: false, colorConvert: true, expandNestingRules: false, preserveLicense: false, ...options
+        }), sourcemap: false, convertColor: true, expandNestingRules: false, preserveLicense: false, ...options
     };
     const startTime = performance.now();
     const errors = [];
@@ -83,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;
@@ -199,6 +202,27 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return acc + renderToken(curr, options, cache, reducer, errors);
         };
     }
+    if (token.typ == EnumToken.FunctionTokenType && colorsFunc.includes(token.val)) {
+        if (isColor(token)) {
+            // @ts-ignore
+            token.typ = EnumToken.ColorTokenType;
+            if (token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'from') {
+                // @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));
+            }
+        }
+    }
     switch (token.typ) {
         case EnumToken.ListToken:
             return token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '');
@@ -241,16 +265,76 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
-            if (options.colorConvert) {
-                if (token.kin == 'lit' && token.val.toLowerCase() == 'currentcolor') {
+            if (options.convertColor) {
+                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 = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
+                        delete 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);
+                        if ((last.typ == EnumToken.NumberTokenType && last.val == '1') || (last.typ == EnumToken.IdenTokenType && last.val == 'none')) {
+                            const prev = token.chi.at(-2);
+                            if (prev.typ == EnumToken.LiteralTokenType && prev.val == '/') {
+                                slice = true;
+                            }
+                        }
+                    }
+                    return clamp(token).val + '(' + (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
+                        const val = renderToken(curr, options, cache);
+                        if ([EnumToken.LiteralTokenType, EnumToken.CommaTokenType].includes(curr.typ)) {
+                            return acc + val;
+                        }
+                        if (acc.length > 0) {
+                            return acc + (['/', ','].includes(acc.at(-1)) ? '' : ' ') + val;
+                        }
+                        return val;
+                    }, '') + ')';
+                }
+                if (token.kin == 'lit' && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
                     return 'currentcolor';
                 }
+                clamp(token);
+                if (Array.isArray(token.chi) && token.chi.some((t) => t.typ == EnumToken.FunctionTokenType || (t.typ == EnumToken.ColorTokenType && Array.isArray(t.chi)))) {
+                    return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr) => acc + (acc.length > 0 && !(acc.endsWith('/') || curr.typ == EnumToken.LiteralTokenType) ? ' ' : '') + renderToken(curr, options, cache), '') + ')';
+                }
                 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);
@@ -258,36 +342,36 @@ 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') {
                 return token.val;
             }
+            if (Array.isArray(token.chi)) {
+                return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr) => acc + (acc.length > 0 && !(acc.endsWith('/') || curr.typ == EnumToken.LiteralTokenType) ? ' ' : '') + renderToken(curr, options, cache), '') + ')';
+            }
         case EnumToken.ParensTokenType:
         case EnumToken.FunctionTokenType:
         case EnumToken.UrlFunctionTokenType:
         case EnumToken.ImageFunctionTokenType:
-        case EnumToken.PseudoClassFuncTokenType:
         case EnumToken.TimingFunctionTokenType:
+        case EnumToken.PseudoClassFuncTokenType:
         case EnumToken.TimelineFunctionTokenType:
+        case EnumToken.GridTemplateFuncTokenType:
             if (token.typ == EnumToken.FunctionTokenType &&
                 token.val == 'calc' &&
                 token.chi.length == 1 &&
@@ -350,6 +434,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.ImportantTokenType:
             return '!important';
         case EnumToken.AttrTokenType:
+        case EnumToken.IdenListTokenType:
             return '[' + token.chi.reduce(reducer, '') + ']';
         case EnumToken.TimeTokenType:
         case EnumToken.AngleTokenType:
@@ -416,10 +501,23 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 return '0';
             }
+            if (token.typ == EnumToken.TimeTokenType) {
+                if (unit == 'ms') {
+                    // @ts-ignore
+                    const v = reduceNumber(val / 1000);
+                    if (v.length + 1 <= val.length) {
+                        return v + 's';
+                    }
+                    return val + 'ms';
+                }
+                return val + 's';
+            }
             return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
+        case EnumToken.FlexTokenType:
         case EnumToken.PercentageTokenType:
+            const uni = token.typ == EnumToken.PercentageTokenType ? '%' : 'fr';
             const perc = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
-            return options.minify && perc == '0' ? '0' : (perc.includes('/') ? perc.replace('/', '%/') : perc + '%');
+            return options.minify && perc == '0' ? '0' : (perc.includes('/') ? perc.replace('/', uni + '/') : perc + uni);
         case EnumToken.NumberTokenType:
             return token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
         case EnumToken.CommentTokenType:

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.2.0",
+  "version": "0.4.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",
@@ -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/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 };