html2canvas-pro 2.1.0 → 2.2.0

package/dist/lib/css/layout/text.js

@@ -76,18 +76,19 @@ const createRange = (node, offset, length) => {
 };
 const segmentGraphemes = (value) => {
     if (features_1.FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
-        const segmenter = new Intl.Segmenter(void 0, { granularity: 'grapheme' });
-        return Array.from(segmenter.segment(value)).map((segment) => segment.segment);
+        // Intl.Segmenter is TC39 Stage 4 but not yet in TS lib types
+        const Segmenter = Intl;
+        const seg = new Segmenter.Segmenter(void 0, { granularity: 'grapheme' });
+        return Array.from(seg.segment(value)).map((s) => s.segment);
     }
     return (0, text_segmentation_1.splitGraphemes)(value);
 };
 exports.segmentGraphemes = segmentGraphemes;
 const segmentWords = (value, styles) => {
     if (features_1.FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
-        const segmenter = new Intl.Segmenter(void 0, {
-            granularity: 'word'
-        });
-        return Array.from(segmenter.segment(value)).map((segment) => segment.segment);
+        const Segmenter = Intl;
+        const seg = new Segmenter.Segmenter(void 0, { granularity: 'word' });
+        return Array.from(seg.segment(value)).map((s) => s.segment);
     }
     return breakWords(value, styles);
 };

package/dist/lib/css/property-descriptors/background-blend-mode.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backgroundBlendMode = exports.MIX_BLEND_MODE = void 0;
+const parser_1 = require("../syntax/parser");
+exports.MIX_BLEND_MODE = {
+    NORMAL: 'normal',
+    MULTIPLY: 'multiply',
+    SCREEN: 'screen',
+    OVERLAY: 'overlay',
+    DARKEN: 'darken',
+    LIGHTEN: 'lighten',
+    COLOR_DODGE: 'color-dodge',
+    COLOR_BURN: 'color-burn',
+    HARD_LIGHT: 'hard-light',
+    SOFT_LIGHT: 'soft-light',
+    DIFFERENCE: 'difference',
+    EXCLUSION: 'exclusion',
+    HUE: 'hue',
+    SATURATION: 'saturation',
+    COLOR: 'color',
+    LUMINOSITY: 'luminosity'
+};
+const VALID_VALUES = new Set(Object.values(exports.MIX_BLEND_MODE));
+exports.backgroundBlendMode = {
+    name: 'background-blend-mode',
+    initialValue: 'normal',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (_context, tokens) => {
+        const modes = [];
+        const filtered = tokens.filter(parser_1.nonFunctionArgSeparator);
+        for (const token of filtered) {
+            if ((0, parser_1.isIdentToken)(token)) {
+                if (VALID_VALUES.has(token.value)) {
+                    modes.push(token.value);
+                }
+            }
+        }
+        return modes.length > 0 ? modes : ['normal'];
+    }
+};

package/dist/lib/css/property-descriptors/border-image-repeat.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderImageRepeat = exports.BORDER_IMAGE_REPEAT = void 0;
+const parser_1 = require("../syntax/parser");
+var BORDER_IMAGE_REPEAT;
+(function (BORDER_IMAGE_REPEAT) {
+    BORDER_IMAGE_REPEAT[BORDER_IMAGE_REPEAT["STRETCH"] = 0] = "STRETCH";
+    BORDER_IMAGE_REPEAT[BORDER_IMAGE_REPEAT["REPEAT"] = 1] = "REPEAT";
+    BORDER_IMAGE_REPEAT[BORDER_IMAGE_REPEAT["ROUND"] = 2] = "ROUND";
+    BORDER_IMAGE_REPEAT[BORDER_IMAGE_REPEAT["SPACE"] = 3] = "SPACE";
+})(BORDER_IMAGE_REPEAT || (exports.BORDER_IMAGE_REPEAT = BORDER_IMAGE_REPEAT = {}));
+const parseRepeatValue = (value) => {
+    switch (value) {
+        case 'repeat':
+            return BORDER_IMAGE_REPEAT.REPEAT;
+        case 'round':
+            return BORDER_IMAGE_REPEAT.ROUND;
+        case 'space':
+            return BORDER_IMAGE_REPEAT.SPACE;
+        case 'stretch':
+        default:
+            return BORDER_IMAGE_REPEAT.STRETCH;
+    }
+};
+exports.borderImageRepeat = {
+    name: 'border-image-repeat',
+    initialValue: 'stretch',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (_context, tokens) => {
+        const filtered = tokens.filter(parser_1.nonWhiteSpace);
+        const values = [];
+        for (const token of filtered) {
+            if ((0, parser_1.isIdentToken)(token)) {
+                values.push(parseRepeatValue(token.value));
+            }
+        }
+        const horizontal = values[0] ?? BORDER_IMAGE_REPEAT.STRETCH;
+        const vertical = values[1] ?? horizontal;
+        return { horizontal, vertical };
+    }
+};

package/dist/lib/css/property-descriptors/border-image-slice.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderImageSlice = void 0;
+const parser_1 = require("../syntax/parser");
+const fillSides = (sides) => {
+    const result = [...sides];
+    if (result.length === 1) {
+        result.push(result[0], result[0], result[0]);
+    }
+    else if (result.length === 2) {
+        result.push(result[0], result[1]);
+    }
+    else if (result.length === 3) {
+        result.push(result[1]);
+    }
+    return result.slice(0, 4);
+};
+exports.borderImageSlice = {
+    name: 'border-image-slice',
+    initialValue: '100%',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (_context, tokens) => {
+        const filtered = tokens.filter(parser_1.nonWhiteSpace);
+        const values = [];
+        let fill = false;
+        let unit = 'percent';
+        for (const token of filtered) {
+            if ((0, parser_1.isIdentToken)(token) && token.value === 'fill') {
+                fill = true;
+                continue;
+            }
+            if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+                values.push(token.number);
+                unit = 'number';
+            }
+            else if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
+                values.push(token.number);
+                unit = 'percent';
+            }
+        }
+        const [top, right, bottom, left] = fillSides(values.length > 0 ? values : [100]);
+        return { top, right, bottom, left, fill, unit };
+    }
+};

package/dist/lib/css/property-descriptors/border-image-source.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderImageSource = void 0;
+const parser_1 = require("../syntax/parser");
+const image_1 = require("../types/image");
+exports.borderImageSource = {
+    name: 'border-image-source',
+    initialValue: 'none',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (context, tokens) => {
+        if (tokens.length === 0) {
+            return null;
+        }
+        const filtered = tokens.filter((t) => (0, parser_1.nonFunctionArgSeparator)(t) && (0, image_1.isSupportedImage)(t));
+        if (filtered.length === 0) {
+            return null;
+        }
+        return image_1.image.parse(context, filtered[0]);
+    }
+};

package/dist/lib/css/property-descriptors/border-radius.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderBottomLeftRadius = exports.borderBottomRightRadius = exports.borderTopRightRadius = exports.borderTopLeftRadius = void 0;
 const length_percentage_1 = require("../types/length-percentage");
 const borderRadiusForSide = (side) => ({
-    name: `border-radius-${side}`,
+    name: `border-${side}-radius`,
     initialValue: '0 0',
     prefix: false,
     type: 1 /* PropertyDescriptorParsingType.LIST */,

package/dist/lib/css/property-descriptors/box-decoration-break.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boxDecorationBreak = void 0;
+exports.boxDecorationBreak = {
+    name: 'box-decoration-break',
+    initialValue: 'slice',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, token) => {
+        switch (token) {
+            case 'clone':
+                return 1 /* BOX_DECORATION_BREAK.CLONE */;
+            case 'slice':
+            default:
+                return 0 /* BOX_DECORATION_BREAK.SLICE */;
+        }
+    }
+};

package/dist/lib/css/property-descriptors/counter-increment.js

@@ -1,7 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.counterIncrement = void 0;
+exports.counterIncrement = exports.parseCounterValue = void 0;
 const parser_1 = require("../syntax/parser");
+/** Shared counter-ID parsing: returns next number or a fallback default. */
+const parseCounterValue = (tokens, defaultNumber) => {
+    const entries = [];
+    const filtered = tokens.filter(parser_1.nonWhiteSpace);
+    for (let i = 0; i < filtered.length; i++) {
+        const counter = filtered[i];
+        const next = filtered[i + 1];
+        if (counter.type === 20 /* TokenType.IDENT_TOKEN */) {
+            const num = next && (0, parser_1.isNumberToken)(next) ? next.number : defaultNumber;
+            entries.push([counter.value, num]);
+        }
+    }
+    return entries;
+};
+exports.parseCounterValue = parseCounterValue;
 exports.counterIncrement = {
     name: 'counter-increment',
     initialValue: 'none',
@@ -15,16 +30,6 @@ exports.counterIncrement = {
         if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
             return null;
         }
-        const increments = [];
-        const filtered = tokens.filter(parser_1.nonWhiteSpace);
-        for (let i = 0; i < filtered.length; i++) {
-            const counter = filtered[i];
-            const next = filtered[i + 1];
-            if (counter.type === 20 /* TokenType.IDENT_TOKEN */) {
-                const increment = next && (0, parser_1.isNumberToken)(next) ? next.number : 1;
-                increments.push({ counter: counter.value, increment });
-            }
-        }
-        return increments;
+        return (0, exports.parseCounterValue)(tokens, 1).map(([counter, increment]) => ({ counter, increment }));
     }
 };

package/dist/lib/css/property-descriptors/counter-reset.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.counterReset = void 0;
-const parser_1 = require("../syntax/parser");
+const counter_increment_1 = require("./counter-increment");
 exports.counterReset = {
     name: 'counter-reset',
     initialValue: 'none',
@@ -11,16 +11,8 @@ exports.counterReset = {
         if (tokens.length === 0) {
             return [];
         }
-        const resets = [];
-        const filtered = tokens.filter(parser_1.nonWhiteSpace);
-        for (let i = 0; i < filtered.length; i++) {
-            const counter = filtered[i];
-            const next = filtered[i + 1];
-            if ((0, parser_1.isIdentToken)(counter) && counter.value !== 'none') {
-                const reset = next && (0, parser_1.isNumberToken)(next) ? next.number : 0;
-                resets.push({ counter: counter.value, reset });
-            }
-        }
-        return resets;
+        return (0, counter_increment_1.parseCounterValue)(tokens, 0)
+            .filter(([counter]) => counter !== 'none')
+            .map(([counter, reset]) => ({ counter, reset }));
     }
 };

package/dist/lib/css/property-descriptors/filter.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filter = void 0;
+exports.filter = {
+    name: 'filter',
+    initialValue: 'none',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (_context, tokens) => {
+        if (tokens.length === 1 && tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ && tokens[0].value === 'none') {
+            return null;
+        }
+        const parts = [];
+        for (const token of tokens) {
+            if (token.type === 18 /* TokenType.FUNCTION */) {
+                const fn = token;
+                // Reconstruct the function string from its name + values
+                const renderedArgs = renderFilterArgs(fn.values);
+                // Canvas API supports the same CSS filter string format
+                switch (fn.name) {
+                    case 'blur':
+                        parts.push(`blur(${renderedArgs}px)`);
+                        break;
+                    case 'brightness':
+                    case 'contrast':
+                    case 'invert':
+                    case 'opacity':
+                    case 'saturate':
+                    case 'sepia':
+                        parts.push(`${fn.name}(${renderedArgs})`);
+                        break;
+                    case 'grayscale':
+                        parts.push(`grayscale(${renderedArgs})`);
+                        break;
+                    case 'hue-rotate':
+                        parts.push(`hue-rotate(${renderedArgs}deg)`);
+                        break;
+                    case 'drop-shadow':
+                        parts.push(`drop-shadow(${renderedArgs})`);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        return parts.length > 0 ? parts.join(' ') : null;
+    }
+};
+/**
+ * Render filter function arguments back into a CSS string suitable for Canvas API.
+ * Canvas 2D `ctx.filter` accepts the same CSS filter function strings.
+ */
+const renderFilterArgs = (values) => {
+    const parts = [];
+    for (const v of values) {
+        if (v.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
+            continue;
+        }
+        if (v.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+            parts.push(`${v.number}${v.unit}`);
+        }
+        else if (v.type === 17 /* TokenType.NUMBER_TOKEN */) {
+            parts.push(`${v.number}`);
+        }
+        else if (v.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
+            parts.push(`${v.number}%`);
+        }
+        else if (v.type === 20 /* TokenType.IDENT_TOKEN */) {
+            parts.push(v.value);
+        }
+        else if (v.type === 5 /* TokenType.HASH_TOKEN */) {
+            parts.push(`#${v.value}`);
+        }
+    }
+    return parts.join(' ');
+};

package/dist/lib/css/property-descriptors/font-variant-ligatures.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontVariantLigatures = void 0;
+exports.fontVariantLigatures = {
+    name: 'font-variant-ligatures',
+    initialValue: 'normal',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, value) => {
+        switch (value) {
+            case 'none':
+                return 1 /* FONT_VARIANT_LIGATURES.NONE */;
+            case 'common-ligatures':
+                return 2 /* FONT_VARIANT_LIGATURES.COMMON_LIGATURES */;
+            case 'no-common-ligatures':
+                return 3 /* FONT_VARIANT_LIGATURES.NO_COMMON_LIGATURES */;
+            case 'discretionary-ligatures':
+                return 4 /* FONT_VARIANT_LIGATURES.DISCRETIONARY_LIGATURES */;
+            case 'no-discretionary-ligatures':
+                return 5 /* FONT_VARIANT_LIGATURES.NO_DISCRETIONARY_LIGATURES */;
+            case 'historical-ligatures':
+                return 6 /* FONT_VARIANT_LIGATURES.HISTORICAL_LIGATURES */;
+            case 'no-historical-ligatures':
+                return 7 /* FONT_VARIANT_LIGATURES.NO_HISTORICAL_LIGATURES */;
+            case 'contextual':
+                return 8 /* FONT_VARIANT_LIGATURES.CONTEXTUAL */;
+            case 'no-contextual':
+                return 9 /* FONT_VARIANT_LIGATURES.NO_CONTEXTUAL */;
+            case 'normal':
+            default:
+                return 0 /* FONT_VARIANT_LIGATURES.NORMAL */;
+        }
+    }
+};

package/dist/lib/css/property-descriptors/object-fit.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.objectFit = void 0;
 const parser_1 = require("../syntax/parser");
 exports.objectFit = {
-    name: 'objectFit',
+    name: 'object-fit',
     initialValue: 'fill',
     prefix: false,
     type: 1 /* PropertyDescriptorParsingType.LIST */,

package/dist/lib/css/property-descriptors/object-position.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectPosition = void 0;
+const parser_1 = require("../syntax/parser");
+const length_percentage_1 = require("../types/length-percentage");
+exports.objectPosition = {
+    name: 'object-position',
+    initialValue: '50% 50%',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: (_context, tokens) => {
+        const result = [];
+        let i = 0;
+        while (i < tokens.length && result.length < 2) {
+            const token = tokens[i];
+            if ((0, parser_1.isIdentToken)(token)) {
+                switch (token.value) {
+                    case 'left':
+                    case 'top':
+                        result.push(length_percentage_1.ZERO_LENGTH);
+                        break;
+                    case 'center':
+                        result.push(length_percentage_1.FIFTY_PERCENT);
+                        break;
+                    case 'right':
+                    case 'bottom':
+                        result.push(length_percentage_1.HUNDRED_PERCENT);
+                        break;
+                }
+            }
+            else if ((0, length_percentage_1.isLengthPercentage)(token)) {
+                result.push(token);
+            }
+            i++;
+        }
+        // Fill to 2 values with defaults
+        while (result.length < 2) {
+            result.push(length_percentage_1.FIFTY_PERCENT);
+        }
+        return [result[0], result[1]];
+    }
+};

package/dist/lib/css/property-descriptors/visibility.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visibility = void 0;
 exports.visibility = {
-    name: 'visible',
+    name: 'visibility',
     initialValue: 'none',
     prefix: false,
     type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,

package/dist/lib/css/property-descriptors/zoom.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoom = void 0;
+exports.zoom = {
+    name: 'zoom',
+    initialValue: '1',
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
+    prefix: false,
+    parse: (_context, token) => {
+        if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
+            return Math.max(0, token.number / 100);
+        }
+        if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+            return Math.max(0, token.number);
+        }
+        return 1;
+    }
+};

package/dist/lib/css/syntax/parser.js

@@ -43,7 +43,6 @@ class Parser {
                 return values;
             }
             values.push(value);
-            values.push();
         }
     }
     consumeComponentValue() {

package/dist/lib/css/types/color.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLORS = exports.parseColor = exports.color = void 0;
 const parser_1 = require("../syntax/parser");
+const safe_eval_1 = __importDefault(require("./safe-eval"));
 const srgb_1 = require("./color-spaces/srgb");
 const color_utilities_1 = require("./color-utilities");
 const p3_1 = require("./color-spaces/p3");
@@ -140,7 +144,7 @@ const _color = (context, args) => {
                         .replace(/r|x/, color[0].toString())
                         .replace(/g|y/, color[1].toString())
                         .replace(/b|z/, color[2].toString());
-                    return new Function('return ' + expression)();
+                    return (0, safe_eval_1.default)(expression);
                 }
             }
             return null;

package/dist/lib/css/types/functions/repeating-linear-gradient.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.repeatingLinearGradient = void 0;
+const linear_gradient_1 = require("./linear-gradient");
+const repeatingLinearGradient = (context, tokens) => {
+    const gradient = (0, linear_gradient_1.linearGradient)(context, tokens);
+    return { ...gradient, type: 3 /* CSSImageType.REPEATING_LINEAR_GRADIENT */ };
+};
+exports.repeatingLinearGradient = repeatingLinearGradient;

package/dist/lib/css/types/image.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.image = exports.isRadialGradient = exports.isLinearGradient = void 0;
+exports.image = exports.isRepeatingLinearGradient = exports.isRadialGradient = exports.isLinearGradient = void 0;
 exports.isSupportedImage = isSupportedImage;
 const linear_gradient_1 = require("./functions/linear-gradient");
 const _prefix_linear_gradient_1 = require("./functions/-prefix-linear-gradient");
 const _webkit_gradient_1 = require("./functions/-webkit-gradient");
 const radial_gradient_1 = require("./functions/radial-gradient");
 const _prefix_radial_gradient_1 = require("./functions/-prefix-radial-gradient");
+const repeating_linear_gradient_1 = require("./functions/repeating-linear-gradient");
 const isLinearGradient = (background) => {
     return background.type === 1 /* CSSImageType.LINEAR_GRADIENT */;
 };
@@ -15,6 +16,10 @@ const isRadialGradient = (background) => {
     return background.type === 2 /* CSSImageType.RADIAL_GRADIENT */;
 };
 exports.isRadialGradient = isRadialGradient;
+const isRepeatingLinearGradient = (background) => {
+    return background.type === 3 /* CSSImageType.REPEATING_LINEAR_GRADIENT */;
+};
+exports.isRepeatingLinearGradient = isRepeatingLinearGradient;
 exports.image = {
     name: 'image',
     parse: (context, value) => {
@@ -48,5 +53,10 @@ const SUPPORTED_IMAGE_FUNCTIONS = {
     '-ms-radial-gradient': _prefix_radial_gradient_1.prefixRadialGradient,
     '-o-radial-gradient': _prefix_radial_gradient_1.prefixRadialGradient,
     '-webkit-radial-gradient': _prefix_radial_gradient_1.prefixRadialGradient,
-    '-webkit-gradient': _webkit_gradient_1.webkitGradient
+    '-webkit-gradient': _webkit_gradient_1.webkitGradient,
+    'repeating-linear-gradient': repeating_linear_gradient_1.repeatingLinearGradient,
+    '-webkit-repeating-linear-gradient': repeating_linear_gradient_1.repeatingLinearGradient,
+    '-moz-repeating-linear-gradient': repeating_linear_gradient_1.repeatingLinearGradient,
+    '-ms-repeating-linear-gradient': repeating_linear_gradient_1.repeatingLinearGradient,
+    '-o-repeating-linear-gradient': repeating_linear_gradient_1.repeatingLinearGradient
 };

package/dist/lib/css/types/length-percentage.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAbsoluteValue = exports.getAbsoluteValueForTuple = exports.HUNDRED_PERCENT = exports.FIFTY_PERCENT = exports.ZERO_LENGTH = exports.parseLengthPercentageTuple = exports.evaluateCalcToLengthPercentage = exports.isCalcFunction = exports.isLengthPercentage = void 0;
 const tokenizer_1 = require("../syntax/tokenizer");
 const parser_1 = require("../syntax/parser");
 const length_1 = require("./length");
+const safe_eval_1 = __importDefault(require("./safe-eval"));
 const isLengthPercentage = (token) => token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || (0, length_1.isLength)(token);
 exports.isLengthPercentage = isLengthPercentage;
 /**
@@ -75,8 +79,8 @@ const evaluateCalcToLengthPercentage = (calcToken, contextValue = 0) => {
             return null;
         }
         // Evaluate the expression
-        // Note: Using Function constructor (similar to color.ts line 185)
-        const result = new Function('return ' + expression)();
+        // Uses safe arithmetic evaluator instead of new Function() for CodeQL
+        const result = (0, safe_eval_1.default)(expression);
         if (typeof result === 'number' && !isNaN(result)) {
             // Return as a number token in px
             return {

package/dist/lib/css/types/safe-eval.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * Safe arithmetic expression evaluator — replaces `new Function()`.
+ *
+ * Supports only: numbers, +, -, *, /, parentheses.
+ * Does NOT execute arbitrary code. Returns NaN on any illegal token.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// Regex that matches a token: number (int or float) | operator | parentheses
+const ARITH_TOKEN_RE = /(\d+(?:\.\d+)?|[+\-*/()])/g;
+const safeEvalArithmetic = (expr) => {
+    const tokens = expr.match(ARITH_TOKEN_RE);
+    if (!tokens) {
+        return NaN;
+    }
+    // Shunting-yard algorithm: infix → postfix (RPN), then evaluate.
+    const output = [];
+    const ops = [];
+    const precedence = { '+': 1, '-': 1, '*': 2, '/': 2 };
+    for (const tok of tokens) {
+        if (/^\d+(?:\.\d+)?$/.test(tok)) {
+            output.push(parseFloat(tok));
+        }
+        else if (tok === '(') {
+            ops.push(tok);
+        }
+        else if (tok === ')') {
+            while (ops.length && ops[ops.length - 1] !== '(') {
+                output.push(ops.pop());
+            }
+            if (!ops.length)
+                return NaN; // mismatched parens
+            ops.pop(); // discard '('
+        }
+        else {
+            // operator: + - * /
+            while (ops.length && precedence[ops[ops.length - 1]] >= precedence[tok]) {
+                output.push(ops.pop());
+            }
+            ops.push(tok);
+        }
+    }
+    while (ops.length) {
+        const op = ops.pop();
+        if (op === '(')
+            return NaN; // mismatched parens
+        output.push(op);
+    }
+    // Evaluate RPN
+    const stack = [];
+    for (const item of output) {
+        if (typeof item === 'number') {
+            stack.push(item);
+        }
+        else {
+            const b = stack.pop();
+            const a = stack.pop();
+            if (a === undefined || b === undefined)
+                return NaN;
+            switch (item) {
+                case '+':
+                    stack.push(a + b);
+                    break;
+                case '-':
+                    stack.push(a - b);
+                    break;
+                case '*':
+                    stack.push(a * b);
+                    break;
+                case '/':
+                    stack.push(b === 0 ? NaN : a / b);
+                    break;
+                default:
+                    return NaN;
+            }
+        }
+    }
+    return stack.length === 1 ? stack[0] : NaN;
+};
+exports.default = safeEvalArithmetic;