@uxbertlabs/reportly 1.0.3 → 1.0.5

package/dist/reportly.cjs.js

@@ -22,6 +22,10 @@ class Config {
         };
     }
     loadFromStorage() {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+            return;
+        }
         try {
             const saved = localStorage.getItem('uxbert-config');
             if (saved) {
@@ -34,6 +38,10 @@ class Config {
         }
     }
     save() {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+            return;
+        }
         try {
             localStorage.setItem('uxbert-config', JSON.stringify(this.config));
         }
@@ -338,24 +346,26 @@ class Modal {
 }
 
 class Toolbar {
+    // private currentTool: AnnotationTool;
+    // private currentColor: string;
     constructor(callbacks) {
         this.callbacks = callbacks;
         this.toolbar = null;
         this.toggleButton = null;
         this.isToolbarExpanded = false;
-        this.currentTool = 'pen';
-        this.currentColor = '#ef4444';
+        // this.currentTool = "pen";
+        // this.currentColor = "#ef4444";
     }
     create() {
         // Create toggle button
-        this.toggleButton = document.createElement('button');
-        this.toggleButton.className = 'uxbert-toolbar-toggle';
-        this.toggleButton.innerHTML = '🛠️';
-        this.toggleButton.title = 'Toggle Annotation Tools';
+        this.toggleButton = document.createElement("button");
+        this.toggleButton.className = "uxbert-toolbar-toggle";
+        this.toggleButton.innerHTML = "🛠️";
+        this.toggleButton.title = "Toggle Annotation Tools";
         document.body.appendChild(this.toggleButton);
         // Create toolbar
-        this.toolbar = document.createElement('div');
-        this.toolbar.className = 'uxbert-toolbar';
+        this.toolbar = document.createElement("div");
+        this.toolbar.className = "uxbert-toolbar";
         this.toolbar.innerHTML = `
       <div class="uxbert-toolbar-header">
         <div class="uxbert-toolbar-title">Annotation Tools</div>
@@ -395,19 +405,19 @@ class Toolbar {
         if (!this.toolbar || !this.toggleButton)
             return;
         // Toggle button
-        this.toggleButton.addEventListener('click', () => {
+        this.toggleButton.addEventListener("click", () => {
             this.toggleToolbar();
         });
         // Minimize button
-        const minimizeBtn = this.toolbar.querySelector('#uxbert-minimize-btn');
-        minimizeBtn.addEventListener('click', () => {
+        const minimizeBtn = this.toolbar.querySelector("#uxbert-minimize-btn");
+        minimizeBtn.addEventListener("click", () => {
             this.toggleToolbar();
         });
         // Tool buttons
-        const toolBtns = this.toolbar.querySelectorAll('[data-tool]');
-        toolBtns.forEach(btn => {
-            btn.addEventListener('click', () => {
-                const tool = btn.getAttribute('data-tool');
+        const toolBtns = this.toolbar.querySelectorAll("[data-tool]");
+        toolBtns.forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const tool = btn.getAttribute("data-tool");
                 this.setTool(tool);
                 if (this.callbacks.onToolChange) {
                     this.callbacks.onToolChange(tool);
@@ -415,10 +425,10 @@ class Toolbar {
             });
         });
         // Color buttons
-        const colorBtns = this.toolbar.querySelectorAll('[data-color]');
-        colorBtns.forEach(btn => {
-            btn.addEventListener('click', () => {
-                const color = btn.getAttribute('data-color');
+        const colorBtns = this.toolbar.querySelectorAll("[data-color]");
+        colorBtns.forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const color = btn.getAttribute("data-color");
                 this.setColor(color);
                 if (this.callbacks.onColorChange) {
                     this.callbacks.onColorChange(color);
@@ -426,57 +436,57 @@ class Toolbar {
             });
         });
         // Action buttons
-        const undoBtn = this.toolbar.querySelector('#uxbert-undo-btn');
-        undoBtn.addEventListener('click', () => {
+        const undoBtn = this.toolbar.querySelector("#uxbert-undo-btn");
+        undoBtn.addEventListener("click", () => {
             if (this.callbacks.onUndo) {
                 this.callbacks.onUndo();
             }
         });
-        const clearBtn = this.toolbar.querySelector('#uxbert-clear-btn');
-        clearBtn.addEventListener('click', () => {
+        const clearBtn = this.toolbar.querySelector("#uxbert-clear-btn");
+        clearBtn.addEventListener("click", () => {
             if (this.callbacks.onClear) {
                 this.callbacks.onClear();
             }
         });
-        const doneBtn = this.toolbar.querySelector('#uxbert-done-btn');
-        doneBtn.addEventListener('click', () => {
+        const doneBtn = this.toolbar.querySelector("#uxbert-done-btn");
+        doneBtn.addEventListener("click", () => {
             if (this.callbacks.onDone) {
                 this.callbacks.onDone();
             }
         });
         // Exit button
-        const exitBtn = this.toolbar.querySelector('#uxbert-exit-btn');
-        exitBtn.addEventListener('click', () => {
+        const exitBtn = this.toolbar.querySelector("#uxbert-exit-btn");
+        exitBtn.addEventListener("click", () => {
             if (this.callbacks.onExit) {
                 this.callbacks.onExit();
             }
         });
     }
     setTool(tool) {
-        this.currentTool = tool;
+        //  this.currentTool = tool;
         if (!this.toolbar)
             return;
-        const toolBtns = this.toolbar.querySelectorAll('[data-tool]');
-        toolBtns.forEach(btn => {
-            if (btn.getAttribute('data-tool') === tool) {
-                btn.classList.add('active');
+        const toolBtns = this.toolbar.querySelectorAll("[data-tool]");
+        toolBtns.forEach((btn) => {
+            if (btn.getAttribute("data-tool") === tool) {
+                btn.classList.add("active");
             }
             else {
-                btn.classList.remove('active');
+                btn.classList.remove("active");
             }
         });
     }
     setColor(color) {
-        this.currentColor = color;
+        // this.currentColor = color;
         if (!this.toolbar)
             return;
-        const colorBtns = this.toolbar.querySelectorAll('[data-color]');
-        colorBtns.forEach(btn => {
-            if (btn.getAttribute('data-color') === color) {
-                btn.classList.add('active');
+        const colorBtns = this.toolbar.querySelectorAll("[data-color]");
+        colorBtns.forEach((btn) => {
+            if (btn.getAttribute("data-color") === color) {
+                btn.classList.add("active");
             }
             else {
-                btn.classList.remove('active');
+                btn.classList.remove("active");
             }
         });
     }
@@ -485,40 +495,40 @@ class Toolbar {
             return;
         this.isToolbarExpanded = !this.isToolbarExpanded;
         if (this.isToolbarExpanded) {
-            this.toolbar.classList.add('expanded');
-            this.toggleButton.classList.add('hidden');
+            this.toolbar.classList.add("expanded");
+            this.toggleButton.classList.add("hidden");
         }
         else {
-            this.toolbar.classList.remove('expanded');
-            this.toggleButton.classList.remove('hidden');
+            this.toolbar.classList.remove("expanded");
+            this.toggleButton.classList.remove("hidden");
         }
     }
     show() {
         if (this.toolbar && this.toggleButton) {
-            this.toolbar.classList.add('active');
-            this.toggleButton.classList.add('active');
+            this.toolbar.classList.add("active");
+            this.toggleButton.classList.add("active");
             // Use setTimeout to ensure DOM is ready before checking width and applying classes
             setTimeout(() => {
                 // Auto-expand on desktop, collapsed on mobile
                 if (window.innerWidth > 768) {
                     this.isToolbarExpanded = true;
-                    this.toolbar.classList.add('expanded');
-                    this.toggleButton.classList.add('hidden');
+                    this.toolbar.classList.add("expanded");
+                    this.toggleButton.classList.add("hidden");
                 }
                 else {
                     this.isToolbarExpanded = false;
-                    this.toolbar.classList.remove('expanded');
-                    this.toggleButton.classList.remove('hidden');
+                    this.toolbar.classList.remove("expanded");
+                    this.toggleButton.classList.remove("hidden");
                 }
             }, 50);
         }
     }
     hide() {
         if (this.toolbar && this.toggleButton) {
-            this.toolbar.classList.remove('active');
-            this.toolbar.classList.remove('expanded');
-            this.toggleButton.classList.remove('active');
-            this.toggleButton.classList.remove('hidden');
+            this.toolbar.classList.remove("active");
+            this.toolbar.classList.remove("expanded");
+            this.toggleButton.classList.remove("active");
+            this.toggleButton.classList.remove("hidden");
             this.isToolbarExpanded = false;
         }
     }
@@ -535,11 +545,11 @@ class Toolbar {
 }
 
 /*!
- * html2canvas 1.4.1 <https://html2canvas.hertzen.com>
- * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
+ * html2canvas-pro 1.5.12 <https://yorickshan.github.io/html2canvas-pro/>
+ * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -553,7 +563,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function(d, b) {
     extendStatics = Object.setPrototypeOf ||
@@ -597,7 +607,7 @@ function __generator(thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -626,8 +636,13 @@ function __spreadArray(to, from, pack) {
             ar[i] = from[i];
         }
     }
-    return to.concat(ar || from);
-}
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var Bounds = /** @class */ (function () {
     function Bounds(left, top, width, height) {
@@ -1522,38 +1537,38 @@ var stringToNumber = function (codePoints) {
     return sign * (int + frac * Math.pow(10, -fracd)) * Math.pow(10, expsign * exp);
 };
 var LEFT_PARENTHESIS_TOKEN = {
-    type: 2 /* LEFT_PARENTHESIS_TOKEN */
+    type: 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */
 };
 var RIGHT_PARENTHESIS_TOKEN = {
-    type: 3 /* RIGHT_PARENTHESIS_TOKEN */
-};
-var COMMA_TOKEN = { type: 4 /* COMMA_TOKEN */ };
-var SUFFIX_MATCH_TOKEN = { type: 13 /* SUFFIX_MATCH_TOKEN */ };
-var PREFIX_MATCH_TOKEN = { type: 8 /* PREFIX_MATCH_TOKEN */ };
-var COLUMN_TOKEN = { type: 21 /* COLUMN_TOKEN */ };
-var DASH_MATCH_TOKEN = { type: 9 /* DASH_MATCH_TOKEN */ };
-var INCLUDE_MATCH_TOKEN = { type: 10 /* INCLUDE_MATCH_TOKEN */ };
+    type: 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */
+};
+var COMMA_TOKEN = { type: 4 /* TokenType.COMMA_TOKEN */ };
+var SUFFIX_MATCH_TOKEN = { type: 13 /* TokenType.SUFFIX_MATCH_TOKEN */ };
+var PREFIX_MATCH_TOKEN = { type: 8 /* TokenType.PREFIX_MATCH_TOKEN */ };
+var COLUMN_TOKEN = { type: 21 /* TokenType.COLUMN_TOKEN */ };
+var DASH_MATCH_TOKEN = { type: 9 /* TokenType.DASH_MATCH_TOKEN */ };
+var INCLUDE_MATCH_TOKEN = { type: 10 /* TokenType.INCLUDE_MATCH_TOKEN */ };
 var LEFT_CURLY_BRACKET_TOKEN = {
-    type: 11 /* LEFT_CURLY_BRACKET_TOKEN */
+    type: 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */
 };
 var RIGHT_CURLY_BRACKET_TOKEN = {
-    type: 12 /* RIGHT_CURLY_BRACKET_TOKEN */
-};
-var SUBSTRING_MATCH_TOKEN = { type: 14 /* SUBSTRING_MATCH_TOKEN */ };
-var BAD_URL_TOKEN = { type: 23 /* BAD_URL_TOKEN */ };
-var BAD_STRING_TOKEN = { type: 1 /* BAD_STRING_TOKEN */ };
-var CDO_TOKEN = { type: 25 /* CDO_TOKEN */ };
-var CDC_TOKEN = { type: 24 /* CDC_TOKEN */ };
-var COLON_TOKEN = { type: 26 /* COLON_TOKEN */ };
-var SEMICOLON_TOKEN = { type: 27 /* SEMICOLON_TOKEN */ };
+    type: 12 /* TokenType.RIGHT_CURLY_BRACKET_TOKEN */
+};
+var SUBSTRING_MATCH_TOKEN = { type: 14 /* TokenType.SUBSTRING_MATCH_TOKEN */ };
+var BAD_URL_TOKEN = { type: 23 /* TokenType.BAD_URL_TOKEN */ };
+var BAD_STRING_TOKEN = { type: 1 /* TokenType.BAD_STRING_TOKEN */ };
+var CDO_TOKEN = { type: 25 /* TokenType.CDO_TOKEN */ };
+var CDC_TOKEN = { type: 24 /* TokenType.CDC_TOKEN */ };
+var COLON_TOKEN = { type: 26 /* TokenType.COLON_TOKEN */ };
+var SEMICOLON_TOKEN = { type: 27 /* TokenType.SEMICOLON_TOKEN */ };
 var LEFT_SQUARE_BRACKET_TOKEN = {
-    type: 28 /* LEFT_SQUARE_BRACKET_TOKEN */
+    type: 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */
 };
 var RIGHT_SQUARE_BRACKET_TOKEN = {
-    type: 29 /* RIGHT_SQUARE_BRACKET_TOKEN */
+    type: 29 /* TokenType.RIGHT_SQUARE_BRACKET_TOKEN */
 };
-var WHITESPACE_TOKEN = { type: 31 /* WHITESPACE_TOKEN */ };
-var EOF_TOKEN = { type: 32 /* EOF_TOKEN */ };
+var WHITESPACE_TOKEN = { type: 31 /* TokenType.WHITESPACE_TOKEN */ };
+var EOF_TOKEN = { type: 32 /* TokenType.EOF_TOKEN */ };
 var Tokenizer = /** @class */ (function () {
     function Tokenizer() {
         this._value = [];
@@ -1582,7 +1597,7 @@ var Tokenizer = /** @class */ (function () {
                 if (isNameCodePoint(c1) || isValidEscape(c2, c3)) {
                     var flags = isIdentifierStart(c1, c2, c3) ? FLAG_ID : FLAG_UNRESTRICTED;
                     var value = this.consumeName();
-                    return { type: 5 /* HASH_TOKEN */, value: value, flags: flags };
+                    return { type: 5 /* TokenType.HASH_TOKEN */, value: value, flags: flags };
                 }
                 break;
             case DOLLAR_SIGN:
@@ -1671,7 +1686,7 @@ var Tokenizer = /** @class */ (function () {
                 var a3 = this.peekCodePoint(2);
                 if (isIdentifierStart(a1, a2, a3)) {
                     var value = this.consumeName();
-                    return { type: 7 /* AT_KEYWORD_TOKEN */, value: value };
+                    return { type: 7 /* TokenType.AT_KEYWORD_TOKEN */, value: value };
                 }
                 break;
             case LEFT_SQUARE_BRACKET:
@@ -1735,7 +1750,7 @@ var Tokenizer = /** @class */ (function () {
             this.reconsumeCodePoint(codePoint);
             return this.consumeIdentLikeToken();
         }
-        return { type: 6 /* DELIM_TOKEN */, value: fromCodePoint$1(codePoint) };
+        return { type: 6 /* TokenType.DELIM_TOKEN */, value: fromCodePoint$1(codePoint) };
     };
     Tokenizer.prototype.consumeCodePoint = function () {
         var value = this._value.shift();
@@ -1766,7 +1781,7 @@ var Tokenizer = /** @class */ (function () {
         if (questionMarks) {
             var start_1 = parseInt(fromCodePoint$1.apply(void 0, digits.map(function (digit) { return (digit === QUESTION_MARK ? ZERO : digit); })), 16);
             var end = parseInt(fromCodePoint$1.apply(void 0, digits.map(function (digit) { return (digit === QUESTION_MARK ? F : digit); })), 16);
-            return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start_1, end: end };
+            return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start_1, end: end };
         }
         var start = parseInt(fromCodePoint$1.apply(void 0, digits), 16);
         if (this.peekCodePoint(0) === HYPHEN_MINUS && isHex(this.peekCodePoint(1))) {
@@ -1778,10 +1793,10 @@ var Tokenizer = /** @class */ (function () {
                 codePoint = this.consumeCodePoint();
             }
             var end = parseInt(fromCodePoint$1.apply(void 0, endDigits), 16);
-            return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start, end: end };
+            return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start, end: end };
         }
         else {
-            return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start, end: start };
+            return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start, end: start };
         }
     };
     Tokenizer.prototype.consumeIdentLikeToken = function () {
@@ -1792,24 +1807,24 @@ var Tokenizer = /** @class */ (function () {
         }
         else if (this.peekCodePoint(0) === LEFT_PARENTHESIS) {
             this.consumeCodePoint();
-            return { type: 19 /* FUNCTION_TOKEN */, value: value };
+            return { type: 19 /* TokenType.FUNCTION_TOKEN */, value: value };
         }
-        return { type: 20 /* IDENT_TOKEN */, value: value };
+        return { type: 20 /* TokenType.IDENT_TOKEN */, value: value };
     };
     Tokenizer.prototype.consumeUrlToken = function () {
         var value = [];
         this.consumeWhiteSpace();
         if (this.peekCodePoint(0) === EOF) {
-            return { type: 22 /* URL_TOKEN */, value: '' };
+            return { type: 22 /* TokenType.URL_TOKEN */, value: '' };
         }
         var next = this.peekCodePoint(0);
         if (next === APOSTROPHE || next === QUOTATION_MARK) {
             var stringToken = this.consumeStringToken(this.consumeCodePoint());
-            if (stringToken.type === 0 /* STRING_TOKEN */) {
+            if (stringToken.type === 0 /* TokenType.STRING_TOKEN */) {
                 this.consumeWhiteSpace();
                 if (this.peekCodePoint(0) === EOF || this.peekCodePoint(0) === RIGHT_PARENTHESIS) {
                     this.consumeCodePoint();
-                    return { type: 22 /* URL_TOKEN */, value: stringToken.value };
+                    return { type: 22 /* TokenType.URL_TOKEN */, value: stringToken.value };
                 }
             }
             this.consumeBadUrlRemnants();
@@ -1818,13 +1833,13 @@ var Tokenizer = /** @class */ (function () {
         while (true) {
             var codePoint = this.consumeCodePoint();
             if (codePoint === EOF || codePoint === RIGHT_PARENTHESIS) {
-                return { type: 22 /* URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
+                return { type: 22 /* TokenType.URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
             }
             else if (isWhiteSpace(codePoint)) {
                 this.consumeWhiteSpace();
                 if (this.peekCodePoint(0) === EOF || this.peekCodePoint(0) === RIGHT_PARENTHESIS) {
                     this.consumeCodePoint();
-                    return { type: 22 /* URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
+                    return { type: 22 /* TokenType.URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
                 }
                 this.consumeBadUrlRemnants();
                 return BAD_URL_TOKEN;
@@ -1884,7 +1899,7 @@ var Tokenizer = /** @class */ (function () {
             var codePoint = this._value[i];
             if (codePoint === EOF || codePoint === undefined || codePoint === endingCodePoint) {
                 value += this.consumeStringSlice(i);
-                return { type: 0 /* STRING_TOKEN */, value: value };
+                return { type: 0 /* TokenType.STRING_TOKEN */, value: value };
             }
             if (codePoint === LINE_FEED) {
                 this._value.splice(0, i);
@@ -1946,13 +1961,13 @@ var Tokenizer = /** @class */ (function () {
         var c3 = this.peekCodePoint(2);
         if (isIdentifierStart(c1, c2, c3)) {
             var unit = this.consumeName();
-            return { type: 15 /* DIMENSION_TOKEN */, number: number, flags: flags, unit: unit };
+            return { type: 15 /* TokenType.DIMENSION_TOKEN */, number: number, flags: flags, unit: unit };
         }
         if (c1 === PERCENTAGE_SIGN) {
             this.consumeCodePoint();
-            return { type: 16 /* PERCENTAGE_TOKEN */, number: number, flags: flags };
+            return { type: 16 /* TokenType.PERCENTAGE_TOKEN */, number: number, flags: flags };
         }
-        return { type: 17 /* NUMBER_TOKEN */, number: number, flags: flags };
+        return { type: 17 /* TokenType.NUMBER_TOKEN */, number: number, flags: flags };
     };
     Tokenizer.prototype.consumeEscapedCodePoint = function () {
         var codePoint = this.consumeCodePoint();
@@ -2011,18 +2026,18 @@ var Parser = /** @class */ (function () {
     };
     Parser.prototype.parseComponentValue = function () {
         var token = this.consumeToken();
-        while (token.type === 31 /* WHITESPACE_TOKEN */) {
+        while (token.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
             token = this.consumeToken();
         }
-        if (token.type === 32 /* EOF_TOKEN */) {
+        if (token.type === 32 /* TokenType.EOF_TOKEN */) {
             throw new SyntaxError("Error parsing CSS component value, unexpected EOF");
         }
         this.reconsumeToken(token);
         var value = this.consumeComponentValue();
         do {
             token = this.consumeToken();
-        } while (token.type === 31 /* WHITESPACE_TOKEN */);
-        if (token.type === 32 /* EOF_TOKEN */) {
+        } while (token.type === 31 /* TokenType.WHITESPACE_TOKEN */);
+        if (token.type === 32 /* TokenType.EOF_TOKEN */) {
             return value;
         }
         throw new SyntaxError("Error parsing CSS component value, multiple values found when expecting only one");
@@ -2031,7 +2046,7 @@ var Parser = /** @class */ (function () {
         var values = [];
         while (true) {
             var value = this.consumeComponentValue();
-            if (value.type === 32 /* EOF_TOKEN */) {
+            if (value.type === 32 /* TokenType.EOF_TOKEN */) {
                 return values;
             }
             values.push(value);
@@ -2041,11 +2056,11 @@ var Parser = /** @class */ (function () {
     Parser.prototype.consumeComponentValue = function () {
         var token = this.consumeToken();
         switch (token.type) {
-            case 11 /* LEFT_CURLY_BRACKET_TOKEN */:
-            case 28 /* LEFT_SQUARE_BRACKET_TOKEN */:
-            case 2 /* LEFT_PARENTHESIS_TOKEN */:
+            case 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */:
+            case 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */:
+            case 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */:
                 return this.consumeSimpleBlock(token.type);
-            case 19 /* FUNCTION_TOKEN */:
+            case 19 /* TokenType.FUNCTION_TOKEN */:
                 return this.consumeFunction(token);
         }
         return token;
@@ -2054,7 +2069,7 @@ var Parser = /** @class */ (function () {
         var block = { type: type, values: [] };
         var token = this.consumeToken();
         while (true) {
-            if (token.type === 32 /* EOF_TOKEN */ || isEndingTokenFor(token, type)) {
+            if (token.type === 32 /* TokenType.EOF_TOKEN */ || isEndingTokenFor(token, type)) {
                 return block;
             }
             this.reconsumeToken(token);
@@ -2066,11 +2081,11 @@ var Parser = /** @class */ (function () {
         var cssFunction = {
             name: functionToken.value,
             values: [],
-            type: 18 /* FUNCTION */
+            type: 18 /* TokenType.FUNCTION */
         };
         while (true) {
             var token = this.consumeToken();
-            if (token.type === 32 /* EOF_TOKEN */ || token.type === 3 /* RIGHT_PARENTHESIS_TOKEN */) {
+            if (token.type === 32 /* TokenType.EOF_TOKEN */ || token.type === 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */) {
                 return cssFunction;
             }
             this.reconsumeToken(token);
@@ -2086,22 +2101,22 @@ var Parser = /** @class */ (function () {
     };
     return Parser;
 }());
-var isDimensionToken = function (token) { return token.type === 15 /* DIMENSION_TOKEN */; };
-var isNumberToken = function (token) { return token.type === 17 /* NUMBER_TOKEN */; };
-var isIdentToken = function (token) { return token.type === 20 /* IDENT_TOKEN */; };
-var isStringToken = function (token) { return token.type === 0 /* STRING_TOKEN */; };
+var isDimensionToken = function (token) { return token.type === 15 /* TokenType.DIMENSION_TOKEN */; };
+var isNumberToken = function (token) { return token.type === 17 /* TokenType.NUMBER_TOKEN */; };
+var isIdentToken = function (token) { return token.type === 20 /* TokenType.IDENT_TOKEN */; };
+var isStringToken = function (token) { return token.type === 0 /* TokenType.STRING_TOKEN */; };
 var isIdentWithValue = function (token, value) {
     return isIdentToken(token) && token.value === value;
 };
-var nonWhiteSpace = function (token) { return token.type !== 31 /* WHITESPACE_TOKEN */; };
+var nonWhiteSpace = function (token) { return token.type !== 31 /* TokenType.WHITESPACE_TOKEN */; };
 var nonFunctionArgSeparator = function (token) {
-    return token.type !== 31 /* WHITESPACE_TOKEN */ && token.type !== 4 /* COMMA_TOKEN */;
+    return token.type !== 31 /* TokenType.WHITESPACE_TOKEN */ && token.type !== 4 /* TokenType.COMMA_TOKEN */;
 };
 var parseFunctionArgs = function (tokens) {
     var args = [];
     var arg = [];
     tokens.forEach(function (token) {
-        if (token.type === 4 /* COMMA_TOKEN */) {
+        if (token.type === 4 /* TokenType.COMMA_TOKEN */) {
             if (arg.length === 0) {
                 throw new Error("Error parsing function args, zero tokens for arg");
             }
@@ -2109,7 +2124,7 @@ var parseFunctionArgs = function (tokens) {
             arg = [];
             return;
         }
-        if (token.type !== 31 /* WHITESPACE_TOKEN */) {
+        if (token.type !== 31 /* TokenType.WHITESPACE_TOKEN */) {
             arg.push(token);
         }
     });
@@ -2119,37 +2134,37 @@ var parseFunctionArgs = function (tokens) {
     return args;
 };
 var isEndingTokenFor = function (token, type) {
-    if (type === 11 /* LEFT_CURLY_BRACKET_TOKEN */ && token.type === 12 /* RIGHT_CURLY_BRACKET_TOKEN */) {
+    if (type === 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */ && token.type === 12 /* TokenType.RIGHT_CURLY_BRACKET_TOKEN */) {
         return true;
     }
-    if (type === 28 /* LEFT_SQUARE_BRACKET_TOKEN */ && token.type === 29 /* RIGHT_SQUARE_BRACKET_TOKEN */) {
+    if (type === 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */ && token.type === 29 /* TokenType.RIGHT_SQUARE_BRACKET_TOKEN */) {
         return true;
     }
-    return type === 2 /* LEFT_PARENTHESIS_TOKEN */ && token.type === 3 /* RIGHT_PARENTHESIS_TOKEN */;
+    return type === 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */ && token.type === 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */;
 };
 
 var isLength = function (token) {
-    return token.type === 17 /* NUMBER_TOKEN */ || token.type === 15 /* DIMENSION_TOKEN */;
+    return token.type === 17 /* TokenType.NUMBER_TOKEN */ || token.type === 15 /* TokenType.DIMENSION_TOKEN */;
 };
 
 var isLengthPercentage = function (token) {
-    return token.type === 16 /* PERCENTAGE_TOKEN */ || isLength(token);
+    return token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || isLength(token);
 };
 var parseLengthPercentageTuple = function (tokens) {
     return tokens.length > 1 ? [tokens[0], tokens[1]] : [tokens[0]];
 };
 var ZERO_LENGTH = {
-    type: 17 /* NUMBER_TOKEN */,
+    type: 17 /* TokenType.NUMBER_TOKEN */,
     number: 0,
     flags: FLAG_INTEGER
 };
 var FIFTY_PERCENT = {
-    type: 16 /* PERCENTAGE_TOKEN */,
+    type: 16 /* TokenType.PERCENTAGE_TOKEN */,
     number: 50,
     flags: FLAG_INTEGER
 };
 var HUNDRED_PERCENT = {
-    type: 16 /* PERCENTAGE_TOKEN */,
+    type: 16 /* TokenType.PERCENTAGE_TOKEN */,
     number: 100,
     flags: FLAG_INTEGER
 };
@@ -2158,7 +2173,7 @@ var getAbsoluteValueForTuple = function (tuple, width, height) {
     return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
 };
 var getAbsoluteValue = function (token, parent) {
-    if (token.type === 16 /* PERCENTAGE_TOKEN */) {
+    if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
         return (token.number / 100) * parent;
     }
     if (isDimensionToken(token)) {
@@ -2181,7 +2196,7 @@ var TURN = 'turn';
 var angle = {
     name: 'angle',
     parse: function (_context, value) {
-        if (value.type === 15 /* DIMENSION_TOKEN */) {
+        if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
             switch (value.unit) {
                 case DEG:
                     return (Math.PI * value.number) / 180;
@@ -2197,7 +2212,7 @@ var angle = {
     }
 };
 var isAngle = function (value) {
-    if (value.type === 15 /* DIMENSION_TOKEN */) {
+    if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
         if (value.unit === DEG || value.unit === GRAD || value.unit === RAD || value.unit === TURN) {
             return true;
         }
@@ -2247,87 +2262,154 @@ var parseNamedSide = function (tokens) {
 };
 var deg = function (deg) { return (Math.PI * deg) / 180; };
 
-var color$1 = {
-    name: 'color',
-    parse: function (context, value) {
-        if (value.type === 18 /* FUNCTION */) {
-            var colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
-            if (typeof colorFunction === 'undefined') {
-                throw new Error("Attempting to parse an unsupported color function \"" + value.name + "\"");
-            }
-            return colorFunction(context, value.values);
-        }
-        if (value.type === 5 /* HASH_TOKEN */) {
-            if (value.value.length === 3) {
-                var r = value.value.substring(0, 1);
-                var g = value.value.substring(1, 2);
-                var b = value.value.substring(2, 3);
-                return pack(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), 1);
-            }
-            if (value.value.length === 4) {
-                var r = value.value.substring(0, 1);
-                var g = value.value.substring(1, 2);
-                var b = value.value.substring(2, 3);
-                var a = value.value.substring(3, 4);
-                return pack(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255);
-            }
-            if (value.value.length === 6) {
-                var r = value.value.substring(0, 2);
-                var g = value.value.substring(2, 4);
-                var b = value.value.substring(4, 6);
-                return pack(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1);
-            }
-            if (value.value.length === 8) {
-                var r = value.value.substring(0, 2);
-                var g = value.value.substring(2, 4);
-                var b = value.value.substring(4, 6);
-                var a = value.value.substring(6, 8);
-                return pack(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseInt(a, 16) / 255);
-            }
-        }
-        if (value.type === 20 /* IDENT_TOKEN */) {
-            var namedColor = COLORS[value.value.toUpperCase()];
-            if (typeof namedColor !== 'undefined') {
-                return namedColor;
-            }
-        }
-        return COLORS.TRANSPARENT;
-    }
-};
 var isTransparent = function (color) { return (0xff & color) === 0; };
 var asString = function (color) {
     var alpha = 0xff & color;
     var blue = 0xff & (color >> 8);
     var green = 0xff & (color >> 16);
     var red = 0xff & (color >> 24);
-    return alpha < 255 ? "rgba(" + red + "," + green + "," + blue + "," + alpha / 255 + ")" : "rgb(" + red + "," + green + "," + blue + ")";
+    return alpha < 255 ? "rgba(".concat(red, ",").concat(green, ",").concat(blue, ",").concat(alpha / 255, ")") : "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
 };
 var pack = function (r, g, b, a) {
     return ((r << 24) | (g << 16) | (b << 8) | (Math.round(a * 255) << 0)) >>> 0;
 };
 var getTokenColorValue = function (token, i) {
-    if (token.type === 17 /* NUMBER_TOKEN */) {
+    if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
         return token.number;
     }
-    if (token.type === 16 /* PERCENTAGE_TOKEN */) {
+    if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
         var max = i === 3 ? 1 : 255;
         return i === 3 ? (token.number / 100) * max : Math.round((token.number / 100) * max);
     }
     return 0;
 };
-var rgb = function (_context, args) {
-    var tokens = args.filter(nonFunctionArgSeparator);
-    if (tokens.length === 3) {
-        var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2];
-        return pack(r, g, b, 1);
-    }
-    if (tokens.length === 4) {
-        var _b = tokens.map(getTokenColorValue), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
-        return pack(r, g, b, a);
-    }
-    return 0;
+var isRelativeTransform = function (tokens) {
+    return (tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ ? tokens[0].value : 'unknown') === 'from';
+};
+var clamp = function (value, min, max) {
+    return Math.min(Math.max(value, min), max);
 };
-function hue2rgb(t1, t2, hue) {
+var multiplyMatrices = function (A, B) {
+    return [
+        A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
+        A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
+        A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
+    ];
+};
+var packSrgb = function (args) {
+    return pack(clamp(Math.round(args[0] * 255), 0, 255), clamp(Math.round(args[1] * 255), 0, 255), clamp(Math.round(args[2] * 255), 0, 255), clamp(args[3], 0, 1));
+};
+var packSrgbLinear = function (_a) {
+    var r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+    var rgb = srgbLinear2rgb([r, g, b]);
+    return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), a);
+};
+var packXYZ = function (args) {
+    var srgb_linear = xyz2rgbLinear([args[0], args[1], args[2]]);
+    return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
+};
+var packLab = function (_context, args) {
+    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+        throw new Error('Relative color not supported for lab()');
+    }
+    var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz([l, a, b])));
+    return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+};
+var packOkLab = function (_context, args) {
+    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+        throw new Error('Relative color not supported for oklab()');
+    }
+    var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz([l, a, b])));
+    return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+};
+var packOkLch = function (_context, args) {
+    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+        throw new Error('Relative color not supported for oklch()');
+    }
+    var _a = extractOkLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz(lch2lab([l, c, h]))));
+    return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+};
+var packLch = function (_context, args) {
+    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+        throw new Error('Relative color not supported for lch()');
+    }
+    var _a = extractLchComponents(args), l = _a[0], c = _a[1], h = _a[2], a = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz(lch2lab([l, c, h]))));
+    return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), a);
+};
+var extractHslComponents = function (context, args) {
+    var tokens = args.filter(nonFunctionArgSeparator), hue = tokens[0], saturation = tokens[1], lightness = tokens[2], alpha = tokens[3], h = (hue.type === 17 /* TokenType.NUMBER_TOKEN */ ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2), s = isLengthPercentage(saturation) ? saturation.number / 100 : 0, l = isLengthPercentage(lightness) ? lightness.number / 100 : 0, a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
+    return [h, s, l, a];
+};
+var packHSL = function (context, args) {
+    if (isRelativeTransform(args)) {
+        throw new Error('Relative color not supported for hsl()');
+    }
+    var _a = extractHslComponents(context, args), h = _a[0], s = _a[1], l = _a[2], a = _a[3], rgb = hsl2rgb([h, s, l]);
+    return pack(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255, s === 0 ? 1 : a);
+};
+var extractLchComponents = function (args) {
+    var tokens = args.filter(nonFunctionArgSeparator), l = isLengthPercentage(tokens[0]) ? tokens[0].number : 0, c = isLengthPercentage(tokens[1]) ? tokens[1].number : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+    return [l, c, h, a];
+};
+var extractLabComponents = function (args) {
+    var tokens = args.filter(nonFunctionArgSeparator), 
+    // eslint-disable-next-line prettier/prettier
+    l = tokens[0].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+        ? tokens[0].number / 100
+        : isNumberToken(tokens[0])
+            ? tokens[0].number
+            : 0, 
+    // eslint-disable-next-line prettier/prettier
+    a = tokens[1].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+        ? tokens[1].number / 100
+        : isNumberToken(tokens[1])
+            ? tokens[1].number
+            : 0, b = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, alpha = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+    return [l, a, b, alpha];
+};
+var extractOkLchComponents = function (args) {
+    var tokens = args.filter(nonFunctionArgSeparator), 
+    // eslint-disable-next-line prettier/prettier
+    l = tokens[0].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+        ? tokens[0].number / 100
+        : isNumberToken(tokens[0])
+            ? tokens[0].number
+            : 0, 
+    // eslint-disable-next-line prettier/prettier
+    c = tokens[1].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+        ? tokens[1].number / 100
+        : isNumberToken(tokens[1])
+            ? tokens[1].number
+            : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+    return [l, c, h, a];
+};
+/**
+ * Convert D65 to D50
+ *
+ * @param xyz
+ */
+var d65toD50 = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        1.0479297925449969, 0.022946870601609652, -0.05019226628920524, 0.02962780877005599, 0.9904344267538799,
+        -0.017073799063418826, -0.009243040646204504, 0.015055191490298152, 0.7518742814281371
+    ], xyz);
+};
+/**
+ * Convert D50 to D65
+ *
+ * @param xyz
+ */
+var d50toD65 = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.955473421488075, -0.02309845494876471, 0.06325924320057072, -0.0283697093338637, 1.0099953980813041,
+        0.021041441191917323, 0.012314014864481998, -0.020507649298898964, 1.330365926242124
+    ], xyz);
+};
+var hue2rgb = function (t1, t2, hue) {
     if (hue < 0) {
         hue += 1;
     }
@@ -2346,29 +2428,783 @@ function hue2rgb(t1, t2, hue) {
     else {
         return t1;
     }
-}
-var hsl = function (context, args) {
-    var tokens = args.filter(nonFunctionArgSeparator);
-    var hue = tokens[0], saturation = tokens[1], lightness = tokens[2], alpha = tokens[3];
-    var h = (hue.type === 17 /* NUMBER_TOKEN */ ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2);
-    var s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
-    var l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
-    var a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
+};
+var hsl2rgb = function (_a) {
+    var h = _a[0], s = _a[1], l = _a[2];
     if (s === 0) {
-        return pack(l * 255, l * 255, l * 255, 1);
+        return [l * 255, l * 255, l * 255];
+    }
+    var t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s, t1 = l * 2 - t2, r = hue2rgb(t1, t2, h + 1 / 3), g = hue2rgb(t1, t2, h), b = hue2rgb(t1, t2, h - 1 / 3);
+    return [r, g, b];
+};
+/**
+ * Convert lch to OKLab
+ *
+ * @param l
+ * @param c
+ * @param h
+ */
+var lch2lab = function (_a) {
+    var l = _a[0], c = _a[1], h = _a[2];
+    if (c < 0) {
+        c = 0;
+    }
+    if (isNaN(h)) {
+        h = 0;
+    }
+    return [l, c * Math.cos((h * Math.PI) / 180), c * Math.sin((h * Math.PI) / 180)];
+};
+/**
+ * Convert OKLab to XYZ relative to D65
+ *
+ * @param lab
+ */
+var oklab2xyz = function (lab) {
+    var LMSg = multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586, -0.0638541728258133, 1,
+        -0.0894841775298119, -1.2914855480194092
+    ], lab), LMS = LMSg.map(function (val) { return Math.pow(val, 3); });
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        1.2268798758459243, -0.5578149944602171, 0.2813910456659647, -0.0405757452148008, 1.112286803280317,
+        -0.0717110580655164, -0.0763729366746601, -0.4214933324022432, 1.5869240198367816
+    ], LMS);
+};
+/**
+ * Convert Lab to D50-adapted XYZ
+ *
+ * @param lab
+ */
+var lab2xyz = function (lab) {
+    var fy = (lab[0] + 16) / 116, fx = lab[1] / 500 + fy, fz = fy - lab[2] / 200, k = 24389 / 27, e = 24 / 116, xyz = [
+        ((fx > e ? Math.pow(fx, 3) : (116 * fx - 16) / k) * 0.3457) / 0.3585,
+        lab[0] > 8 ? Math.pow(fy, 3) : lab[0] / k,
+        ((fz > e ? Math.pow(fz, 3) : (116 * fz - 16) / k) * (1.0 - 0.3457 - 0.3585)) / 0.3585
+    ];
+    return d50toD65([xyz[0], xyz[1], xyz[2]]);
+};
+/**
+ * Convert RGB to XYZ
+ *
+ * @param _context
+ * @param args
+ */
+var rgbToXyz = function (_context, args) {
+    var tokens = args.filter(nonFunctionArgSeparator);
+    if (tokens.length === 3) {
+        var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2], rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]), _b = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, 1];
+    }
+    if (tokens.length === 4) {
+        var _c = tokens.map(getTokenColorValue), r = _c[0], g = _c[1], b = _c[2], a = _c[3], rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]), _d = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _d[0], y = _d[1], z = _d[2];
+        return [x, y, z, a];
+    }
+    return [0, 0, 0, 1];
+};
+/**
+ * HSL to XYZ
+ *
+ * @param context
+ * @param args
+ */
+var hslToXyz = function (context, args) {
+    var _a = extractHslComponents(context, args), h = _a[0], s = _a[1], l = _a[2], a = _a[3], rgb_linear = rgb2rgbLinear(hsl2rgb([h, s, l])), _b = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _b[0], y = _b[1], z = _b[2];
+    return [x, y, z, a];
+};
+/**
+ * LAB to XYZ
+ *
+ * @param _context
+ * @param args
+ */
+var labToXyz = function (_context, args) {
+    var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], _b = lab2xyz([l, a, b]), x = _b[0], y = _b[1], z = _b[2];
+    return [x, y, z, alpha];
+};
+/**
+ * LCH to XYZ
+ *
+ * @param _context
+ * @param args
+ */
+var lchToXyz = function (_context, args) {
+    var _a = extractLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = lab2xyz(lch2lab([l, c, h])), x = _b[0], y = _b[1], z = _b[2];
+    return [x, y, z, alpha];
+};
+/**
+ * OKLch to XYZ
+ *
+ * @param _context
+ * @param args
+ */
+var oklchToXyz = function (_context, args) {
+    var _a = extractOkLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = oklab2xyz(lch2lab([l, c, h])), x = _b[0], y = _b[1], z = _b[2];
+    return [x, y, z, alpha];
+};
+/**
+ * OKLab to XYZ
+ *
+ * @param _context
+ * @param args
+ */
+var oklabToXyz = function (_context, args) {
+    var _a = extractLabComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = oklab2xyz([l, c, h]), x = _b[0], y = _b[1], z = _b[2];
+    return [x, y, z, alpha];
+};
+/**
+ * XYZ-50 to XYZ
+ *
+ * @param args
+ */
+var xyz50ToXYZ = function (args) {
+    return d50toD65([args[0], args[1], args[2]]);
+};
+/**
+ * Does nothing, required for SUPPORTED_COLOR_SPACES_FROM_XYZ in the _color() function
+ *
+ * @param args
+ */
+var xyzFromXYZ = function (args) {
+    return args;
+};
+/**
+ * XYZ-65 to XYZ-50
+ *
+ * @param args
+ */
+var xyz50FromXYZ = function (args) {
+    var _a = d65toD50([args[0], args[2], args[3]]), x = _a[0], y = _a[1], z = _a[2];
+    return [x, y, z, args[3]];
+};
+/**
+ * Convert XYZ to SRGB and Pack
+ *
+ * @param args
+ */
+var convertXyz = function (args) {
+    return packXYZ([args[0], args[1], args[2], args[3]]);
+};
+/**
+ * Convert XYZ-50 to SRGB and Pack
+ *
+ * @param args
+ */
+var convertXyz50 = function (args) {
+    var xyz = xyz50ToXYZ([args[0], args[1], args[2]]);
+    return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+};
+
+/**
+ * SRGB related functions
+ */
+/**
+ * Convert XYZ to linear-light sRGB
+ *
+ * @param xyz
+ */
+var xyz2rgbLinear = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202,
+        0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786
+    ], xyz);
+};
+/**
+ * Convert XYZ to linear-light sRGB
+ *
+ * @param xyz
+ */
+var rgbLinear2xyz = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
+        0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607
+    ], xyz);
+};
+/**
+ * Convert sRGB to RGB
+ *
+ * @param rgb
+ */
+var srgbLinear2rgb = function (rgb) {
+    return rgb.map(function (c) {
+        var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        // eslint-disable-next-line prettier/prettier
+        return abs > 0.0031308 ? sign * (1.055 * Math.pow(abs, (1 / 2.4)) - 0.055) : 12.92 * c;
+    });
+};
+/**
+ * Convert RGB to sRGB
+ *
+ * @param rgb
+ */
+var rgb2rgbLinear = function (rgb) {
+    return rgb.map(function (c) {
+        var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        // eslint-disable-next-line prettier/prettier
+        return abs <= 0.04045 ? c / 12.92 : sign * Math.pow(((abs + 0.055) / 1.055), 2.4);
+    });
+};
+/**
+ * XYZ to SRGB
+ *
+ * @param args
+ */
+var srgbFromXYZ = function (args) {
+    var _a = srgbLinear2rgb(xyz2rgbLinear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+    return [r, g, b, args[3]];
+};
+/**
+ * XYZ to SRGB-Linear
+ * @param args
+ */
+var srgbLinearFromXYZ = function (args) {
+    var _a = xyz2rgbLinear([args[0], args[1], args[2]]), r = _a[0], g = _a[1], b = _a[2];
+    return [
+        clamp(Math.round(r * 255), 0, 255),
+        clamp(Math.round(g * 255), 0, 255),
+        clamp(Math.round(b * 255), 0, 255),
+        args[3]
+    ];
+};
+
+/**
+ * Display-P3 related functions
+ */
+/**
+ * Convert P3 Linear to xyz
+ *
+ * @param p3l
+ */
+var p3LinearToXyz = function (p3l) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.4865709486482162, 0.26566769316909306, 0.1982172852343625, 0.2289745640697488, 0.6917385218365064,
+        0.079286914093745, 0.0, 0.04511338185890264, 1.043944368900976
+    ], p3l);
+};
+/**
+ * Convert XYZ to P3 Linear
+ *
+ * @param xyz
+ */
+var xyzToP3Linear = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        2.493496911941425, -0.9313836179191239, -0.40271078445071684, -0.8294889695615747, 1.7626640603183463,
+        0.023624685841943577, 0.03584583024378447, -0.07617238926804182, 0.9568845240076872
+    ], xyz);
+};
+/**
+ * Convert P3 to P3 linear
+ *
+ * @param p3
+ */
+var p32p3Linear = function (p3) {
+    return p3.map(function (c) {
+        var sign = c < 0 ? -1 : 1, abs = c * sign;
+        if (abs <= 0.04045) {
+            return c / 12.92;
+        }
+        // eslint-disable-next-line prettier/prettier
+        return sign * Math.pow(((c + 0.055) / 1.055), 2.4) || 0;
+    });
+};
+/**
+ * Convert P3 Linear to P3
+ *
+ * @param p3l
+ */
+var p3Linear2p3 = function (p3l) {
+    return srgbLinear2rgb(p3l);
+};
+/**
+ * Convert P3 to XYZ
+ *
+ * @param args
+ */
+var p3ToXYZ = function (args) {
+    var p3_linear = p32p3Linear([args[0], args[1], args[2]]);
+    return p3LinearToXyz([p3_linear[0], p3_linear[1], p3_linear[2]]);
+};
+/**
+ * Convert XYZ to P3
+ *
+ * @param args
+ */
+var p3FromXYZ = function (args) {
+    var _a = p3Linear2p3(xyzToP3Linear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+    return [r, g, b, args[3]];
+};
+/**
+ * Convert P3 to SRGB and Pack
+ *
+ * @param args
+ */
+var convertP3 = function (args) {
+    var xyz = p3ToXYZ([args[0], args[1], args[2]]);
+    return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+};
+
+/**
+ * A98-RGB related functions
+ */
+/**
+ * Convert XYZ to a98 linear
+ *
+ * @param xyz
+ */
+var xyz2a98Linear = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        2.0415879038107465, -0.5650069742788596, -0.34473135077832956, -0.9692436362808795, 1.8759675015077202,
+        0.04155505740717557, 0.013444280632031142, -0.11836239223101838, 1.0151749943912054
+    ], xyz);
+};
+/**
+ * Convert XYZ to a98 linear
+ *
+ * @param a98
+ */
+var a98Linear2xyz = function (a98) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.5766690429101305, 0.1855582379065463, 0.1882286462349947, 0.29734497525053605, 0.6273635662554661,
+        0.0752914584939978, 0.02703136138641234, 0.07068885253582723, 0.9913375368376388
+    ], a98);
+};
+/**
+ * Convert A98 RGB to rgb linear
+ *
+ * @param rgb
+ */
+var a982a98Linear = function (rgb) {
+    var mapped = rgb.map(function (c) {
+        var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        return sign * Math.pow(abs, (563 / 256));
+    });
+    return [mapped[0], mapped[1], mapped[2]];
+};
+/**
+ * Convert A98 RGB Linear to A98
+ *
+ * @param rgb
+ */
+var a98Linear2a98 = function (rgb) {
+    var mapped = rgb.map(function (c) {
+        var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        return sign * Math.pow(abs, (256 / 563));
+    });
+    return [mapped[0], mapped[1], mapped[2]];
+};
+/**
+ * Convert XYZ to A98
+ *
+ * @param args
+ */
+var a98FromXYZ = function (args) {
+    var _a = a98Linear2a98(xyz2a98Linear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+    return [r, g, b, args[3]];
+};
+/**
+ * Convert A98 to XYZ and Pack
+ *
+ * @param args
+ */
+var convertA98rgb = function (args) {
+    var srgb_linear = xyz2rgbLinear(a98Linear2xyz(a982a98Linear([args[0], args[1], args[2]])));
+    return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
+};
+
+/**
+ * Pro Photo related functions
+ */
+/**
+ * Convert linear-light display-p3 to XYZ D65
+ *
+ * @param p3
+ */
+var proPhotoLinearToXyz = function (p3) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.7977666449006423, 0.13518129740053308, 0.0313477341283922, 0.2880748288194013, 0.711835234241873,
+        0.00008993693872564, 0.0, 0.0, 0.8251046025104602
+    ], p3);
+};
+/**
+ * Convert XYZ D65 to linear-light display-p3
+ *
+ * @param xyz
+ */
+var xyzToProPhotoLinear = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        1.3457868816471583, -0.25557208737979464, -0.05110186497554526, -0.5446307051249019, 1.5082477428451468,
+        0.02052744743642139, 0.0, 0.0, 1.2119675456389452
+    ], xyz);
+};
+/**
+ * Convert Pro-Photo to Pro-Photo Linear
+ *
+ * @param p3
+ */
+var proPhotoToProPhotoLinear = function (p3) {
+    return p3.map(function (c) {
+        return c < 16 / 512 ? c / 16 : Math.pow(c, 1.8);
+    });
+};
+/**
+ * Convert Pro-Photo Linear to Pro-Photo
+ *
+ * @param p3
+ */
+var proPhotoLinearToProPhoto = function (p3) {
+    return p3.map(function (c) {
+        return c > 1 / 512 ? Math.pow(c, (1 / 1.8)) : c * 16;
+    });
+};
+/**
+ * Convert Pro-Photo to XYZ
+ *
+ * @param args
+ */
+var proPhotoToXYZ = function (args) {
+    var prophoto_linear = proPhotoToProPhotoLinear([args[0], args[1], args[2]]);
+    return d50toD65(proPhotoLinearToXyz([prophoto_linear[0], prophoto_linear[1], prophoto_linear[2]]));
+};
+/**
+ * Convert XYZ to Pro-Photo
+ *
+ * @param args
+ */
+var proPhotoFromXYZ = function (args) {
+    var _a = proPhotoLinearToProPhoto(xyzToProPhotoLinear(d65toD50([args[0], args[1], args[2]]))), r = _a[0], g = _a[1], b = _a[2];
+    return [r, g, b, args[3]];
+};
+/**
+ * Convert Pro-Photo to XYZ and Pack
+ *
+ * @param args
+ */
+var convertProPhoto = function (args) {
+    var xyz = proPhotoToXYZ([args[0], args[1], args[2]]);
+    return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+};
+
+/**
+ * REC2020 related functions
+ */
+var _a = 1.09929682680944;
+var _b = 0.018053968510807;
+/**
+ * Convert rec2020 to rec2020 linear
+ *
+ * @param rgb
+ */
+var rec20202rec2020Linear = function (rgb) {
+    return rgb.map(function (c) {
+        return c < _b * 4.5 ? c / 4.5 : Math.pow((c + _a - 1) / _a, 1 / 0.45);
+    });
+};
+/**
+ * Convert rec2020 linear to rec2020
+ *
+ * @param rgb
+ */
+var rec2020Linear2rec2020 = function (rgb) {
+    return rgb.map(function (c) {
+        return c >= _b ? _a * Math.pow(c, 0.45) - (_a - 1) : 4.5 * c;
+    });
+};
+/**
+ * Convert rec2020 linear to XYZ D65
+ *
+ * @param rec
+ */
+var rec2020LinearToXyz = function (rec) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        0.6369580483012914, 0.14461690358620832, 0.1688809751641721, 0.2627002120112671, 0.6779980715188708,
+        0.05930171646986196, 0.0, 0.028072693049087428, 1.060985057710791
+    ], rec);
+};
+/**
+ * Convert XYZ D65 to rec2020 linear
+ *
+ * @param xyz
+ */
+var xyzToRec2020Linear = function (xyz) {
+    return multiplyMatrices(
+    // eslint-disable-next-line prettier/prettier
+    [
+        1.716651187971268, -0.355670783776392, -0.25336628137366, -0.666684351832489, 1.616481236634939,
+        0.0157685458139111, 0.017639857445311, -0.042770613257809, 0.942103121235474
+    ], xyz);
+};
+/**
+ * Convert Rec2020 to XYZ
+ *
+ * @param args
+ */
+var rec2020ToXYZ = function (args) {
+    var rec2020_linear = rec20202rec2020Linear([args[0], args[1], args[2]]);
+    return rec2020LinearToXyz([rec2020_linear[0], rec2020_linear[1], rec2020_linear[2]]);
+};
+/**
+ * Convert XYZ to Rec2020
+ *
+ * @param args
+ */
+var rec2020FromXYZ = function (args) {
+    var _c = rec2020Linear2rec2020(xyzToRec2020Linear([args[0], args[1], args[2]])), r = _c[0], g = _c[1], b = _c[2];
+    return [r, g, b, args[3]];
+};
+/**
+ * Convert Rec2020 to SRGB and Pack
+ *
+ * @param args
+ */
+var convertRec2020 = function (args) {
+    var xyz = rec2020ToXYZ([args[0], args[1], args[2]]);
+    return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+};
+
+var color$1 = {
+    name: 'color',
+    parse: function (context, value) {
+        if (value.type === 18 /* TokenType.FUNCTION */) {
+            var colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
+            if (typeof colorFunction === 'undefined') {
+                throw new Error("Attempting to parse an unsupported color function \"".concat(value.name, "\""));
+            }
+            return colorFunction(context, value.values);
+        }
+        if (value.type === 5 /* TokenType.HASH_TOKEN */) {
+            var _a = hash2rgb(value), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+            return pack(r, g, b, a);
+        }
+        if (value.type === 20 /* TokenType.IDENT_TOKEN */) {
+            var namedColor = COLORS[value.value.toUpperCase()];
+            if (typeof namedColor !== 'undefined') {
+                return namedColor;
+            }
+        }
+        return COLORS.TRANSPARENT;
+    }
+};
+var hash2rgb = function (token) {
+    if (token.value.length === 3) {
+        var r = token.value.substring(0, 1);
+        var g = token.value.substring(1, 2);
+        var b = token.value.substring(2, 3);
+        return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), 1];
+    }
+    if (token.value.length === 4) {
+        var r = token.value.substring(0, 1);
+        var g = token.value.substring(1, 2);
+        var b = token.value.substring(2, 3);
+        var a = token.value.substring(3, 4);
+        return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255];
+    }
+    if (token.value.length === 6) {
+        var r = token.value.substring(0, 2);
+        var g = token.value.substring(2, 4);
+        var b = token.value.substring(4, 6);
+        return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1];
+    }
+    if (token.value.length === 8) {
+        var r = token.value.substring(0, 2);
+        var g = token.value.substring(2, 4);
+        var b = token.value.substring(4, 6);
+        var a = token.value.substring(6, 8);
+        return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseInt(a, 16) / 255];
+    }
+    return [0, 0, 0, 1];
+};
+var rgb = function (_context, args) {
+    var tokens = args.filter(nonFunctionArgSeparator);
+    if (isRelativeTransform(tokens)) {
+        throw new Error('Relative color not supported for rgb()');
+    }
+    if (tokens.length === 3) {
+        var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2];
+        return pack(r, g, b, 1);
     }
-    var t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
-    var t1 = l * 2 - t2;
-    var r = hue2rgb(t1, t2, h + 1 / 3);
-    var g = hue2rgb(t1, t2, h);
-    var b = hue2rgb(t1, t2, h - 1 / 3);
-    return pack(r * 255, g * 255, b * 255, a);
+    if (tokens.length === 4) {
+        var _b = tokens.map(getTokenColorValue), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
+        return pack(r, g, b, a);
+    }
+    return 0;
+};
+/**
+ * Handle the CSS color() function
+ *
+ * @param context
+ * @param args
+ */
+var _color = function (context, args) {
+    var tokens = args.filter(nonFunctionArgSeparator), token_1_value = tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ ? tokens[0].value : 'unknown', is_absolute = !isRelativeTransform(tokens);
+    if (is_absolute) {
+        var color_space = token_1_value, colorSpaceFunction = SUPPORTED_COLOR_SPACES_ABSOLUTE[color_space];
+        if (typeof colorSpaceFunction === 'undefined') {
+            throw new Error("Attempting to parse an unsupported color space \"".concat(color_space, "\" for color() function"));
+        }
+        var c1 = isNumberToken(tokens[1]) ? tokens[1].number : 0, c2 = isNumberToken(tokens[2]) ? tokens[2].number : 0, c3 = isNumberToken(tokens[3]) ? tokens[3].number : 0, a = tokens.length > 4 &&
+            tokens[4].type === 6 /* TokenType.DELIM_TOKEN */ &&
+            tokens[4].value === '/' &&
+            isNumberToken(tokens[5])
+            ? tokens[5].number
+            : 1;
+        return colorSpaceFunction([c1, c2, c3, a]);
+    }
+    else {
+        var extractComponent = function (color, token) {
+            if (isNumberToken(token)) {
+                return token.number;
+            }
+            var posFromVal = function (value) {
+                return value === 'r' || value === 'x' ? 0 : value === 'g' || value === 'y' ? 1 : 2;
+            };
+            if (isIdentToken(token)) {
+                var position = posFromVal(token.value);
+                return color[position];
+            }
+            var parseCalc = function (args) {
+                var parts = args.filter(nonFunctionArgSeparator);
+                var expression = '(';
+                for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+                    var part = parts_1[_i];
+                    expression +=
+                        part.type === 18 /* TokenType.FUNCTION */ && part.name === 'calc'
+                            ? parseCalc(part.values)
+                            : isNumberToken(part)
+                                ? part.number
+                                : part.type === 6 /* TokenType.DELIM_TOKEN */ || isIdentToken(part)
+                                    ? part.value
+                                    : '';
+                }
+                expression += ')';
+                return expression;
+            };
+            if (token.type === 18 /* TokenType.FUNCTION */) {
+                var args_1 = token.values.filter(nonFunctionArgSeparator);
+                if (token.name === 'calc') {
+                    var expression = parseCalc(args_1)
+                        .replace(/r|x/, color[0].toString())
+                        .replace(/g|y/, color[1].toString())
+                        .replace(/b|z/, color[2].toString());
+                    return new Function('return ' + expression)();
+                }
+            }
+            return null;
+        };
+        var from_colorspace = tokens[1].type === 18 /* TokenType.FUNCTION */
+            ? tokens[1].name
+            : isIdentToken(tokens[1]) || tokens[1].type === 5 /* TokenType.HASH_TOKEN */
+                ? 'rgb'
+                : 'unknown', to_colorspace = isIdentToken(tokens[2]) ? tokens[2].value : 'unknown';
+        var from = tokens[1].type === 18 /* TokenType.FUNCTION */ ? tokens[1].values : isIdentToken(tokens[1]) ? [tokens[1]] : [];
+        if (isIdentToken(tokens[1])) {
+            var named_color = COLORS[tokens[1].value.toUpperCase()];
+            if (typeof named_color === 'undefined') {
+                throw new Error("Attempting to use unknown color in relative color 'from'");
+            }
+            else {
+                var _c = parseColor(context, tokens[1].value), alpha = 0xff & _c, blue = 0xff & (_c >> 8), green = 0xff & (_c >> 16), red = 0xff & (_c >> 24);
+                from = [
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: red, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: green, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: blue, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
+                ];
+            }
+        }
+        else if (tokens[1].type === 5 /* TokenType.HASH_TOKEN */) {
+            var _a = hash2rgb(tokens[1]), red = _a[0], green = _a[1], blue = _a[2], alpha = _a[3];
+            from = [
+                { type: 17 /* TokenType.NUMBER_TOKEN */, number: red, flags: 1 },
+                { type: 17 /* TokenType.NUMBER_TOKEN */, number: green, flags: 1 },
+                { type: 17 /* TokenType.NUMBER_TOKEN */, number: blue, flags: 1 },
+                { type: 17 /* TokenType.NUMBER_TOKEN */, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
+            ];
+        }
+        if (from.length === 0) {
+            throw new Error("Attempting to use unknown color in relative color 'from'");
+        }
+        if (to_colorspace === 'unknown') {
+            throw new Error("Attempting to use unknown colorspace in relative color 'to'");
+        }
+        var fromColorToXyz = SUPPORTED_COLOR_SPACES_TO_XYZ[from_colorspace], toColorFromXyz = SUPPORTED_COLOR_SPACES_FROM_XYZ[to_colorspace], toColorPack = SUPPORTED_COLOR_SPACES_ABSOLUTE[to_colorspace];
+        if (typeof fromColorToXyz === 'undefined') {
+            throw new Error("Attempting to parse an unsupported color space \"".concat(from_colorspace, "\" for color() function"));
+        }
+        if (typeof toColorFromXyz === 'undefined') {
+            throw new Error("Attempting to parse an unsupported color space \"".concat(to_colorspace, "\" for color() function"));
+        }
+        var from_color = fromColorToXyz(context, from), from_final_colorspace = toColorFromXyz(from_color), c1 = extractComponent(from_final_colorspace, tokens[3]), c2 = extractComponent(from_final_colorspace, tokens[4]), c3 = extractComponent(from_final_colorspace, tokens[5]), a = tokens.length > 6 &&
+            tokens[6].type === 6 /* TokenType.DELIM_TOKEN */ &&
+            tokens[6].value === '/' &&
+            isNumberToken(tokens[7])
+            ? tokens[7].number
+            : 1;
+        if (c1 === null || c2 === null || c3 === null) {
+            throw new Error("Invalid relative color in color() function");
+        }
+        return toColorPack([c1, c2, c3, a]);
+    }
+};
+var SUPPORTED_COLOR_SPACES_ABSOLUTE = {
+    srgb: packSrgb,
+    'srgb-linear': packSrgbLinear,
+    'display-p3': convertP3,
+    'a98-rgb': convertA98rgb,
+    'prophoto-rgb': convertProPhoto,
+    xyz: convertXyz,
+    'xyz-d50': convertXyz50,
+    'xyz-d65': convertXyz,
+    rec2020: convertRec2020
+};
+var SUPPORTED_COLOR_SPACES_TO_XYZ = {
+    rgb: rgbToXyz,
+    hsl: hslToXyz,
+    lab: labToXyz,
+    lch: lchToXyz,
+    oklab: oklabToXyz,
+    oklch: oklchToXyz
+};
+var SUPPORTED_COLOR_SPACES_FROM_XYZ = {
+    srgb: srgbFromXYZ,
+    'srgb-linear': srgbLinearFromXYZ,
+    'display-p3': p3FromXYZ,
+    'a98-rgb': a98FromXYZ,
+    'prophoto-rgb': proPhotoFromXYZ,
+    xyz: xyzFromXYZ,
+    'xyz-d50': xyz50FromXYZ,
+    'xyz-d65': xyzFromXYZ,
+    rec2020: rec2020FromXYZ
 };
 var SUPPORTED_COLOR_FUNCTIONS = {
-    hsl: hsl,
-    hsla: hsl,
+    hsl: packHSL,
+    hsla: packHSL,
     rgb: rgb,
-    rgba: rgb
+    rgba: rgb,
+    lch: packLch,
+    oklch: packOkLch,
+    oklab: packOkLab,
+    lab: packLab,
+    color: _color
 };
 var parseColor = function (context, value) {
     return color$1.parse(context, Parser.create(value).parseComponentValue());
@@ -2529,18 +3365,18 @@ var backgroundClip = {
     name: 'background-clip',
     initialValue: 'border-box',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return tokens.map(function (token) {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':
-                        return 1 /* PADDING_BOX */;
+                        return 1 /* BACKGROUND_CLIP.PADDING_BOX */;
                     case 'content-box':
-                        return 2 /* CONTENT_BOX */;
+                        return 2 /* BACKGROUND_CLIP.CONTENT_BOX */;
                 }
             }
-            return 0 /* BORDER_BOX */;
+            return 0 /* BACKGROUND_CLIP.BORDER_BOX */;
         });
     }
 };
@@ -2549,7 +3385,7 @@ var backgroundColor = {
     name: "background-color",
     initialValue: 'transparent',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'color'
 };
 
@@ -2652,24 +3488,24 @@ var calculateRadius = function (gradient, x, y, width, height) {
     var rx = 0;
     var ry = 0;
     switch (gradient.size) {
-        case 0 /* CLOSEST_SIDE */:
+        case 0 /* CSSRadialExtent.CLOSEST_SIDE */:
             // The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center.
             // If the shape is an ellipse, it exactly meets the closest side in each dimension.
-            if (gradient.shape === 0 /* CIRCLE */) {
+            if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                 rx = ry = Math.min(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
             }
-            else if (gradient.shape === 1 /* ELLIPSE */) {
+            else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                 rx = Math.min(Math.abs(x), Math.abs(x - width));
                 ry = Math.min(Math.abs(y), Math.abs(y - height));
             }
             break;
-        case 2 /* CLOSEST_CORNER */:
+        case 2 /* CSSRadialExtent.CLOSEST_CORNER */:
             // The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center.
             // If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.
-            if (gradient.shape === 0 /* CIRCLE */) {
+            if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                 rx = ry = Math.min(distance(x, y), distance(x, y - height), distance(x - width, y), distance(x - width, y - height));
             }
-            else if (gradient.shape === 1 /* ELLIPSE */) {
+            else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                 // Compute the ratio ry/rx (which is to be the same as for "closest-side")
                 var c = Math.min(Math.abs(y), Math.abs(y - height)) / Math.min(Math.abs(x), Math.abs(x - width));
                 var _a = findCorner(width, height, x, y, true), cx = _a[0], cy = _a[1];
@@ -2677,23 +3513,23 @@ var calculateRadius = function (gradient, x, y, width, height) {
                 ry = c * rx;
             }
             break;
-        case 1 /* FARTHEST_SIDE */:
+        case 1 /* CSSRadialExtent.FARTHEST_SIDE */:
             // Same as closest-side, except the ending shape is sized based on the farthest side(s)
-            if (gradient.shape === 0 /* CIRCLE */) {
+            if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                 rx = ry = Math.max(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
             }
-            else if (gradient.shape === 1 /* ELLIPSE */) {
+            else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                 rx = Math.max(Math.abs(x), Math.abs(x - width));
                 ry = Math.max(Math.abs(y), Math.abs(y - height));
             }
             break;
-        case 3 /* FARTHEST_CORNER */:
+        case 3 /* CSSRadialExtent.FARTHEST_CORNER */:
             // Same as closest-corner, except the ending shape is sized based on the farthest corner.
             // If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.
-            if (gradient.shape === 0 /* CIRCLE */) {
+            if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                 rx = ry = Math.max(distance(x, y), distance(x, y - height), distance(x - width, y), distance(x - width, y - height));
             }
-            else if (gradient.shape === 1 /* ELLIPSE */) {
+            else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                 // Compute the ratio ry/rx (which is to be the same as for "farthest-side")
                 var c = Math.max(Math.abs(y), Math.abs(y - height)) / Math.max(Math.abs(x), Math.abs(x - width));
                 var _b = findCorner(width, height, x, y, false), cx = _b[0], cy = _b[1];
@@ -2715,7 +3551,7 @@ var linearGradient = function (context, tokens) {
     parseFunctionArgs(tokens).forEach(function (arg, i) {
         if (i === 0) {
             var firstToken = arg[0];
-            if (firstToken.type === 20 /* IDENT_TOKEN */ && firstToken.value === 'to') {
+            if (firstToken.type === 20 /* TokenType.IDENT_TOKEN */ && firstToken.value === 'to') {
                 angle$1 = parseNamedSide(arg);
                 return;
             }
@@ -2727,7 +3563,7 @@ var linearGradient = function (context, tokens) {
         var colorStop = parseColorStop(context, arg);
         stops.push(colorStop);
     });
-    return { angle: angle$1, stops: stops, type: 1 /* LINEAR_GRADIENT */ };
+    return { angle: angle$1, stops: stops, type: 1 /* CSSImageType.LINEAR_GRADIENT */ };
 };
 
 var prefixLinearGradient = function (context, tokens) {
@@ -2736,7 +3572,7 @@ var prefixLinearGradient = function (context, tokens) {
     parseFunctionArgs(tokens).forEach(function (arg, i) {
         if (i === 0) {
             var firstToken = arg[0];
-            if (firstToken.type === 20 /* IDENT_TOKEN */ &&
+            if (firstToken.type === 20 /* TokenType.IDENT_TOKEN */ &&
                 ['top', 'left', 'right', 'bottom'].indexOf(firstToken.value) !== -1) {
                 angle$1 = parseNamedSide(arg);
                 return;
@@ -2752,30 +3588,30 @@ var prefixLinearGradient = function (context, tokens) {
     return {
         angle: angle$1,
         stops: stops,
-        type: 1 /* LINEAR_GRADIENT */
+        type: 1 /* CSSImageType.LINEAR_GRADIENT */
     };
 };
 
 var webkitGradient = function (context, tokens) {
     var angle = deg(180);
     var stops = [];
-    var type = 1 /* LINEAR_GRADIENT */;
-    var shape = 0 /* CIRCLE */;
-    var size = 3 /* FARTHEST_CORNER */;
+    var type = 1 /* CSSImageType.LINEAR_GRADIENT */;
+    var shape = 0 /* CSSRadialShape.CIRCLE */;
+    var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
     var position = [];
     parseFunctionArgs(tokens).forEach(function (arg, i) {
         var firstToken = arg[0];
         if (i === 0) {
             if (isIdentToken(firstToken) && firstToken.value === 'linear') {
-                type = 1 /* LINEAR_GRADIENT */;
+                type = 1 /* CSSImageType.LINEAR_GRADIENT */;
                 return;
             }
             else if (isIdentToken(firstToken) && firstToken.value === 'radial') {
-                type = 2 /* RADIAL_GRADIENT */;
+                type = 2 /* CSSImageType.RADIAL_GRADIENT */;
                 return;
             }
         }
-        if (firstToken.type === 18 /* FUNCTION */) {
+        if (firstToken.type === 18 /* TokenType.FUNCTION */) {
             if (firstToken.name === 'from') {
                 var color = color$1.parse(context, firstToken.values[0]);
                 stops.push({ stop: ZERO_LENGTH, color: color });
@@ -2791,7 +3627,7 @@ var webkitGradient = function (context, tokens) {
                     var stop_1 = values[0];
                     if (isNumberToken(stop_1)) {
                         stops.push({
-                            stop: { type: 16 /* PERCENTAGE_TOKEN */, number: stop_1.number * 100, flags: stop_1.flags },
+                            stop: { type: 16 /* TokenType.PERCENTAGE_TOKEN */, number: stop_1.number * 100, flags: stop_1.flags },
                             color: color
                         });
                     }
@@ -2799,7 +3635,7 @@ var webkitGradient = function (context, tokens) {
             }
         }
     });
-    return type === 1 /* LINEAR_GRADIENT */
+    return type === 1 /* CSSImageType.LINEAR_GRADIENT */
         ? {
             angle: (angle + deg(180)) % deg(360),
             stops: stops,
@@ -2817,8 +3653,8 @@ var ELLIPSE = 'ellipse';
 var COVER = 'cover';
 var CONTAIN = 'contain';
 var radialGradient = function (context, tokens) {
-    var shape = 0 /* CIRCLE */;
-    var size = 3 /* FARTHEST_CORNER */;
+    var shape = 0 /* CSSRadialShape.CIRCLE */;
+    var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
     var stops = [];
     var position = [];
     parseFunctionArgs(tokens).forEach(function (arg, i) {
@@ -2849,27 +3685,27 @@ var radialGradient = function (context, tokens) {
                 else if (isIdentToken(token)) {
                     switch (token.value) {
                         case CIRCLE:
-                            shape = 0 /* CIRCLE */;
+                            shape = 0 /* CSSRadialShape.CIRCLE */;
                             return false;
                         case ELLIPSE:
-                            shape = 1 /* ELLIPSE */;
+                            shape = 1 /* CSSRadialShape.ELLIPSE */;
                             return false;
                         case 'at':
                             isAtPosition_1 = true;
                             return false;
                         case CLOSEST_SIDE:
-                            size = 0 /* CLOSEST_SIDE */;
+                            size = 0 /* CSSRadialExtent.CLOSEST_SIDE */;
                             return false;
                         case COVER:
                         case FARTHEST_SIDE:
-                            size = 1 /* FARTHEST_SIDE */;
+                            size = 1 /* CSSRadialExtent.FARTHEST_SIDE */;
                             return false;
                         case CONTAIN:
                         case CLOSEST_CORNER:
-                            size = 2 /* CLOSEST_CORNER */;
+                            size = 2 /* CSSRadialExtent.CLOSEST_CORNER */;
                             return false;
                         case FARTHEST_CORNER:
-                            size = 3 /* FARTHEST_CORNER */;
+                            size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
                             return false;
                     }
                 }
@@ -2888,12 +3724,12 @@ var radialGradient = function (context, tokens) {
             stops.push(colorStop);
         }
     });
-    return { size: size, shape: shape, stops: stops, position: position, type: 2 /* RADIAL_GRADIENT */ };
+    return { size: size, shape: shape, stops: stops, position: position, type: 2 /* CSSImageType.RADIAL_GRADIENT */ };
 };
 
 var prefixRadialGradient = function (context, tokens) {
-    var shape = 0 /* CIRCLE */;
-    var size = 3 /* FARTHEST_CORNER */;
+    var shape = 0 /* CSSRadialShape.CIRCLE */;
+    var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
     var stops = [];
     var position = [];
     parseFunctionArgs(tokens).forEach(function (arg, i) {
@@ -2927,24 +3763,24 @@ var prefixRadialGradient = function (context, tokens) {
                 if (isIdentToken(token)) {
                     switch (token.value) {
                         case CIRCLE:
-                            shape = 0 /* CIRCLE */;
+                            shape = 0 /* CSSRadialShape.CIRCLE */;
                             return false;
                         case ELLIPSE:
-                            shape = 1 /* ELLIPSE */;
+                            shape = 1 /* CSSRadialShape.ELLIPSE */;
                             return false;
                         case CONTAIN:
                         case CLOSEST_SIDE:
-                            size = 0 /* CLOSEST_SIDE */;
+                            size = 0 /* CSSRadialExtent.CLOSEST_SIDE */;
                             return false;
                         case FARTHEST_SIDE:
-                            size = 1 /* FARTHEST_SIDE */;
+                            size = 1 /* CSSRadialExtent.FARTHEST_SIDE */;
                             return false;
                         case CLOSEST_CORNER:
-                            size = 2 /* CLOSEST_CORNER */;
+                            size = 2 /* CSSRadialExtent.CLOSEST_CORNER */;
                             return false;
                         case COVER:
                         case FARTHEST_CORNER:
-                            size = 3 /* FARTHEST_CORNER */;
+                            size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
                             return false;
                     }
                 }
@@ -2963,36 +3799,36 @@ var prefixRadialGradient = function (context, tokens) {
             stops.push(colorStop);
         }
     });
-    return { size: size, shape: shape, stops: stops, position: position, type: 2 /* RADIAL_GRADIENT */ };
+    return { size: size, shape: shape, stops: stops, position: position, type: 2 /* CSSImageType.RADIAL_GRADIENT */ };
 };
 
 var isLinearGradient = function (background) {
-    return background.type === 1 /* LINEAR_GRADIENT */;
+    return background.type === 1 /* CSSImageType.LINEAR_GRADIENT */;
 };
 var isRadialGradient = function (background) {
-    return background.type === 2 /* RADIAL_GRADIENT */;
+    return background.type === 2 /* CSSImageType.RADIAL_GRADIENT */;
 };
 var image = {
     name: 'image',
     parse: function (context, value) {
-        if (value.type === 22 /* URL_TOKEN */) {
-            var image_1 = { url: value.value, type: 0 /* URL */ };
+        if (value.type === 22 /* TokenType.URL_TOKEN */) {
+            var image_1 = { url: value.value, type: 0 /* CSSImageType.URL */ };
             context.cache.addImage(value.value);
             return image_1;
         }
-        if (value.type === 18 /* FUNCTION */) {
+        if (value.type === 18 /* TokenType.FUNCTION */) {
             var imageFunction = SUPPORTED_IMAGE_FUNCTIONS[value.name];
             if (typeof imageFunction === 'undefined') {
-                throw new Error("Attempting to parse an unsupported image function \"" + value.name + "\"");
+                throw new Error("Attempting to parse an unsupported image function \"".concat(value.name, "\""));
             }
             return imageFunction(context, value.values);
         }
-        throw new Error("Unsupported image type " + value.type);
+        throw new Error("Unsupported image type ".concat(value.type));
     }
 };
 function isSupportedImage(value) {
-    return (!(value.type === 20 /* IDENT_TOKEN */ && value.value === 'none') &&
-        (value.type !== 18 /* FUNCTION */ || !!SUPPORTED_IMAGE_FUNCTIONS[value.name]));
+    return (!(value.type === 20 /* TokenType.IDENT_TOKEN */ && value.value === 'none') &&
+        (value.type !== 18 /* TokenType.FUNCTION */ || !!SUPPORTED_IMAGE_FUNCTIONS[value.name]));
 }
 var SUPPORTED_IMAGE_FUNCTIONS = {
     'linear-gradient': linearGradient,
@@ -3011,14 +3847,14 @@ var SUPPORTED_IMAGE_FUNCTIONS = {
 var backgroundImage = {
     name: 'background-image',
     initialValue: 'none',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (context, tokens) {
         if (tokens.length === 0) {
             return [];
         }
         var first = tokens[0];
-        if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+        if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
             return [];
         }
         return tokens
@@ -3031,18 +3867,18 @@ var backgroundOrigin = {
     name: 'background-origin',
     initialValue: 'border-box',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return tokens.map(function (token) {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':
-                        return 1 /* PADDING_BOX */;
+                        return 1 /* BACKGROUND_ORIGIN.PADDING_BOX */;
                     case 'content-box':
-                        return 2 /* CONTENT_BOX */;
+                        return 2 /* BACKGROUND_ORIGIN.CONTENT_BOX */;
                 }
             }
-            return 0 /* BORDER_BOX */;
+            return 0 /* BACKGROUND_ORIGIN.BORDER_BOX */;
         });
     }
 };
@@ -3050,7 +3886,7 @@ var backgroundOrigin = {
 var backgroundPosition = {
     name: 'background-position',
     initialValue: '0% 0%',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (_context, tokens) {
         return parseFunctionArgs(tokens)
@@ -3063,7 +3899,7 @@ var backgroundRepeat = {
     name: 'background-repeat',
     initialValue: 'repeat',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return parseFunctionArgs(tokens)
             .map(function (values) {
@@ -3078,16 +3914,16 @@ var backgroundRepeat = {
 var parseBackgroundRepeat = function (value) {
     switch (value) {
         case 'no-repeat':
-            return 1 /* NO_REPEAT */;
+            return 1 /* BACKGROUND_REPEAT.NO_REPEAT */;
         case 'repeat-x':
         case 'repeat no-repeat':
-            return 2 /* REPEAT_X */;
+            return 2 /* BACKGROUND_REPEAT.REPEAT_X */;
         case 'repeat-y':
         case 'no-repeat repeat':
-            return 3 /* REPEAT_Y */;
+            return 3 /* BACKGROUND_REPEAT.REPEAT_Y */;
         case 'repeat':
         default:
-            return 0 /* REPEAT */;
+            return 0 /* BACKGROUND_REPEAT.REPEAT */;
     }
 };
 
@@ -3101,7 +3937,7 @@ var backgroundSize = {
     name: 'background-size',
     initialValue: '0',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return parseFunctionArgs(tokens).map(function (values) { return values.filter(isBackgroundSizeInfoToken); });
     }
@@ -3111,10 +3947,10 @@ var isBackgroundSizeInfoToken = function (value) {
 };
 
 var borderColorForSide = function (side) { return ({
-    name: "border-" + side + "-color",
+    name: "border-".concat(side, "-color"),
     initialValue: 'transparent',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'color'
 }); };
 var borderTopColor = borderColorForSide('top');
@@ -3123,10 +3959,10 @@ var borderBottomColor = borderColorForSide('bottom');
 var borderLeftColor = borderColorForSide('left');
 
 var borderRadiusForSide = function (side) { return ({
-    name: "border-radius-" + side,
+    name: "border-radius-".concat(side),
     initialValue: '0 0',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return parseLengthPercentageTuple(tokens.filter(isLengthPercentage));
     }
@@ -3137,22 +3973,22 @@ var borderBottomRightRadius = borderRadiusForSide('bottom-right');
 var borderBottomLeftRadius = borderRadiusForSide('bottom-left');
 
 var borderStyleForSide = function (side) { return ({
-    name: "border-" + side + "-style",
+    name: "border-".concat(side, "-style"),
     initialValue: 'solid',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, style) {
         switch (style) {
             case 'none':
-                return 0 /* NONE */;
+                return 0 /* BORDER_STYLE.NONE */;
             case 'dashed':
-                return 2 /* DASHED */;
+                return 2 /* BORDER_STYLE.DASHED */;
             case 'dotted':
-                return 3 /* DOTTED */;
+                return 3 /* BORDER_STYLE.DOTTED */;
             case 'double':
-                return 4 /* DOUBLE */;
+                return 4 /* BORDER_STYLE.DOUBLE */;
         }
-        return 1 /* SOLID */;
+        return 1 /* BORDER_STYLE.SOLID */;
     }
 }); };
 var borderTopStyle = borderStyleForSide('top');
@@ -3161,9 +3997,9 @@ var borderBottomStyle = borderStyleForSide('bottom');
 var borderLeftStyle = borderStyleForSide('left');
 
 var borderWidthForSide = function (side) { return ({
-    name: "border-" + side + "-width",
+    name: "border-".concat(side, "-width"),
     initialValue: '0',
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
     parse: function (_context, token) {
         if (isDimensionToken(token)) {
@@ -3181,7 +4017,7 @@ var color = {
     name: "color",
     initialValue: 'transparent',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'color'
 };
 
@@ -3189,14 +4025,14 @@ var direction = {
     name: 'direction',
     initialValue: 'ltr',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, direction) {
         switch (direction) {
             case 'rtl':
-                return 1 /* RTL */;
+                return 1 /* DIRECTION.RTL */;
             case 'ltr':
             default:
-                return 0 /* LTR */;
+                return 0 /* DIRECTION.LTR */;
         }
     }
 };
@@ -3205,97 +4041,97 @@ var display = {
     name: 'display',
     initialValue: 'inline-block',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return tokens.filter(isIdentToken).reduce(function (bit, token) {
-            return bit | parseDisplayValue(token.value);
-        }, 0 /* NONE */);
+            return bit | parseDisplayValue$1(token.value);
+        }, 0 /* DISPLAY.NONE */);
     }
 };
-var parseDisplayValue = function (display) {
+var parseDisplayValue$1 = function (display) {
     switch (display) {
         case 'block':
         case '-webkit-box':
-            return 2 /* BLOCK */;
+            return 2 /* DISPLAY.BLOCK */;
         case 'inline':
-            return 4 /* INLINE */;
+            return 4 /* DISPLAY.INLINE */;
         case 'run-in':
-            return 8 /* RUN_IN */;
+            return 8 /* DISPLAY.RUN_IN */;
         case 'flow':
-            return 16 /* FLOW */;
+            return 16 /* DISPLAY.FLOW */;
         case 'flow-root':
-            return 32 /* FLOW_ROOT */;
+            return 32 /* DISPLAY.FLOW_ROOT */;
         case 'table':
-            return 64 /* TABLE */;
+            return 64 /* DISPLAY.TABLE */;
         case 'flex':
         case '-webkit-flex':
-            return 128 /* FLEX */;
+            return 128 /* DISPLAY.FLEX */;
         case 'grid':
         case '-ms-grid':
-            return 256 /* GRID */;
+            return 256 /* DISPLAY.GRID */;
         case 'ruby':
-            return 512 /* RUBY */;
+            return 512 /* DISPLAY.RUBY */;
         case 'subgrid':
-            return 1024 /* SUBGRID */;
+            return 1024 /* DISPLAY.SUBGRID */;
         case 'list-item':
-            return 2048 /* LIST_ITEM */;
+            return 2048 /* DISPLAY.LIST_ITEM */;
         case 'table-row-group':
-            return 4096 /* TABLE_ROW_GROUP */;
+            return 4096 /* DISPLAY.TABLE_ROW_GROUP */;
         case 'table-header-group':
-            return 8192 /* TABLE_HEADER_GROUP */;
+            return 8192 /* DISPLAY.TABLE_HEADER_GROUP */;
         case 'table-footer-group':
-            return 16384 /* TABLE_FOOTER_GROUP */;
+            return 16384 /* DISPLAY.TABLE_FOOTER_GROUP */;
         case 'table-row':
-            return 32768 /* TABLE_ROW */;
+            return 32768 /* DISPLAY.TABLE_ROW */;
         case 'table-cell':
-            return 65536 /* TABLE_CELL */;
+            return 65536 /* DISPLAY.TABLE_CELL */;
         case 'table-column-group':
-            return 131072 /* TABLE_COLUMN_GROUP */;
+            return 131072 /* DISPLAY.TABLE_COLUMN_GROUP */;
         case 'table-column':
-            return 262144 /* TABLE_COLUMN */;
+            return 262144 /* DISPLAY.TABLE_COLUMN */;
         case 'table-caption':
-            return 524288 /* TABLE_CAPTION */;
+            return 524288 /* DISPLAY.TABLE_CAPTION */;
         case 'ruby-base':
-            return 1048576 /* RUBY_BASE */;
+            return 1048576 /* DISPLAY.RUBY_BASE */;
         case 'ruby-text':
-            return 2097152 /* RUBY_TEXT */;
+            return 2097152 /* DISPLAY.RUBY_TEXT */;
         case 'ruby-base-container':
-            return 4194304 /* RUBY_BASE_CONTAINER */;
+            return 4194304 /* DISPLAY.RUBY_BASE_CONTAINER */;
         case 'ruby-text-container':
-            return 8388608 /* RUBY_TEXT_CONTAINER */;
+            return 8388608 /* DISPLAY.RUBY_TEXT_CONTAINER */;
         case 'contents':
-            return 16777216 /* CONTENTS */;
+            return 16777216 /* DISPLAY.CONTENTS */;
         case 'inline-block':
-            return 33554432 /* INLINE_BLOCK */;
+            return 33554432 /* DISPLAY.INLINE_BLOCK */;
         case 'inline-list-item':
-            return 67108864 /* INLINE_LIST_ITEM */;
+            return 67108864 /* DISPLAY.INLINE_LIST_ITEM */;
         case 'inline-table':
-            return 134217728 /* INLINE_TABLE */;
+            return 134217728 /* DISPLAY.INLINE_TABLE */;
         case 'inline-flex':
-            return 268435456 /* INLINE_FLEX */;
+            return 268435456 /* DISPLAY.INLINE_FLEX */;
         case 'inline-grid':
-            return 536870912 /* INLINE_GRID */;
+            return 536870912 /* DISPLAY.INLINE_GRID */;
     }
-    return 0 /* NONE */;
+    return 0 /* DISPLAY.NONE */;
 };
 
 var float = {
     name: 'float',
     initialValue: 'none',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, float) {
         switch (float) {
             case 'left':
-                return 1 /* LEFT */;
+                return 1 /* FLOAT.LEFT */;
             case 'right':
-                return 2 /* RIGHT */;
+                return 2 /* FLOAT.RIGHT */;
             case 'inline-start':
-                return 3 /* INLINE_START */;
+                return 3 /* FLOAT.INLINE_START */;
             case 'inline-end':
-                return 4 /* INLINE_END */;
+                return 4 /* FLOAT.INLINE_END */;
         }
-        return 0 /* NONE */;
+        return 0 /* FLOAT.NONE */;
     }
 };
 
@@ -3303,15 +4139,15 @@ var letterSpacing = {
     name: 'letter-spacing',
     initialValue: '0',
     prefix: false,
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     parse: function (_context, token) {
-        if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'normal') {
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'normal') {
             return 0;
         }
-        if (token.type === 17 /* NUMBER_TOKEN */) {
+        if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
             return token.number;
         }
-        if (token.type === 15 /* DIMENSION_TOKEN */) {
+        if (token.type === 15 /* TokenType.DIMENSION_TOKEN */) {
             return token.number;
         }
         return 0;
@@ -3327,7 +4163,7 @@ var lineBreak = {
     name: 'line-break',
     initialValue: 'normal',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, lineBreak) {
         switch (lineBreak) {
             case 'strict':
@@ -3343,13 +4179,13 @@ var lineHeight = {
     name: 'line-height',
     initialValue: 'normal',
     prefix: false,
-    type: 4 /* TOKEN_VALUE */
+    type: 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */
 };
 var computeLineHeight = function (token, fontSize) {
     if (isIdentToken(token) && token.value === 'normal') {
         return 1.2 * fontSize;
     }
-    else if (token.type === 17 /* NUMBER_TOKEN */) {
+    else if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
         return fontSize * token.number;
     }
     else if (isLengthPercentage(token)) {
@@ -3361,10 +4197,10 @@ var computeLineHeight = function (token, fontSize) {
 var listStyleImage = {
     name: 'list-style-image',
     initialValue: 'none',
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
     parse: function (context, token) {
-        if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'none') {
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
             return null;
         }
         return image.parse(context, token);
@@ -3375,14 +4211,14 @@ var listStylePosition = {
     name: 'list-style-position',
     initialValue: 'outside',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, position) {
         switch (position) {
             case 'inside':
-                return 0 /* INSIDE */;
+                return 0 /* LIST_STYLE_POSITION.INSIDE */;
             case 'outside':
             default:
-                return 1 /* OUTSIDE */;
+                return 1 /* LIST_STYLE_POSITION.OUTSIDE */;
         }
     }
 };
@@ -3391,127 +4227,127 @@ var listStyleType = {
     name: 'list-style-type',
     initialValue: 'none',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, type) {
         switch (type) {
             case 'disc':
-                return 0 /* DISC */;
+                return 0 /* LIST_STYLE_TYPE.DISC */;
             case 'circle':
-                return 1 /* CIRCLE */;
+                return 1 /* LIST_STYLE_TYPE.CIRCLE */;
             case 'square':
-                return 2 /* SQUARE */;
+                return 2 /* LIST_STYLE_TYPE.SQUARE */;
             case 'decimal':
-                return 3 /* DECIMAL */;
+                return 3 /* LIST_STYLE_TYPE.DECIMAL */;
             case 'cjk-decimal':
-                return 4 /* CJK_DECIMAL */;
+                return 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */;
             case 'decimal-leading-zero':
-                return 5 /* DECIMAL_LEADING_ZERO */;
+                return 5 /* LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO */;
             case 'lower-roman':
-                return 6 /* LOWER_ROMAN */;
+                return 6 /* LIST_STYLE_TYPE.LOWER_ROMAN */;
             case 'upper-roman':
-                return 7 /* UPPER_ROMAN */;
+                return 7 /* LIST_STYLE_TYPE.UPPER_ROMAN */;
             case 'lower-greek':
-                return 8 /* LOWER_GREEK */;
+                return 8 /* LIST_STYLE_TYPE.LOWER_GREEK */;
             case 'lower-alpha':
-                return 9 /* LOWER_ALPHA */;
+                return 9 /* LIST_STYLE_TYPE.LOWER_ALPHA */;
             case 'upper-alpha':
-                return 10 /* UPPER_ALPHA */;
+                return 10 /* LIST_STYLE_TYPE.UPPER_ALPHA */;
             case 'arabic-indic':
-                return 11 /* ARABIC_INDIC */;
+                return 11 /* LIST_STYLE_TYPE.ARABIC_INDIC */;
             case 'armenian':
-                return 12 /* ARMENIAN */;
+                return 12 /* LIST_STYLE_TYPE.ARMENIAN */;
             case 'bengali':
-                return 13 /* BENGALI */;
+                return 13 /* LIST_STYLE_TYPE.BENGALI */;
             case 'cambodian':
-                return 14 /* CAMBODIAN */;
+                return 14 /* LIST_STYLE_TYPE.CAMBODIAN */;
             case 'cjk-earthly-branch':
-                return 15 /* CJK_EARTHLY_BRANCH */;
+                return 15 /* LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH */;
             case 'cjk-heavenly-stem':
-                return 16 /* CJK_HEAVENLY_STEM */;
+                return 16 /* LIST_STYLE_TYPE.CJK_HEAVENLY_STEM */;
             case 'cjk-ideographic':
-                return 17 /* CJK_IDEOGRAPHIC */;
+                return 17 /* LIST_STYLE_TYPE.CJK_IDEOGRAPHIC */;
             case 'devanagari':
-                return 18 /* DEVANAGARI */;
+                return 18 /* LIST_STYLE_TYPE.DEVANAGARI */;
             case 'ethiopic-numeric':
-                return 19 /* ETHIOPIC_NUMERIC */;
+                return 19 /* LIST_STYLE_TYPE.ETHIOPIC_NUMERIC */;
             case 'georgian':
-                return 20 /* GEORGIAN */;
+                return 20 /* LIST_STYLE_TYPE.GEORGIAN */;
             case 'gujarati':
-                return 21 /* GUJARATI */;
+                return 21 /* LIST_STYLE_TYPE.GUJARATI */;
             case 'gurmukhi':
-                return 22 /* GURMUKHI */;
+                return 22 /* LIST_STYLE_TYPE.GURMUKHI */;
             case 'hebrew':
-                return 22 /* HEBREW */;
+                return 52 /* LIST_STYLE_TYPE.HEBREW */;
             case 'hiragana':
-                return 23 /* HIRAGANA */;
+                return 23 /* LIST_STYLE_TYPE.HIRAGANA */;
             case 'hiragana-iroha':
-                return 24 /* HIRAGANA_IROHA */;
+                return 24 /* LIST_STYLE_TYPE.HIRAGANA_IROHA */;
             case 'japanese-formal':
-                return 25 /* JAPANESE_FORMAL */;
+                return 25 /* LIST_STYLE_TYPE.JAPANESE_FORMAL */;
             case 'japanese-informal':
-                return 26 /* JAPANESE_INFORMAL */;
+                return 26 /* LIST_STYLE_TYPE.JAPANESE_INFORMAL */;
             case 'kannada':
-                return 27 /* KANNADA */;
+                return 27 /* LIST_STYLE_TYPE.KANNADA */;
             case 'katakana':
-                return 28 /* KATAKANA */;
+                return 28 /* LIST_STYLE_TYPE.KATAKANA */;
             case 'katakana-iroha':
-                return 29 /* KATAKANA_IROHA */;
+                return 29 /* LIST_STYLE_TYPE.KATAKANA_IROHA */;
             case 'khmer':
-                return 30 /* KHMER */;
+                return 30 /* LIST_STYLE_TYPE.KHMER */;
             case 'korean-hangul-formal':
-                return 31 /* KOREAN_HANGUL_FORMAL */;
+                return 31 /* LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL */;
             case 'korean-hanja-formal':
-                return 32 /* KOREAN_HANJA_FORMAL */;
+                return 32 /* LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL */;
             case 'korean-hanja-informal':
-                return 33 /* KOREAN_HANJA_INFORMAL */;
+                return 33 /* LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL */;
             case 'lao':
-                return 34 /* LAO */;
+                return 34 /* LIST_STYLE_TYPE.LAO */;
             case 'lower-armenian':
-                return 35 /* LOWER_ARMENIAN */;
+                return 35 /* LIST_STYLE_TYPE.LOWER_ARMENIAN */;
             case 'malayalam':
-                return 36 /* MALAYALAM */;
+                return 36 /* LIST_STYLE_TYPE.MALAYALAM */;
             case 'mongolian':
-                return 37 /* MONGOLIAN */;
+                return 37 /* LIST_STYLE_TYPE.MONGOLIAN */;
             case 'myanmar':
-                return 38 /* MYANMAR */;
+                return 38 /* LIST_STYLE_TYPE.MYANMAR */;
             case 'oriya':
-                return 39 /* ORIYA */;
+                return 39 /* LIST_STYLE_TYPE.ORIYA */;
             case 'persian':
-                return 40 /* PERSIAN */;
+                return 40 /* LIST_STYLE_TYPE.PERSIAN */;
             case 'simp-chinese-formal':
-                return 41 /* SIMP_CHINESE_FORMAL */;
+                return 41 /* LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL */;
             case 'simp-chinese-informal':
-                return 42 /* SIMP_CHINESE_INFORMAL */;
+                return 42 /* LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL */;
             case 'tamil':
-                return 43 /* TAMIL */;
+                return 43 /* LIST_STYLE_TYPE.TAMIL */;
             case 'telugu':
-                return 44 /* TELUGU */;
+                return 44 /* LIST_STYLE_TYPE.TELUGU */;
             case 'thai':
-                return 45 /* THAI */;
+                return 45 /* LIST_STYLE_TYPE.THAI */;
             case 'tibetan':
-                return 46 /* TIBETAN */;
+                return 46 /* LIST_STYLE_TYPE.TIBETAN */;
             case 'trad-chinese-formal':
-                return 47 /* TRAD_CHINESE_FORMAL */;
+                return 47 /* LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL */;
             case 'trad-chinese-informal':
-                return 48 /* TRAD_CHINESE_INFORMAL */;
+                return 48 /* LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL */;
             case 'upper-armenian':
-                return 49 /* UPPER_ARMENIAN */;
+                return 49 /* LIST_STYLE_TYPE.UPPER_ARMENIAN */;
             case 'disclosure-open':
-                return 50 /* DISCLOSURE_OPEN */;
+                return 50 /* LIST_STYLE_TYPE.DISCLOSURE_OPEN */;
             case 'disclosure-closed':
-                return 51 /* DISCLOSURE_CLOSED */;
+                return 51 /* LIST_STYLE_TYPE.DISCLOSURE_CLOSED */;
             case 'none':
             default:
-                return -1 /* NONE */;
+                return -1 /* LIST_STYLE_TYPE.NONE */;
         }
     }
 };
 
 var marginForSide = function (side) { return ({
-    name: "margin-" + side,
+    name: "margin-".concat(side),
     initialValue: '0',
     prefix: false,
-    type: 4 /* TOKEN_VALUE */
+    type: 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */
 }); };
 var marginTop = marginForSide('top');
 var marginRight = marginForSide('right');
@@ -3522,21 +4358,21 @@ var overflow = {
     name: 'overflow',
     initialValue: 'visible',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return tokens.filter(isIdentToken).map(function (overflow) {
             switch (overflow.value) {
                 case 'hidden':
-                    return 1 /* HIDDEN */;
+                    return 1 /* OVERFLOW.HIDDEN */;
                 case 'scroll':
-                    return 2 /* SCROLL */;
+                    return 2 /* OVERFLOW.SCROLL */;
                 case 'clip':
-                    return 3 /* CLIP */;
+                    return 3 /* OVERFLOW.CLIP */;
                 case 'auto':
-                    return 4 /* AUTO */;
+                    return 4 /* OVERFLOW.AUTO */;
                 case 'visible':
                 default:
-                    return 0 /* VISIBLE */;
+                    return 0 /* OVERFLOW.VISIBLE */;
             }
         });
     }
@@ -3546,23 +4382,23 @@ var overflowWrap = {
     name: 'overflow-wrap',
     initialValue: 'normal',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, overflow) {
         switch (overflow) {
             case 'break-word':
-                return "break-word" /* BREAK_WORD */;
+                return "break-word" /* OVERFLOW_WRAP.BREAK_WORD */;
             case 'normal':
             default:
-                return "normal" /* NORMAL */;
+                return "normal" /* OVERFLOW_WRAP.NORMAL */;
         }
     }
 };
 
 var paddingForSide = function (side) { return ({
-    name: "padding-" + side,
+    name: "padding-".concat(side),
     initialValue: '0',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'length-percentage'
 }); };
 var paddingTop = paddingForSide('top');
@@ -3574,17 +4410,17 @@ var textAlign = {
     name: 'text-align',
     initialValue: 'left',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, textAlign) {
         switch (textAlign) {
             case 'right':
-                return 2 /* RIGHT */;
+                return 2 /* TEXT_ALIGN.RIGHT */;
             case 'center':
             case 'justify':
-                return 1 /* CENTER */;
+                return 1 /* TEXT_ALIGN.CENTER */;
             case 'left':
             default:
-                return 0 /* LEFT */;
+                return 0 /* TEXT_ALIGN.LEFT */;
         }
     }
 };
@@ -3593,26 +4429,26 @@ var position = {
     name: 'position',
     initialValue: 'static',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, position) {
         switch (position) {
             case 'relative':
-                return 1 /* RELATIVE */;
+                return 1 /* POSITION.RELATIVE */;
             case 'absolute':
-                return 2 /* ABSOLUTE */;
+                return 2 /* POSITION.ABSOLUTE */;
             case 'fixed':
-                return 3 /* FIXED */;
+                return 3 /* POSITION.FIXED */;
             case 'sticky':
-                return 4 /* STICKY */;
+                return 4 /* POSITION.STICKY */;
         }
-        return 0 /* STATIC */;
+        return 0 /* POSITION.STATIC */;
     }
 };
 
 var textShadow = {
     name: 'text-shadow',
     initialValue: 'none',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (context, tokens) {
         if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
@@ -3653,17 +4489,17 @@ var textTransform = {
     name: 'text-transform',
     initialValue: 'none',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, textTransform) {
         switch (textTransform) {
             case 'uppercase':
-                return 2 /* UPPERCASE */;
+                return 2 /* TEXT_TRANSFORM.UPPERCASE */;
             case 'lowercase':
-                return 1 /* LOWERCASE */;
+                return 1 /* TEXT_TRANSFORM.LOWERCASE */;
             case 'capitalize':
-                return 3 /* CAPITALIZE */;
+                return 3 /* TEXT_TRANSFORM.CAPITALIZE */;
         }
-        return 0 /* NONE */;
+        return 0 /* TEXT_TRANSFORM.NONE */;
     }
 };
 
@@ -3671,38 +4507,58 @@ var transform$1 = {
     name: 'transform',
     initialValue: 'none',
     prefix: true,
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     parse: function (_context, token) {
-        if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'none') {
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
             return null;
         }
-        if (token.type === 18 /* FUNCTION */) {
+        if (token.type === 18 /* TokenType.FUNCTION */) {
             var transformFunction = SUPPORTED_TRANSFORM_FUNCTIONS[token.name];
             if (typeof transformFunction === 'undefined') {
-                throw new Error("Attempting to parse an unsupported transform function \"" + token.name + "\"");
+                throw new Error("Attempting to parse an unsupported transform function \"".concat(token.name, "\""));
             }
-            return transformFunction(token.values);
+            return transformFunction(_context, token.values);
         }
         return null;
     }
 };
-var matrix = function (args) {
-    var values = args.filter(function (arg) { return arg.type === 17 /* NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
+var matrix = function (_context, args) {
+    var values = args.filter(function (arg) { return arg.type === 17 /* TokenType.NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
     return values.length === 6 ? values : null;
 };
 // doesn't support 3D transforms at the moment
-var matrix3d = function (args) {
-    var values = args.filter(function (arg) { return arg.type === 17 /* NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
+var matrix3d = function (_context, args) {
+    var values = args.filter(function (arg) { return arg.type === 17 /* TokenType.NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
     var a1 = values[0], b1 = values[1]; values[2]; values[3]; var a2 = values[4], b2 = values[5]; values[6]; values[7]; values[8]; values[9]; values[10]; values[11]; var a4 = values[12], b4 = values[13]; values[14]; values[15];
     return values.length === 16 ? [a1, b1, a2, b2, a4, b4] : null;
 };
+var rotate$1 = function (context, args) {
+    if (args.length !== 1) {
+        return null;
+    }
+    var arg = args[0];
+    var radians = 0;
+    if (arg.type === 17 /* TokenType.NUMBER_TOKEN */ && arg.number === 0) {
+        radians = 0;
+    }
+    else if (arg.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+        radians = angle.parse(context, arg);
+    }
+    else {
+        return null;
+    }
+    var cos = Math.cos(radians);
+    var sin = Math.sin(radians);
+    return [cos, sin, -sin, cos, 0, 0];
+};
 var SUPPORTED_TRANSFORM_FUNCTIONS = {
     matrix: matrix,
-    matrix3d: matrix3d
+    matrix3d: matrix3d,
+    rotate: rotate$1
 };
 
 var DEFAULT_VALUE = {
-    type: 16 /* PERCENTAGE_TOKEN */,
+    type: 16 /* TokenType.PERCENTAGE_TOKEN */,
     number: 50,
     flags: FLAG_INTEGER
 };
@@ -3711,7 +4567,7 @@ var transformOrigin = {
     name: 'transform-origin',
     initialValue: '50% 50%',
     prefix: true,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         var origins = tokens.filter(isLengthPercentage);
         if (origins.length !== 2) {
@@ -3721,20 +4577,44 @@ var transformOrigin = {
     }
 };
 
+var rotate = {
+    name: 'rotate',
+    initialValue: 'none',
+    prefix: false,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
+    parse: function (_context, token) {
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
+            return null;
+        }
+        if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+            if (token.number === 0) {
+                return 0;
+            }
+        }
+        if (token.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+            // Parse angle and convert to degrees for storage
+            var radians = angle.parse(_context, token);
+            // Store as degrees for consistency
+            return (radians * 180) / Math.PI;
+        }
+        return null;
+    }
+};
+
 var visibility = {
     name: 'visible',
     initialValue: 'none',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, visibility) {
         switch (visibility) {
             case 'hidden':
-                return 1 /* HIDDEN */;
+                return 1 /* VISIBILITY.HIDDEN */;
             case 'collapse':
-                return 2 /* COLLAPSE */;
+                return 2 /* VISIBILITY.COLLAPSE */;
             case 'visible':
             default:
-                return 0 /* VISIBLE */;
+                return 0 /* VISIBILITY.VISIBLE */;
         }
     }
 };
@@ -3749,7 +4629,7 @@ var wordBreak = {
     name: 'word-break',
     initialValue: 'normal',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, wordBreak) {
         switch (wordBreak) {
             case 'break-all':
@@ -3767,9 +4647,9 @@ var zIndex = {
     name: 'z-index',
     initialValue: 'auto',
     prefix: false,
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     parse: function (_context, token) {
-        if (token.type === 20 /* IDENT_TOKEN */) {
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
             return { auto: true, order: 0 };
         }
         if (isNumberToken(token)) {
@@ -3782,7 +4662,7 @@ var zIndex = {
 var time = {
     name: 'time',
     parse: function (_context, value) {
-        if (value.type === 15 /* DIMENSION_TOKEN */) {
+        if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
             switch (value.unit.toLowerCase()) {
                 case 's':
                     return 1000 * value.number;
@@ -3797,7 +4677,7 @@ var time = {
 var opacity = {
     name: 'opacity',
     initialValue: '1',
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
     parse: function (_context, token) {
         if (isNumberToken(token)) {
@@ -3811,7 +4691,7 @@ var textDecorationColor = {
     name: "text-decoration-color",
     initialValue: 'transparent',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'color'
 };
 
@@ -3819,24 +4699,24 @@ var textDecorationLine = {
     name: 'text-decoration-line',
     initialValue: 'none',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         return tokens
             .filter(isIdentToken)
             .map(function (token) {
             switch (token.value) {
                 case 'underline':
-                    return 1 /* UNDERLINE */;
+                    return 1 /* TEXT_DECORATION_LINE.UNDERLINE */;
                 case 'overline':
-                    return 2 /* OVERLINE */;
+                    return 2 /* TEXT_DECORATION_LINE.OVERLINE */;
                 case 'line-through':
-                    return 3 /* LINE_THROUGH */;
+                    return 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */;
                 case 'none':
-                    return 4 /* BLINK */;
+                    return 4 /* TEXT_DECORATION_LINE.BLINK */;
             }
-            return 0 /* NONE */;
+            return 0 /* TEXT_DECORATION_LINE.NONE */;
         })
-            .filter(function (line) { return line !== 0 /* NONE */; });
+            .filter(function (line) { return line !== 0 /* TEXT_DECORATION_LINE.NONE */; });
     }
 };
 
@@ -3844,20 +4724,20 @@ var fontFamily = {
     name: "font-family",
     initialValue: '',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         var accumulator = [];
         var results = [];
         tokens.forEach(function (token) {
             switch (token.type) {
-                case 20 /* IDENT_TOKEN */:
-                case 0 /* STRING_TOKEN */:
+                case 20 /* TokenType.IDENT_TOKEN */:
+                case 0 /* TokenType.STRING_TOKEN */:
                     accumulator.push(token.value);
                     break;
-                case 17 /* NUMBER_TOKEN */:
+                case 17 /* TokenType.NUMBER_TOKEN */:
                     accumulator.push(token.number.toString());
                     break;
-                case 4 /* COMMA_TOKEN */:
+                case 4 /* TokenType.COMMA_TOKEN */:
                     results.push(accumulator.join(' '));
                     accumulator.length = 0;
                     break;
@@ -3866,7 +4746,7 @@ var fontFamily = {
         if (accumulator.length) {
             results.push(accumulator.join(' '));
         }
-        return results.map(function (result) { return (result.indexOf(' ') === -1 ? result : "'" + result + "'"); });
+        return results.map(function (result) { return (result.indexOf(' ') === -1 ? result : "'".concat(result, "'")); });
     }
 };
 
@@ -3874,14 +4754,14 @@ var fontSize = {
     name: "font-size",
     initialValue: '0',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'length'
 };
 
 var fontWeight = {
     name: 'font-weight',
     initialValue: 'normal',
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
     parse: function (_context, token) {
         if (isNumberToken(token)) {
@@ -3903,7 +4783,7 @@ var fontWeight = {
 var fontVariant = {
     name: 'font-variant',
     initialValue: 'none',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (_context, tokens) {
         return tokens.filter(isIdentToken).map(function (token) { return token.value; });
@@ -3914,16 +4794,16 @@ var fontStyle = {
     name: 'font-style',
     initialValue: 'normal',
     prefix: false,
-    type: 2 /* IDENT_VALUE */,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
     parse: function (_context, overflow) {
         switch (overflow) {
             case 'oblique':
-                return "oblique" /* OBLIQUE */;
+                return "oblique" /* FONT_STYLE.OBLIQUE */;
             case 'italic':
-                return "italic" /* ITALIC */;
+                return "italic" /* FONT_STYLE.ITALIC */;
             case 'normal':
             default:
-                return "normal" /* NORMAL */;
+                return "normal" /* FONT_STYLE.NORMAL */;
         }
     }
 };
@@ -3933,14 +4813,14 @@ var contains = function (bit, value) { return (bit & value) !== 0; };
 var content = {
     name: 'content',
     initialValue: 'none',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (_context, tokens) {
         if (tokens.length === 0) {
             return [];
         }
         var first = tokens[0];
-        if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+        if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
             return [];
         }
         return tokens;
@@ -3951,13 +4831,13 @@ var counterIncrement = {
     name: 'counter-increment',
     initialValue: 'none',
     prefix: true,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         if (tokens.length === 0) {
             return null;
         }
         var first = tokens[0];
-        if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+        if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
             return null;
         }
         var increments = [];
@@ -3965,7 +4845,7 @@ var counterIncrement = {
         for (var i = 0; i < filtered.length; i++) {
             var counter = filtered[i];
             var next = filtered[i + 1];
-            if (counter.type === 20 /* IDENT_TOKEN */) {
+            if (counter.type === 20 /* TokenType.IDENT_TOKEN */) {
                 var increment = next && isNumberToken(next) ? next.number : 1;
                 increments.push({ counter: counter.value, increment: increment });
             }
@@ -3978,7 +4858,7 @@ var counterReset = {
     name: 'counter-reset',
     initialValue: 'none',
     prefix: true,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         if (tokens.length === 0) {
             return [];
@@ -4001,7 +4881,7 @@ var duration = {
     name: 'duration',
     initialValue: '0s',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (context, tokens) {
         return tokens.filter(isDimensionToken).map(function (token) { return time.parse(context, token); });
     }
@@ -4011,13 +4891,13 @@ var quotes = {
     name: 'quotes',
     initialValue: 'none',
     prefix: true,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
         if (tokens.length === 0) {
             return null;
         }
         var first = tokens[0];
-        if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+        if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
             return null;
         }
         var quotes = [];
@@ -4047,7 +4927,7 @@ var getQuote = function (quotes, depth, open) {
 var boxShadow = {
     name: 'box-shadow',
     initialValue: 'none',
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     prefix: false,
     parse: function (context, tokens) {
         if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
@@ -4096,20 +4976,20 @@ var paintOrder = {
     name: 'paint-order',
     initialValue: 'normal',
     prefix: false,
-    type: 1 /* LIST */,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: function (_context, tokens) {
-        var DEFAULT_VALUE = [0 /* FILL */, 1 /* STROKE */, 2 /* MARKERS */];
+        var DEFAULT_VALUE = [0 /* PAINT_ORDER_LAYER.FILL */, 1 /* PAINT_ORDER_LAYER.STROKE */, 2 /* PAINT_ORDER_LAYER.MARKERS */];
         var layers = [];
         tokens.filter(isIdentToken).forEach(function (token) {
             switch (token.value) {
                 case 'stroke':
-                    layers.push(1 /* STROKE */);
+                    layers.push(1 /* PAINT_ORDER_LAYER.STROKE */);
                     break;
                 case 'fill':
-                    layers.push(0 /* FILL */);
+                    layers.push(0 /* PAINT_ORDER_LAYER.FILL */);
                     break;
                 case 'markers':
-                    layers.push(2 /* MARKERS */);
+                    layers.push(2 /* PAINT_ORDER_LAYER.MARKERS */);
                     break;
             }
         });
@@ -4126,14 +5006,14 @@ var webkitTextStrokeColor = {
     name: "-webkit-text-stroke-color",
     initialValue: 'currentcolor',
     prefix: false,
-    type: 3 /* TYPE_VALUE */,
+    type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
     format: 'color'
 };
 
 var webkitTextStrokeWidth = {
     name: "-webkit-text-stroke-width",
     initialValue: '0',
-    type: 0 /* VALUE */,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
     prefix: false,
     parse: function (_context, token) {
         if (isDimensionToken(token)) {
@@ -4143,6 +5023,31 @@ var webkitTextStrokeWidth = {
     }
 };
 
+var objectFit = {
+    name: 'objectFit',
+    initialValue: 'fill',
+    prefix: false,
+    type: 1 /* PropertyDescriptorParsingType.LIST */,
+    parse: function (_context, tokens) {
+        return tokens.filter(isIdentToken).reduce(function (bit, token) {
+            return bit | parseDisplayValue(token.value);
+        }, 0 /* OBJECT_FIT.FILL */);
+    }
+};
+var parseDisplayValue = function (display) {
+    switch (display) {
+        case 'contain':
+            return 2 /* OBJECT_FIT.CONTAIN */;
+        case 'cover':
+            return 4 /* OBJECT_FIT.COVER */;
+        case 'none':
+            return 8 /* OBJECT_FIT.NONE */;
+        case 'scale-down':
+            return 16 /* OBJECT_FIT.SCALE_DOWN */;
+    }
+    return 0 /* OBJECT_FIT.FILL */;
+};
+
 var CSSParsedDeclaration = /** @class */ (function () {
     function CSSParsedDeclaration(context, declaration) {
         var _a, _b;
@@ -4208,37 +5113,39 @@ var CSSParsedDeclaration = /** @class */ (function () {
         this.textTransform = parse(context, textTransform, declaration.textTransform);
         this.transform = parse(context, transform$1, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.rotate = parse(context, rotate, declaration.rotate);
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
         this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
         this.zIndex = parse(context, zIndex, declaration.zIndex);
+        this.objectFit = parse(context, objectFit, declaration.objectFit);
     }
     CSSParsedDeclaration.prototype.isVisible = function () {
-        return this.display > 0 && this.opacity > 0 && this.visibility === 0 /* VISIBLE */;
+        return this.display > 0 && this.opacity > 0 && this.visibility === 0 /* VISIBILITY.VISIBLE */;
     };
     CSSParsedDeclaration.prototype.isTransparent = function () {
         return isTransparent(this.backgroundColor);
     };
     CSSParsedDeclaration.prototype.isTransformed = function () {
-        return this.transform !== null;
+        return this.transform !== null || this.rotate !== null;
     };
     CSSParsedDeclaration.prototype.isPositioned = function () {
-        return this.position !== 0 /* STATIC */;
+        return this.position !== 0 /* POSITION.STATIC */;
     };
     CSSParsedDeclaration.prototype.isPositionedWithZIndex = function () {
         return this.isPositioned() && !this.zIndex.auto;
     };
     CSSParsedDeclaration.prototype.isFloating = function () {
-        return this.float !== 0 /* NONE */;
+        return this.float !== 0 /* FLOAT.NONE */;
     };
     CSSParsedDeclaration.prototype.isInlineLevel = function () {
-        return (contains(this.display, 4 /* INLINE */) ||
-            contains(this.display, 33554432 /* INLINE_BLOCK */) ||
-            contains(this.display, 268435456 /* INLINE_FLEX */) ||
-            contains(this.display, 536870912 /* INLINE_GRID */) ||
-            contains(this.display, 67108864 /* INLINE_LIST_ITEM */) ||
-            contains(this.display, 134217728 /* INLINE_TABLE */));
+        return (contains(this.display, 4 /* DISPLAY.INLINE */) ||
+            contains(this.display, 33554432 /* DISPLAY.INLINE_BLOCK */) ||
+            contains(this.display, 268435456 /* DISPLAY.INLINE_FLEX */) ||
+            contains(this.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
+            contains(this.display, 67108864 /* DISPLAY.INLINE_LIST_ITEM */) ||
+            contains(this.display, 134217728 /* DISPLAY.INLINE_TABLE */));
     };
     return CSSParsedDeclaration;
 }());
@@ -4263,16 +5170,16 @@ var parse = function (context, descriptor, style) {
     tokenizer.write(value);
     var parser = new Parser(tokenizer.read());
     switch (descriptor.type) {
-        case 2 /* IDENT_VALUE */:
+        case 2 /* PropertyDescriptorParsingType.IDENT_VALUE */:
             var token = parser.parseComponentValue();
             return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
-        case 0 /* VALUE */:
+        case 0 /* PropertyDescriptorParsingType.VALUE */:
             return descriptor.parse(context, parser.parseComponentValue());
-        case 1 /* LIST */:
+        case 1 /* PropertyDescriptorParsingType.LIST */:
             return descriptor.parse(context, parser.parseComponentValues());
-        case 4 /* TOKEN_VALUE */:
+        case 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */:
             return parser.parseComponentValue();
-        case 3 /* TYPE_VALUE */:
+        case 3 /* PropertyDescriptorParsingType.TYPE_VALUE */:
             switch (descriptor.format) {
                 case 'angle':
                     return angle.parse(context, parser.parseComponentValue());
@@ -4298,20 +5205,20 @@ var getElementDebugType = function (element) {
     var attribute = element.getAttribute(elementDebuggerAttribute);
     switch (attribute) {
         case 'all':
-            return 1 /* ALL */;
+            return 1 /* DebuggerType.ALL */;
         case 'clone':
-            return 2 /* CLONE */;
+            return 2 /* DebuggerType.CLONE */;
         case 'parse':
-            return 3 /* PARSE */;
+            return 3 /* DebuggerType.PARSE */;
         case 'render':
-            return 4 /* RENDER */;
+            return 4 /* DebuggerType.RENDER */;
         default:
-            return 0 /* NONE */;
+            return 0 /* DebuggerType.NONE */;
     }
 };
 var isDebugging = function (element, type) {
     var elementType = getElementDebugType(element);
-    return elementType === 1 /* ALL */ || type === elementType;
+    return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
 };
 
 var ElementContainer = /** @class */ (function () {
@@ -4320,7 +5227,7 @@ var ElementContainer = /** @class */ (function () {
         this.textNodes = [];
         this.elements = [];
         this.flags = 0;
-        if (isDebugging(element, 3 /* PARSE */)) {
+        if (isDebugging(element, 3 /* DebuggerType.PARSE */)) {
             debugger;
         }
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
@@ -4332,10 +5239,14 @@ var ElementContainer = /** @class */ (function () {
                 // getBoundingClientRect takes transforms into account
                 element.style.transform = 'none';
             }
+            if (this.styles.rotate !== null) {
+                // Handle rotate property similarly to transform
+                element.style.rotate = 'none';
+            }
         }
         this.bounds = parseBounds(this.context, element);
-        if (isDebugging(element, 4 /* RENDER */)) {
-            this.flags |= 16 /* DEBUG_RENDER */;
+        if (isDebugging(element, 4 /* DebuggerType.RENDER */)) {
+            this.flags |= 16 /* FLAGS.DEBUG_RENDER */;
         }
     }
     return ElementContainer;
@@ -4729,7 +5640,7 @@ var testRangeBounds = function (document) {
         var range = document.createRange();
         if (range.getBoundingClientRect) {
             var testElement = document.createElement('boundtest');
-            testElement.style.height = TEST_HEIGHT + "px";
+            testElement.style.height = "".concat(TEST_HEIGHT, "px");
             testElement.style.display = 'block';
             document.body.appendChild(testElement);
             range.selectNode(testElement);
@@ -4819,8 +5730,8 @@ var testForeignObject = function (document) {
         ctx.fillStyle = 'red';
         ctx.fillRect(0, 0, size, size);
         var node = document.createElement('div');
-        node.style.backgroundImage = "url(" + greenImageSrc + ")";
-        node.style.height = size + "px";
+        node.style.backgroundImage = "url(".concat(greenImageSrc, ")");
+        node.style.height = "".concat(size, "px");
         // Firefox 55 does not render inline <img /> tags
         return isGreenPixel(data)
             ? loadSerializedSVG$1(createForeignObjectSVG(size, size, 0, 0, node))
@@ -4853,7 +5764,7 @@ var loadSerializedSVG$1 = function (svg) {
         var img = new Image();
         img.onload = function () { return resolve(img); };
         img.onerror = reject;
-        img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
+        img.src = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(new XMLSerializer().serializeToString(svg)));
     });
 };
 var FEATURES = {
@@ -4997,7 +5908,7 @@ var wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
 var breakWords = function (str, styles) {
     var breaker = LineBreaker(str, {
         lineBreak: styles.lineBreak,
-        wordBreak: styles.overflowWrap === "break-word" /* BREAK_WORD */ ? 'break-word' : styles.wordBreak
+        wordBreak: styles.overflowWrap === "break-word" /* OVERFLOW_WRAP.BREAK_WORD */ ? 'break-word' : styles.wordBreak
     });
     var words = [];
     var bk;
@@ -5038,11 +5949,11 @@ var TextContainer = /** @class */ (function () {
 }());
 var transform = function (text, transform) {
     switch (transform) {
-        case 1 /* LOWERCASE */:
+        case 1 /* TEXT_TRANSFORM.LOWERCASE */:
             return text.toLowerCase();
-        case 3 /* CAPITALIZE */:
+        case 3 /* TEXT_TRANSFORM.CAPITALIZE */:
             return text.replace(CAPITALIZE, capitalize);
-        case 2 /* UPPERCASE */:
+        case 2 /* TEXT_TRANSFORM.UPPERCASE */:
             return text.toUpperCase();
         default:
             return text;
@@ -5087,9 +5998,9 @@ var SVGElementContainer = /** @class */ (function (_super) {
         var _this = _super.call(this, context, img) || this;
         var s = new XMLSerializer();
         var bounds = parseBounds(context, img);
-        img.setAttribute('width', bounds.width + "px");
-        img.setAttribute('height', bounds.height + "px");
-        _this.svg = "data:image/svg+xml," + encodeURIComponent(s.serializeToString(img));
+        img.setAttribute('width', "".concat(bounds.width, "px"));
+        img.setAttribute('height', "".concat(bounds.height, "px"));
+        _this.svg = "data:image/svg+xml,".concat(encodeURIComponent(s.serializeToString(img)));
         _this.intrinsicWidth = img.width.baseVal.value;
         _this.intrinsicHeight = img.height.baseVal.value;
         _this.context.cache.addImage(_this.svg);
@@ -5121,7 +6032,7 @@ var OLElementContainer = /** @class */ (function (_super) {
 
 var CHECKBOX_BORDER_RADIUS = [
     {
-        type: 15 /* DIMENSION_TOKEN */,
+        type: 15 /* TokenType.DIMENSION_TOKEN */,
         flags: 0,
         unit: 'px',
         number: 3
@@ -5129,7 +6040,7 @@ var CHECKBOX_BORDER_RADIUS = [
 ];
 var RADIO_BORDER_RADIUS = [
     {
-        type: 16 /* PERCENTAGE_TOKEN */,
+        type: 16 /* TokenType.PERCENTAGE_TOKEN */,
         flags: 0,
         number: 50
     }
@@ -5174,9 +6085,9 @@ var InputElementContainer = /** @class */ (function (_super) {
                 _this.styles.borderRightStyle =
                     _this.styles.borderBottomStyle =
                         _this.styles.borderLeftStyle =
-                            1 /* SOLID */;
-            _this.styles.backgroundClip = [0 /* BORDER_BOX */];
-            _this.styles.backgroundOrigin = [0 /* BORDER_BOX */];
+                            1 /* BORDER_STYLE.SOLID */;
+            _this.styles.backgroundClip = [0 /* BACKGROUND_CLIP.BORDER_BOX */];
+            _this.styles.backgroundOrigin = [0 /* BACKGROUND_ORIGIN.BORDER_BOX */];
             _this.bounds = reformatInputBounds(_this.bounds);
         }
         switch (_this.type) {
@@ -5258,7 +6169,8 @@ var LIST_OWNERS = ['OL', 'UL', 'MENU'];
 var parseNodeTree = function (context, node, parent, root) {
     for (var childNode = node.firstChild, nextNode = void 0; childNode; childNode = nextNode) {
         nextNode = childNode.nextSibling;
-        if (isTextNode(childNode) && childNode.data.trim().length > 0) {
+        // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
+        if (isTextNode(childNode) && childNode.data.length > 0) {
             parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
         }
         else if (isElementNode(childNode)) {
@@ -5269,13 +6181,13 @@ var parseNodeTree = function (context, node, parent, root) {
                 var container = createContainer(context, childNode);
                 if (container.styles.isVisible()) {
                     if (createsRealStackingContext(childNode, container, root)) {
-                        container.flags |= 4 /* CREATES_REAL_STACKING_CONTEXT */;
+                        container.flags |= 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */;
                     }
                     else if (createsStackingContext(container.styles)) {
-                        container.flags |= 2 /* CREATES_STACKING_CONTEXT */;
+                        container.flags |= 2 /* FLAGS.CREATES_STACKING_CONTEXT */;
                     }
                     if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
-                        container.flags |= 8 /* IS_LIST_OWNER */;
+                        container.flags |= 8 /* FLAGS.IS_LIST_OWNER */;
                     }
                     parent.elements.push(container);
                     childNode.slot;
@@ -5324,7 +6236,7 @@ var createContainer = function (context, element) {
 };
 var parseTree = function (context, element) {
     var container = createContainer(context, element);
-    container.flags |= 4 /* CREATES_REAL_STACKING_CONTEXT */;
+    container.flags |= 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */;
     parseNodeTree(context, element, container, container);
     return container;
 };
@@ -5592,7 +6504,7 @@ var CJK_TEN_HIGH_COEFFICIENTS = 1 << 2;
 var CJK_HUNDRED_COEFFICIENTS = 1 << 3;
 var createCJKCounter = function (value, numbers, multipliers, negativeSign, suffix, flags) {
     if (value < -9999 || value > 9999) {
-        return createCounterText(value, 4 /* CJK_DECIMAL */, suffix.length > 0);
+        return createCounterText(value, 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */, suffix.length > 0);
     }
     var tmp = Math.abs(value);
     var string = suffix;
@@ -5628,101 +6540,101 @@ var createCounterText = function (value, type, appendSuffix) {
     var koreanSuffix = appendSuffix ? ', ' : '';
     var spaceSuffix = appendSuffix ? ' ' : '';
     switch (type) {
-        case 0 /* DISC */:
+        case 0 /* LIST_STYLE_TYPE.DISC */:
             return '•' + spaceSuffix;
-        case 1 /* CIRCLE */:
+        case 1 /* LIST_STYLE_TYPE.CIRCLE */:
             return '◦' + spaceSuffix;
-        case 2 /* SQUARE */:
+        case 2 /* LIST_STYLE_TYPE.SQUARE */:
             return '◾' + spaceSuffix;
-        case 5 /* DECIMAL_LEADING_ZERO */:
+        case 5 /* LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO */:
             var string = createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
-            return string.length < 4 ? "0" + string : string;
-        case 4 /* CJK_DECIMAL */:
+            return string.length < 4 ? "0".concat(string) : string;
+        case 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */:
             return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', cjkSuffix);
-        case 6 /* LOWER_ROMAN */:
-            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* DECIMAL */, defaultSuffix).toLowerCase();
-        case 7 /* UPPER_ROMAN */:
-            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* DECIMAL */, defaultSuffix);
-        case 8 /* LOWER_GREEK */:
+        case 6 /* LIST_STYLE_TYPE.LOWER_ROMAN */:
+            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix).toLowerCase();
+        case 7 /* LIST_STYLE_TYPE.UPPER_ROMAN */:
+            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+        case 8 /* LIST_STYLE_TYPE.LOWER_GREEK */:
             return createCounterStyleFromRange(value, 945, 969, false, defaultSuffix);
-        case 9 /* LOWER_ALPHA */:
+        case 9 /* LIST_STYLE_TYPE.LOWER_ALPHA */:
             return createCounterStyleFromRange(value, 97, 122, false, defaultSuffix);
-        case 10 /* UPPER_ALPHA */:
+        case 10 /* LIST_STYLE_TYPE.UPPER_ALPHA */:
             return createCounterStyleFromRange(value, 65, 90, false, defaultSuffix);
-        case 11 /* ARABIC_INDIC */:
+        case 11 /* LIST_STYLE_TYPE.ARABIC_INDIC */:
             return createCounterStyleFromRange(value, 1632, 1641, true, defaultSuffix);
-        case 12 /* ARMENIAN */:
-        case 49 /* UPPER_ARMENIAN */:
-            return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* DECIMAL */, defaultSuffix);
-        case 35 /* LOWER_ARMENIAN */:
-            return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* DECIMAL */, defaultSuffix).toLowerCase();
-        case 13 /* BENGALI */:
+        case 12 /* LIST_STYLE_TYPE.ARMENIAN */:
+        case 49 /* LIST_STYLE_TYPE.UPPER_ARMENIAN */:
+            return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+        case 35 /* LIST_STYLE_TYPE.LOWER_ARMENIAN */:
+            return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix).toLowerCase();
+        case 13 /* LIST_STYLE_TYPE.BENGALI */:
             return createCounterStyleFromRange(value, 2534, 2543, true, defaultSuffix);
-        case 14 /* CAMBODIAN */:
-        case 30 /* KHMER */:
+        case 14 /* LIST_STYLE_TYPE.CAMBODIAN */:
+        case 30 /* LIST_STYLE_TYPE.KHMER */:
             return createCounterStyleFromRange(value, 6112, 6121, true, defaultSuffix);
-        case 15 /* CJK_EARTHLY_BRANCH */:
+        case 15 /* LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH */:
             return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', cjkSuffix);
-        case 16 /* CJK_HEAVENLY_STEM */:
+        case 16 /* LIST_STYLE_TYPE.CJK_HEAVENLY_STEM */:
             return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', cjkSuffix);
-        case 17 /* CJK_IDEOGRAPHIC */:
-        case 48 /* TRAD_CHINESE_INFORMAL */:
+        case 17 /* LIST_STYLE_TYPE.CJK_IDEOGRAPHIC */:
+        case 48 /* LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL */:
             return createCJKCounter(value, '零一二三四五六七八九', CHINESE_INFORMAL_MULTIPLIERS, '負', cjkSuffix, CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-        case 47 /* TRAD_CHINESE_FORMAL */:
+        case 47 /* LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL */:
             return createCJKCounter(value, '零壹貳參肆伍陸柒捌玖', CHINESE_FORMAL_MULTIPLIERS, '負', cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-        case 42 /* SIMP_CHINESE_INFORMAL */:
+        case 42 /* LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL */:
             return createCJKCounter(value, '零一二三四五六七八九', CHINESE_INFORMAL_MULTIPLIERS, '负', cjkSuffix, CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-        case 41 /* SIMP_CHINESE_FORMAL */:
+        case 41 /* LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL */:
             return createCJKCounter(value, '零壹贰叁肆伍陆柒捌玖', CHINESE_FORMAL_MULTIPLIERS, '负', cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-        case 26 /* JAPANESE_INFORMAL */:
+        case 26 /* LIST_STYLE_TYPE.JAPANESE_INFORMAL */:
             return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, cjkSuffix, 0);
-        case 25 /* JAPANESE_FORMAL */:
+        case 25 /* LIST_STYLE_TYPE.JAPANESE_FORMAL */:
             return createCJKCounter(value, '零壱弐参四伍六七八九', '拾百千万', JAPANESE_NEGATIVE, cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-        case 31 /* KOREAN_HANGUL_FORMAL */:
+        case 31 /* LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL */:
             return createCJKCounter(value, '영일이삼사오육칠팔구', '십백천만', KOREAN_NEGATIVE, koreanSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-        case 33 /* KOREAN_HANJA_INFORMAL */:
+        case 33 /* LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL */:
             return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, koreanSuffix, 0);
-        case 32 /* KOREAN_HANJA_FORMAL */:
+        case 32 /* LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL */:
             return createCJKCounter(value, '零壹貳參四五六七八九', '拾百千', KOREAN_NEGATIVE, koreanSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-        case 18 /* DEVANAGARI */:
+        case 18 /* LIST_STYLE_TYPE.DEVANAGARI */:
             return createCounterStyleFromRange(value, 0x966, 0x96f, true, defaultSuffix);
-        case 20 /* GEORGIAN */:
-            return createAdditiveCounter(value, 1, 19999, GEORGIAN, 3 /* DECIMAL */, defaultSuffix);
-        case 21 /* GUJARATI */:
+        case 20 /* LIST_STYLE_TYPE.GEORGIAN */:
+            return createAdditiveCounter(value, 1, 19999, GEORGIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+        case 21 /* LIST_STYLE_TYPE.GUJARATI */:
             return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
-        case 22 /* GURMUKHI */:
+        case 22 /* LIST_STYLE_TYPE.GURMUKHI */:
             return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
-        case 22 /* HEBREW */:
-            return createAdditiveCounter(value, 1, 10999, HEBREW, 3 /* DECIMAL */, defaultSuffix);
-        case 23 /* HIRAGANA */:
+        case 52 /* LIST_STYLE_TYPE.HEBREW */:
+            return createAdditiveCounter(value, 1, 10999, HEBREW, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+        case 23 /* LIST_STYLE_TYPE.HIRAGANA */:
             return createCounterStyleFromSymbols(value, 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん');
-        case 24 /* HIRAGANA_IROHA */:
+        case 24 /* LIST_STYLE_TYPE.HIRAGANA_IROHA */:
             return createCounterStyleFromSymbols(value, 'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす');
-        case 27 /* KANNADA */:
+        case 27 /* LIST_STYLE_TYPE.KANNADA */:
             return createCounterStyleFromRange(value, 0xce6, 0xcef, true, defaultSuffix);
-        case 28 /* KATAKANA */:
+        case 28 /* LIST_STYLE_TYPE.KATAKANA */:
             return createCounterStyleFromSymbols(value, 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン', cjkSuffix);
-        case 29 /* KATAKANA_IROHA */:
+        case 29 /* LIST_STYLE_TYPE.KATAKANA_IROHA */:
             return createCounterStyleFromSymbols(value, 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス', cjkSuffix);
-        case 34 /* LAO */:
+        case 34 /* LIST_STYLE_TYPE.LAO */:
             return createCounterStyleFromRange(value, 0xed0, 0xed9, true, defaultSuffix);
-        case 37 /* MONGOLIAN */:
+        case 37 /* LIST_STYLE_TYPE.MONGOLIAN */:
             return createCounterStyleFromRange(value, 0x1810, 0x1819, true, defaultSuffix);
-        case 38 /* MYANMAR */:
+        case 38 /* LIST_STYLE_TYPE.MYANMAR */:
             return createCounterStyleFromRange(value, 0x1040, 0x1049, true, defaultSuffix);
-        case 39 /* ORIYA */:
+        case 39 /* LIST_STYLE_TYPE.ORIYA */:
             return createCounterStyleFromRange(value, 0xb66, 0xb6f, true, defaultSuffix);
-        case 40 /* PERSIAN */:
+        case 40 /* LIST_STYLE_TYPE.PERSIAN */:
             return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true, defaultSuffix);
-        case 43 /* TAMIL */:
+        case 43 /* LIST_STYLE_TYPE.TAMIL */:
             return createCounterStyleFromRange(value, 0xbe6, 0xbef, true, defaultSuffix);
-        case 44 /* TELUGU */:
+        case 44 /* LIST_STYLE_TYPE.TELUGU */:
             return createCounterStyleFromRange(value, 0xc66, 0xc6f, true, defaultSuffix);
-        case 45 /* THAI */:
+        case 45 /* LIST_STYLE_TYPE.THAI */:
             return createCounterStyleFromRange(value, 0xe50, 0xe59, true, defaultSuffix);
-        case 46 /* TIBETAN */:
+        case 46 /* LIST_STYLE_TYPE.TIBETAN */:
             return createCounterStyleFromRange(value, 0xf20, 0xf29, true, defaultSuffix);
-        case 3 /* DECIMAL */:
+        case 3 /* LIST_STYLE_TYPE.DECIMAL */:
         default:
             return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
     }
@@ -5772,7 +6684,7 @@ var DocumentCloner = /** @class */ (function () {
                         onclone = this.options.onclone;
                         referenceElement = this.clonedReferenceElement;
                         if (typeof referenceElement === 'undefined') {
-                            return [2 /*return*/, Promise.reject("Error finding the " + this.referenceElement.nodeName + " in the cloned document")];
+                            return [2 /*return*/, Promise.reject("Error finding the ".concat(this.referenceElement.nodeName, " in the cloned document"))];
                         }
                         if (!(documentClone.fonts && documentClone.fonts.ready)) return [3 /*break*/, 2];
                         return [4 /*yield*/, documentClone.fonts.ready];
@@ -5795,16 +6707,33 @@ var DocumentCloner = /** @class */ (function () {
                 }
             });
         }); });
+        /**
+         * The baseURI of the document will be lost after documentClone.open().
+         * We save it before open() to preserve the original base URI for resource resolution.
+         * */
+        var baseUri = documentClone.baseURI;
         documentClone.open();
-        documentClone.write(serializeDoctype(document.doctype) + "<html></html>");
+        documentClone.write("".concat(serializeDoctype(document.doctype), "<html></html>"));
         // Chrome scrolls the parent document for some reason after the write to the cloned window???
         restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
-        documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement);
+        /**
+         * Note: adoptNode() should be called AFTER documentClone.open() and close()
+         *
+         * In Chrome, calling adoptNode() before or during open/write may cause
+         * styles with uppercase characters in class names (e.g. ".MyClass") to not apply correctly.
+         *
+         * Fix:
+         *   - Make sure adoptNode() is called after documentClone.open() and close()
+         *   - This allows Chrome to properly match and apply all CSS rules including mixed-case class selectors.
+         * */
+        var adoptedNode = documentClone.adoptNode(this.documentElement);
+        addBase(adoptedNode, baseUri);
+        documentClone.replaceChild(adoptedNode, documentClone.documentElement);
         documentClone.close();
         return iframeLoad;
     };
     DocumentCloner.prototype.createElementClone = function (node) {
-        if (isDebugging(node, 2 /* CLONE */)) {
+        if (isDebugging(node, 2 /* DebuggerType.CLONE */)) {
             debugger;
         }
         if (isCanvasElement(node)) {
@@ -5877,7 +6806,7 @@ var DocumentCloner = /** @class */ (function () {
             clonedCanvas.width = canvas.width;
             clonedCanvas.height = canvas.height;
             var ctx = canvas.getContext('2d');
-            var clonedCtx = clonedCanvas.getContext('2d');
+            var clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true });
             if (clonedCtx) {
                 if (!this.options.allowTaint && ctx) {
                     clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
@@ -6012,16 +6941,16 @@ var DocumentCloner = /** @class */ (function () {
         var anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
         copyCSSStyles(style, anonymousReplacedElement);
         declaration.content.forEach(function (token) {
-            if (token.type === 0 /* STRING_TOKEN */) {
+            if (token.type === 0 /* TokenType.STRING_TOKEN */) {
                 anonymousReplacedElement.appendChild(document.createTextNode(token.value));
             }
-            else if (token.type === 22 /* URL_TOKEN */) {
+            else if (token.type === 22 /* TokenType.URL_TOKEN */) {
                 var img = document.createElement('img');
                 img.src = token.value;
                 img.style.opacity = '1';
                 anonymousReplacedElement.appendChild(img);
             }
-            else if (token.type === 18 /* FUNCTION */) {
+            else if (token.type === 18 /* TokenType.FUNCTION */) {
                 if (token.name === 'attr') {
                     var attr = token.values.filter(isIdentToken);
                     if (attr.length) {
@@ -6034,7 +6963,7 @@ var DocumentCloner = /** @class */ (function () {
                         var counterState = _this.counters.getCounterValue(counter.value);
                         var counterType = counterStyle && isIdentToken(counterStyle)
                             ? listStyleType.parse(_this.context, counterStyle.value)
-                            : 3 /* DECIMAL */;
+                            : 3 /* LIST_STYLE_TYPE.DECIMAL */;
                         anonymousReplacedElement.appendChild(document.createTextNode(createCounterText(counterState, counterType, false)));
                     }
                 }
@@ -6044,8 +6973,8 @@ var DocumentCloner = /** @class */ (function () {
                         var counterStates = _this.counters.getCounterValues(counter.value);
                         var counterType_1 = counterStyle && isIdentToken(counterStyle)
                             ? listStyleType.parse(_this.context, counterStyle.value)
-                            : 3 /* DECIMAL */;
-                        var separator = delim && delim.type === 0 /* STRING_TOKEN */ ? delim.value : '';
+                            : 3 /* LIST_STYLE_TYPE.DECIMAL */;
+                        var separator = delim && delim.type === 0 /* TokenType.STRING_TOKEN */ ? delim.value : '';
                         var text = counterStates
                             .map(function (value) { return createCounterText(value, counterType_1, false); })
                             .join(separator);
@@ -6054,7 +6983,7 @@ var DocumentCloner = /** @class */ (function () {
                 }
                 else ;
             }
-            else if (token.type === 20 /* IDENT_TOKEN */) {
+            else if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
                 switch (token.value) {
                     case 'open-quote':
                         anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, _this.quoteDepth++, true)));
@@ -6068,10 +6997,10 @@ var DocumentCloner = /** @class */ (function () {
                 }
             }
         });
-        anonymousReplacedElement.className = PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
+        anonymousReplacedElement.className = "".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE, " ").concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER);
         var newClassName = pseudoElt === PseudoElementType.BEFORE
-            ? " " + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE
-            : " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
+            ? " ".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE)
+            : " ".concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER);
         if (isSVGElementNode(clone)) {
             clone.className.baseValue += newClassName;
         }
@@ -6145,8 +7074,8 @@ var iframeLoader = function (iframe) {
     });
 };
 var ignoredStyleProperties = [
-    'all',
-    'd',
+    'all', // #2476
+    'd', // #2483
     'content' // Safari shows pseudoelements if content is set
 ];
 var copyCSSStyles = function (style, target) {
@@ -6170,10 +7099,10 @@ var serializeDoctype = function (doctype) {
             str += doctype.internalSubset;
         }
         if (doctype.publicId) {
-            str += "\"" + doctype.publicId + "\"";
+            str += "\"".concat(doctype.publicId, "\"");
         }
         if (doctype.systemId) {
-            str += "\"" + doctype.systemId + "\"";
+            str += "\"".concat(doctype.systemId, "\"");
         }
         str += '>';
     }
@@ -6197,7 +7126,7 @@ var PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before';
 var PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
 var PSEUDO_HIDE_ELEMENT_STYLE = "{\n    content: \"\" !important;\n    display: none !important;\n}";
 var createPseudoHideStyles = function (body) {
-    createStyles(body, "." + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + PSEUDO_BEFORE + PSEUDO_HIDE_ELEMENT_STYLE + "\n         ." + PSEUDO_HIDE_ELEMENT_CLASS_AFTER + PSEUDO_AFTER + PSEUDO_HIDE_ELEMENT_STYLE);
+    createStyles(body, ".".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE).concat(PSEUDO_BEFORE).concat(PSEUDO_HIDE_ELEMENT_STYLE, "\n         .").concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER).concat(PSEUDO_AFTER).concat(PSEUDO_HIDE_ELEMENT_STYLE));
 };
 var createStyles = function (body, styles) {
     var document = body.ownerDocument;
@@ -6207,6 +7136,13 @@ var createStyles = function (body, styles) {
         body.appendChild(style);
     }
 };
+var addBase = function (targetELement, baseUri) {
+    var _a;
+    var baseNode = targetELement.ownerDocument.createElement('base');
+    baseNode.href = baseUri;
+    var headEle = targetELement.getElementsByTagName('head').item(0);
+    headEle === null || headEle === void 0 ? void 0 : headEle.insertBefore(baseNode, (_a = headEle === null || headEle === void 0 ? void 0 : headEle.firstChild) !== null && _a !== void 0 ? _a : null);
+};
 
 var CacheStorage = /** @class */ (function () {
     function CacheStorage() {
@@ -6256,12 +7192,21 @@ var Cache = /** @class */ (function () {
     };
     Cache.prototype.loadImage = function (key) {
         return __awaiter(this, void 0, void 0, function () {
-            var isSameOrigin, useCORS, useProxy, src;
+            var isSameOrigin, _a, useCORS, useProxy, src;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        isSameOrigin = CacheStorage.isSameOrigin(key);
+                        if (!(typeof this._options.customIsSameOrigin === 'function')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this._options.customIsSameOrigin(key, CacheStorage.isSameOrigin)];
+                    case 1:
+                        _a = _b.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _a = CacheStorage.isSameOrigin(key);
+                        _b.label = 3;
+                    case 3:
+                        isSameOrigin = _a;
                         useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
                         useProxy = !isInlineImage(key) &&
                             !isSameOrigin &&
@@ -6278,13 +7223,13 @@ var Cache = /** @class */ (function () {
                             return [2 /*return*/];
                         }
                         src = key;
-                        if (!useProxy) return [3 /*break*/, 2];
+                        if (!useProxy) return [3 /*break*/, 5];
                         return [4 /*yield*/, this.proxy(src)];
-                    case 1:
-                        src = _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        this.context.logger.debug("Added image " + key.substring(0, 256));
+                    case 4:
+                        src = _b.sent();
+                        _b.label = 5;
+                    case 5:
+                        this.context.logger.debug("Added image ".concat(key.substring(0, 256)));
                         return [4 /*yield*/, new Promise(function (resolve, reject) {
                                 var img = new Image();
                                 img.onload = function () { return resolve(img); };
@@ -6299,10 +7244,10 @@ var Cache = /** @class */ (function () {
                                     setTimeout(function () { return resolve(img); }, 500);
                                 }
                                 if (_this._options.imageTimeout > 0) {
-                                    setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout);
+                                    setTimeout(function () { return reject("Timed out (".concat(_this._options.imageTimeout, "ms) loading image")); }, _this._options.imageTimeout);
                                 }
                             })];
-                    case 3: return [2 /*return*/, _a.sent()];
+                    case 6: return [2 /*return*/, _b.sent()];
                 }
             });
         });
@@ -6336,19 +7281,19 @@ var Cache = /** @class */ (function () {
                     }
                 }
                 else {
-                    reject("Failed to proxy resource " + key + " with status code " + xhr.status);
+                    reject("Failed to proxy resource ".concat(key, " with status code ").concat(xhr.status));
                 }
             };
             xhr.onerror = reject;
             var queryString = proxy.indexOf('?') > -1 ? '&' : '?';
-            xhr.open('GET', "" + proxy + queryString + "url=" + encodeURIComponent(src) + "&responseType=" + responseType);
+            xhr.open('GET', "".concat(proxy).concat(queryString, "url=").concat(encodeURIComponent(src), "&responseType=").concat(responseType));
             if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
                 xhr.responseType = responseType;
             }
             if (_this._options.imageTimeout) {
                 var timeout_1 = _this._options.imageTimeout;
                 xhr.timeout = timeout_1;
-                xhr.ontimeout = function () { return reject("Timed out (" + timeout_1 + "ms) proxying " + key); };
+                xhr.ontimeout = function () { return reject("Timed out (".concat(timeout_1, "ms) proxying ").concat(key)); };
             }
             xhr.send();
         });
@@ -6366,7 +7311,7 @@ var isSVG = function (src) { return src.substr(-3).toLowerCase() === 'svg' || IN
 
 var Vector = /** @class */ (function () {
     function Vector(x, y) {
-        this.type = 0 /* VECTOR */;
+        this.type = 0 /* PathType.VECTOR */;
         this.x = x;
         this.y = y;
     }
@@ -6381,7 +7326,7 @@ var lerp = function (a, b, t) {
 };
 var BezierCurve = /** @class */ (function () {
     function BezierCurve(start, startControl, endControl, end) {
-        this.type = 1 /* BEZIER_CURVE */;
+        this.type = 1 /* PathType.BEZIER_CURVE */;
         this.start = start;
         this.startControl = startControl;
         this.endControl = endControl;
@@ -6404,7 +7349,7 @@ var BezierCurve = /** @class */ (function () {
     };
     return BezierCurve;
 }());
-var isBezierCurve = function (path) { return path.type === 1 /* BEZIER_CURVE */; };
+var isBezierCurve = function (path) { return path.type === 1 /* PathType.BEZIER_CURVE */; };
 
 var BoundCurves = /** @class */ (function () {
     function BoundCurves(element) {
@@ -6591,8 +7536,8 @@ var TransformEffect = /** @class */ (function () {
         this.offsetX = offsetX;
         this.offsetY = offsetY;
         this.matrix = matrix;
-        this.type = 0 /* TRANSFORM */;
-        this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
+        this.type = 0 /* EffectType.TRANSFORM */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
     }
     return TransformEffect;
 }());
@@ -6600,23 +7545,23 @@ var ClipEffect = /** @class */ (function () {
     function ClipEffect(path, target) {
         this.path = path;
         this.target = target;
-        this.type = 1 /* CLIP */;
+        this.type = 1 /* EffectType.CLIP */;
     }
     return ClipEffect;
 }());
 var OpacityEffect = /** @class */ (function () {
     function OpacityEffect(opacity) {
         this.opacity = opacity;
-        this.type = 2 /* OPACITY */;
-        this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
+        this.type = 2 /* EffectType.OPACITY */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
     }
     return OpacityEffect;
 }());
 var isTransformEffect = function (effect) {
-    return effect.type === 0 /* TRANSFORM */;
+    return effect.type === 0 /* EffectType.TRANSFORM */;
 };
-var isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; };
-var isOpacityEffect = function (effect) { return effect.type === 2 /* OPACITY */; };
+var isClipEffect = function (effect) { return effect.type === 1 /* EffectType.CLIP */; };
+var isOpacityEffect = function (effect) { return effect.type === 2 /* EffectType.OPACITY */; };
 
 var equalPath = function (a, b) {
     if (a.length === b.length) {
@@ -6662,40 +7607,51 @@ var ElementPaint = /** @class */ (function () {
         if (this.container.styles.opacity < 1) {
             this.effects.push(new OpacityEffect(this.container.styles.opacity));
         }
+        if (this.container.styles.rotate !== null) {
+            var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
+            var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+            // Apply rotate property if present
+            var angle = this.container.styles.rotate;
+            var rad = (angle * Math.PI) / 180;
+            var cos = Math.cos(rad);
+            var sin = Math.sin(rad);
+            var rotateMatrix = [cos, sin, -sin, cos, 0, 0];
+            this.effects.push(new TransformEffect(offsetX, offsetY, rotateMatrix));
+        }
         if (this.container.styles.transform !== null) {
             var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
             var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
             var matrix = this.container.styles.transform;
             this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
         }
-        if (this.container.styles.overflowX !== 0 /* VISIBLE */) {
+        if (this.container.styles.overflowX !== 0 /* OVERFLOW.VISIBLE */) {
             var borderBox = calculateBorderBoxPath(this.curves);
             var paddingBox = calculatePaddingBoxPath(this.curves);
             if (equalPath(borderBox, paddingBox)) {
-                this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
+                this.effects.push(new ClipEffect(borderBox, 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */));
             }
             else {
-                this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */));
-                this.effects.push(new ClipEffect(paddingBox, 4 /* CONTENT */));
+                this.effects.push(new ClipEffect(borderBox, 2 /* EffectTarget.BACKGROUND_BORDERS */));
+                this.effects.push(new ClipEffect(paddingBox, 4 /* EffectTarget.CONTENT */));
             }
         }
     }
     ElementPaint.prototype.getEffects = function (target) {
-        var inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(this.container.styles.position) === -1;
+        var inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(this.container.styles.position) === -1;
         var parent = this.parent;
         var effects = this.effects.slice(0);
         while (parent) {
             var croplessEffects = parent.effects.filter(function (effect) { return !isClipEffect(effect); });
-            if (inFlow || parent.container.styles.position !== 0 /* STATIC */ || !parent.parent) {
-                effects.unshift.apply(effects, croplessEffects);
-                inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(parent.container.styles.position) === -1;
-                if (parent.container.styles.overflowX !== 0 /* VISIBLE */) {
+            if (inFlow || parent.container.styles.position !== 0 /* POSITION.STATIC */ || !parent.parent) {
+                inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(parent.container.styles.position) === -1;
+                if (parent.container.styles.overflowX !== 0 /* OVERFLOW.VISIBLE */) {
                     var borderBox = calculateBorderBoxPath(parent.curves);
                     var paddingBox = calculatePaddingBoxPath(parent.curves);
                     if (!equalPath(borderBox, paddingBox)) {
-                        effects.unshift(new ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
+                        effects.unshift(new ClipEffect(paddingBox, 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */));
                     }
                 }
+                effects.unshift.apply(effects, croplessEffects);
             }
             else {
                 effects.unshift.apply(effects, croplessEffects);
@@ -6708,13 +7664,13 @@ var ElementPaint = /** @class */ (function () {
 }());
 var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) {
     parent.container.elements.forEach(function (child) {
-        var treatAsRealStackingContext = contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */);
-        var createsStackingContext = contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */);
+        var treatAsRealStackingContext = contains(child.flags, 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */);
+        var createsStackingContext = contains(child.flags, 2 /* FLAGS.CREATES_STACKING_CONTEXT */);
         var paintContainer = new ElementPaint(child, parent);
-        if (contains(child.styles.display, 2048 /* LIST_ITEM */)) {
+        if (contains(child.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
             listItems.push(paintContainer);
         }
-        var listOwnerItems = contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems;
+        var listOwnerItems = contains(child.flags, 8 /* FLAGS.IS_LIST_OWNER */) ? [] : listItems;
         if (treatAsRealStackingContext || createsStackingContext) {
             var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
             var stack = new StackingContext(paintContainer);
@@ -6771,7 +7727,7 @@ var parseStackTree = function (parent, stackingContext, realStackingContext, lis
             }
             parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
         }
-        if (contains(child.flags, 8 /* IS_LIST_OWNER */)) {
+        if (contains(child.flags, 8 /* FLAGS.IS_LIST_OWNER */)) {
             processListItems(child, listOwnerItems);
         }
     });
@@ -6912,19 +7868,19 @@ var contentBox = function (element) {
 };
 
 var calculateBackgroundPositioningArea = function (backgroundOrigin, element) {
-    if (backgroundOrigin === 0 /* BORDER_BOX */) {
+    if (backgroundOrigin === 0 /* BACKGROUND_ORIGIN.BORDER_BOX */) {
         return element.bounds;
     }
-    if (backgroundOrigin === 2 /* CONTENT_BOX */) {
+    if (backgroundOrigin === 2 /* BACKGROUND_ORIGIN.CONTENT_BOX */) {
         return contentBox(element);
     }
     return paddingBox(element);
 };
 var calculateBackgroundPaintingArea = function (backgroundClip, element) {
-    if (backgroundClip === 0 /* BORDER_BOX */) {
+    if (backgroundClip === 0 /* BACKGROUND_CLIP.BORDER_BOX */) {
         return element.bounds;
     }
-    if (backgroundClip === 2 /* CONTENT_BOX */) {
+    if (backgroundClip === 2 /* BACKGROUND_CLIP.CONTENT_BOX */) {
         return contentBox(element);
     }
     return paddingBox(element);
@@ -6938,6 +7894,8 @@ var calculateBackgroundRendering = function (container, index, intrinsicSize) {
     var path = calculateBackgroundRepeatPath(getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea);
     var offsetX = Math.round(backgroundPositioningArea.left + position[0]);
     var offsetY = Math.round(backgroundPositioningArea.top + position[1]);
+    sizeWidth = Math.max(1, sizeWidth);
+    sizeHeight = Math.max(1, sizeHeight);
     return [path, offsetX, offsetY, sizeWidth, sizeHeight];
 };
 var isAuto = function (token) { return isIdentToken(token) && token.value === BACKGROUND_SIZE.AUTO; };
@@ -7052,21 +8010,21 @@ var calculateBackgroundRepeatPath = function (repeat, _a, _b, backgroundPosition
     var x = _a[0], y = _a[1];
     var width = _b[0], height = _b[1];
     switch (repeat) {
-        case 2 /* REPEAT_X */:
+        case 2 /* BACKGROUND_REPEAT.REPEAT_X */:
             return [
                 new Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
                 new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)),
                 new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)),
                 new Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y))
             ];
-        case 3 /* REPEAT_Y */:
+        case 3 /* BACKGROUND_REPEAT.REPEAT_Y */:
             return [
                 new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
                 new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)),
                 new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)),
                 new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top))
             ];
-        case 1 /* NO_REPEAT */:
+        case 1 /* BACKGROUND_REPEAT.NO_REPEAT */:
             return [
                 new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)),
                 new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)),
@@ -7126,7 +8084,7 @@ var FontMetrics = /** @class */ (function () {
         return { baseline: baseline, middle: middle };
     };
     FontMetrics.prototype.getMetrics = function (fontFamily, fontSize) {
-        var key = fontFamily + " " + fontSize;
+        var key = "".concat(fontFamily, " ").concat(fontSize);
         if (typeof this._data[key] === 'undefined') {
             this._data[key] = this.parseMetrics(fontFamily, fontSize);
         }
@@ -7154,15 +8112,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
         if (!options.canvas) {
             _this.canvas.width = Math.floor(options.width * options.scale);
             _this.canvas.height = Math.floor(options.height * options.scale);
-            _this.canvas.style.width = options.width + "px";
-            _this.canvas.style.height = options.height + "px";
+            _this.canvas.style.width = "".concat(options.width, "px");
+            _this.canvas.style.height = "".concat(options.height, "px");
         }
         _this.fontMetrics = new FontMetrics(document);
         _this.ctx.scale(_this.options.scale, _this.options.scale);
         _this.ctx.translate(-options.x, -options.y);
         _this.ctx.textBaseline = 'bottom';
         _this._activeEffects = [];
-        _this.context.logger.debug("Canvas renderer initialized (" + options.width + "x" + options.height + ") with scale " + options.scale);
+        _this.context.logger.debug("Canvas renderer initialized (".concat(options.width, "x").concat(options.height, ") with scale ").concat(options.scale));
         return _this;
     }
     CanvasRenderer.prototype.applyEffects = function (effects) {
@@ -7214,7 +8172,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (contains(paint.container.flags, 16 /* DEBUG_RENDER */)) {
+                        if (contains(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
                             debugger;
                         }
                         if (!paint.container.styles.isVisible()) return [3 /*break*/, 3];
@@ -7233,7 +8191,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
     CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
         var _this = this;
         if (letterSpacing === 0) {
-            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+            // Fixed an issue with characters moving up in non-Firefox.
+            // https://github.com/niklasvh/html2canvas/issues/2107#issuecomment-692462900
+            if (navigator.userAgent.indexOf('Firefox') === -1) {
+                this.ctx.textBaseline = 'ideographic';
+                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+            }
+            else {
+                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+            }
         }
         else {
             var letters = segmentGraphemes(text.text);
@@ -7249,8 +8215,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
             .join('');
         var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
         var fontSize = isDimensionToken(styles.fontSize)
-            ? "" + styles.fontSize.number + styles.fontSize.unit
-            : styles.fontSize.number + "px";
+            ? "".concat(styles.fontSize.number).concat(styles.fontSize.unit)
+            : "".concat(styles.fontSize.number, "px");
         return [
             [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
             fontFamily,
@@ -7259,22 +8225,21 @@ var CanvasRenderer = /** @class */ (function (_super) {
     };
     CanvasRenderer.prototype.renderTextNode = function (text, styles) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder;
+            var font, paintOrder;
             var _this = this;
-            return __generator(this, function (_c) {
-                _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
+            return __generator(this, function (_a) {
+                font = this.createFontStyle(styles)[0];
                 this.ctx.font = font;
-                this.ctx.direction = styles.direction === 1 /* RTL */ ? 'rtl' : 'ltr';
+                this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
                 this.ctx.textAlign = 'left';
                 this.ctx.textBaseline = 'alphabetic';
-                _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
                 paintOrder = styles.paintOrder;
                 text.textBounds.forEach(function (text) {
                     paintOrder.forEach(function (paintOrderLayer) {
                         switch (paintOrderLayer) {
-                            case 0 /* FILL */:
+                            case 0 /* PAINT_ORDER_LAYER.FILL */:
                                 _this.ctx.fillStyle = asString(styles.color);
-                                _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                _this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
                                 var textShadows = styles.textShadow;
                                 if (textShadows.length && text.text.trim().length) {
                                     textShadows
@@ -7285,7 +8250,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                         _this.ctx.shadowOffsetX = textShadow.offsetX.number * _this.options.scale;
                                         _this.ctx.shadowOffsetY = textShadow.offsetY.number * _this.options.scale;
                                         _this.ctx.shadowBlur = textShadow.blur.number;
-                                        _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                        _this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
                                     });
                                     _this.ctx.shadowColor = '';
                                     _this.ctx.shadowOffsetX = 0;
@@ -7294,32 +8259,30 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                 }
                                 if (styles.textDecorationLine.length) {
                                     _this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                                    var decorationLineHeight_1 = 1;
                                     styles.textDecorationLine.forEach(function (textDecorationLine) {
+                                        // Fix the issue where textDecorationLine exhibits x-axis positioning errors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.
                                         switch (textDecorationLine) {
-                                            case 1 /* UNDERLINE */:
-                                                // Draws a line at the baseline of the font
-                                                // TODO As some browsers display the line as more than 1px if the font-size is big,
-                                                // need to take that into account both in position and size
-                                                _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1);
+                                            case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top + text.bounds.height - decorationLineHeight_1, text.bounds.width, decorationLineHeight_1);
                                                 break;
-                                            case 2 /* OVERLINE */:
-                                                _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
+                                            case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top, text.bounds.width, decorationLineHeight_1);
                                                 break;
-                                            case 3 /* LINE_THROUGH */:
-                                                // TODO try and find exact position for line-through
-                                                _this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1);
+                                            case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
+                                                _this.ctx.fillRect(text.bounds.left, text.bounds.top + (text.bounds.height / 2 - decorationLineHeight_1 / 2), text.bounds.width, decorationLineHeight_1);
                                                 break;
                                         }
                                     });
                                 }
                                 break;
-                            case 1 /* STROKE */:
+                            case 1 /* PAINT_ORDER_LAYER.STROKE */:
                                 if (styles.webkitTextStrokeWidth && text.text.trim().length) {
                                     _this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
                                     _this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                                    _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+                                    _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
                                 }
                                 _this.ctx.strokeStyle = '';
                                 _this.ctx.lineWidth = 0;
@@ -7333,23 +8296,99 @@ var CanvasRenderer = /** @class */ (function (_super) {
         });
     };
     CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
-        if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
+        var intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
+        var intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
+        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
             var box = contentBox(container);
             var path = calculatePaddingBoxPath(curves);
             this.path(path);
             this.ctx.save();
             this.ctx.clip();
-            this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
+            var sx = 0, sy = 0, sw = intrinsicWidth, sh = intrinsicHeight, dx = box.left, dy = box.top, dw = box.width, dh = box.height;
+            var objectFit = container.styles.objectFit;
+            var boxRatio = dw / dh;
+            var imgRatio = sw / sh;
+            if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
+                if (imgRatio > boxRatio) {
+                    dh = dw / imgRatio;
+                    dy += (box.height - dh) / 2;
+                }
+                else {
+                    dw = dh * imgRatio;
+                    dx += (box.width - dw) / 2;
+                }
+            }
+            else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
+                if (imgRatio > boxRatio) {
+                    sw = sh * boxRatio;
+                    sx += (intrinsicWidth - sw) / 2;
+                }
+                else {
+                    sh = sw / boxRatio;
+                    sy += (intrinsicHeight - sh) / 2;
+                }
+            }
+            else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
+                if (sw > dw) {
+                    sx += (sw - dw) / 2;
+                    sw = dw;
+                }
+                else {
+                    dx += (dw - sw) / 2;
+                    dw = sw;
+                }
+                if (sh > dh) {
+                    sy += (sh - dh) / 2;
+                    sh = dh;
+                }
+                else {
+                    dy += (dh - sh) / 2;
+                    dh = sh;
+                }
+            }
+            else if (objectFit === 16 /* OBJECT_FIT.SCALE_DOWN */) {
+                var containW = imgRatio > boxRatio ? dw : dh * imgRatio;
+                var noneW = sw > dw ? sw : dw;
+                if (containW < noneW) {
+                    if (imgRatio > boxRatio) {
+                        dh = dw / imgRatio;
+                        dy += (box.height - dh) / 2;
+                    }
+                    else {
+                        dw = dh * imgRatio;
+                        dx += (box.width - dw) / 2;
+                    }
+                }
+                else {
+                    if (sw > dw) {
+                        sx += (sw - dw) / 2;
+                        sw = dw;
+                    }
+                    else {
+                        dx += (dw - sw) / 2;
+                        dw = sw;
+                    }
+                    if (sh > dh) {
+                        sy += (sh - dh) / 2;
+                        sh = dh;
+                    }
+                    else {
+                        dy += (dh - sh) / 2;
+                        dh = sh;
+                    }
+                }
+            }
+            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
             this.ctx.restore();
         }
     };
     CanvasRenderer.prototype.renderNodeContent = function (paint) {
         return __awaiter(this, void 0, void 0, function () {
-            var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds;
+            var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, font, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, font, bounds;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        this.applyEffects(paint.getEffects(4 /* CONTENT */));
+                        this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
                         container = paint.container;
                         curves = paint.curves;
                         styles = container.styles;
@@ -7377,7 +8416,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [3 /*break*/, 8];
                     case 7:
                         _c.sent();
-                        this.context.logger.error("Error loading image " + container.src);
+                        this.context.logger.error("Error loading image ".concat(container.src));
                         return [3 /*break*/, 8];
                     case 8:
                         if (container instanceof CanvasElementContainer) {
@@ -7394,7 +8433,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [3 /*break*/, 12];
                     case 11:
                         _c.sent();
-                        this.context.logger.error("Error loading svg " + container.svg.substring(0, 255));
+                        this.context.logger.error("Error loading svg ".concat(container.svg.substring(0, 255)));
                         return [3 /*break*/, 12];
                     case 12:
                         if (!(container instanceof IFrameElementContainer && container.tree)) return [3 /*break*/, 14];
@@ -7445,19 +8484,19 @@ var CanvasRenderer = /** @class */ (function (_super) {
                             }
                         }
                         if (isTextInputElement(container) && container.value.length) {
-                            _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
+                            _b = this.createFontStyle(styles), font = _b[0], fontFamily = _b[1], fontSize = _b[2];
                             baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
-                            this.ctx.font = fontFamily;
+                            this.ctx.font = font;
                             this.ctx.fillStyle = asString(styles.color);
                             this.ctx.textBaseline = 'alphabetic';
                             this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
                             bounds = contentBox(container);
                             x = 0;
                             switch (container.styles.textAlign) {
-                                case 1 /* CENTER */:
+                                case 1 /* TEXT_ALIGN.CENTER */:
                                     x += bounds.width / 2;
                                     break;
-                                case 2 /* RIGHT */:
+                                case 2 /* TEXT_ALIGN.RIGHT */:
                                     x += bounds.width;
                                     break;
                             }
@@ -7475,10 +8514,10 @@ var CanvasRenderer = /** @class */ (function (_super) {
                             this.ctx.textBaseline = 'alphabetic';
                             this.ctx.textAlign = 'left';
                         }
-                        if (!contains(container.styles.display, 2048 /* LIST_ITEM */)) return [3 /*break*/, 20];
+                        if (!contains(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 20];
                         if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
                         img = container.styles.listStyleImage;
-                        if (!(img.type === 0 /* URL */)) return [3 /*break*/, 18];
+                        if (!(img.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 18];
                         image = void 0;
                         url = img.url;
                         _c.label = 15;
@@ -7491,13 +8530,13 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         return [3 /*break*/, 18];
                     case 17:
                         _c.sent();
-                        this.context.logger.error("Error loading list-style-image " + url);
+                        this.context.logger.error("Error loading list-style-image ".concat(url));
                         return [3 /*break*/, 18];
                     case 18: return [3 /*break*/, 20];
                     case 19:
-                        if (paint.listValue && container.styles.listStyleType !== -1 /* NONE */) {
-                            fontFamily = this.createFontStyle(styles)[0];
-                            this.ctx.font = fontFamily;
+                        if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
+                            font = this.createFontStyle(styles)[0];
+                            this.ctx.font = font;
                             this.ctx.fillStyle = asString(styles.color);
                             this.ctx.textBaseline = 'middle';
                             this.ctx.textAlign = 'right';
@@ -7518,7 +8557,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             return __generator(this, function (_p) {
                 switch (_p.label) {
                     case 0:
-                        if (contains(stack.element.container.flags, 16 /* DEBUG_RENDER */)) {
+                        if (contains(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
                             debugger;
                         }
                         // https://www.w3.org/TR/css-position-3/#painting-order
@@ -7666,10 +8705,11 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.ctx.translate(-offsetX, -offsetY);
     };
     CanvasRenderer.prototype.resizeImage = function (image, width, height) {
+        // https://github.com/niklasvh/html2canvas/pull/2911
+        // if (image.width === width && image.height === height) {
+        //     return image;
+        // }
         var _a;
-        if (image.width === width && image.height === height) {
-            return image;
-        }
         var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
         var canvas = ownerDocument.createElement('canvas');
         canvas.width = Math.max(1, width);
@@ -7686,11 +8726,11 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     case 0:
                         index = container.styles.backgroundImage.length - 1;
                         _loop_1 = function (backgroundImage) {
-                            var image, url, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_1, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF;
+                            var image, url, imageWidth, imageHeight, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_1, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF;
                             return __generator(this, function (_h) {
                                 switch (_h.label) {
                                     case 0:
-                                        if (!(backgroundImage.type === 0 /* URL */)) return [3 /*break*/, 5];
+                                        if (!(backgroundImage.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 5];
                                         image = void 0;
                                         url = backgroundImage.url;
                                         _h.label = 1;
@@ -7702,14 +8742,16 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                         return [3 /*break*/, 4];
                                     case 3:
                                         _h.sent();
-                                        this_1.context.logger.error("Error loading background-image " + url);
+                                        this_1.context.logger.error("Error loading background-image ".concat(url));
                                         return [3 /*break*/, 4];
                                     case 4:
                                         if (image) {
+                                            imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
+                                            imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
                                             _c = calculateBackgroundRendering(container, index, [
-                                                image.width,
-                                                image.height,
-                                                image.width / image.height
+                                                imageWidth,
+                                                imageHeight,
+                                                imageWidth / imageHeight
                                             ]), path = _c[0], x = _c[1], y = _c[2], width = _c[3], height = _c[4];
                                             pattern = this_1.ctx.createPattern(this_1.resizeImage(image, width, height), 'repeat');
                                             this_1.renderRepeat(path, pattern, x, y);
@@ -7724,7 +8766,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                                             canvas.height = height;
                                             ctx = canvas.getContext('2d');
                                             gradient_1 = ctx.createLinearGradient(x0, y0, x1, y1);
-                                            processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {
+                                            processColorStops(backgroundImage.stops, lineLength || 1).forEach(function (colorStop) {
                                                 return gradient_1.addColorStop(colorStop.stop, asString(colorStop.color));
                                             });
                                             ctx.fillStyle = gradient_1;
@@ -7834,7 +8876,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        this.applyEffects(paint.getEffects(2 /* BACKGROUND_BORDERS */));
+                        this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
                         styles = paint.container.styles;
                         hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
                         borders = [
@@ -7890,20 +8932,20 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     case 3:
                         if (!(_i < borders_1.length)) return [3 /*break*/, 13];
                         border = borders_1[_i];
-                        if (!(border.style !== 0 /* NONE */ && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
-                        if (!(border.style === 2 /* DASHED */)) return [3 /*break*/, 5];
-                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* DASHED */)];
+                        if (!(border.style !== 0 /* BORDER_STYLE.NONE */ && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
+                        if (!(border.style === 2 /* BORDER_STYLE.DASHED */)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */)];
                     case 4:
                         _a.sent();
                         return [3 /*break*/, 11];
                     case 5:
-                        if (!(border.style === 3 /* DOTTED */)) return [3 /*break*/, 7];
-                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* DOTTED */)];
+                        if (!(border.style === 3 /* BORDER_STYLE.DOTTED */)) return [3 /*break*/, 7];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */)];
                     case 6:
                         _a.sent();
                         return [3 /*break*/, 11];
                     case 7:
-                        if (!(border.style === 4 /* DOUBLE */)) return [3 /*break*/, 9];
+                        if (!(border.style === 4 /* BORDER_STYLE.DOUBLE */)) return [3 /*break*/, 9];
                         return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
                     case 8:
                         _a.sent();
@@ -7930,7 +8972,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 this.ctx.save();
                 strokePaths = parsePathForBorderStroke(curvePoints, side);
                 boxPaths = parsePathForBorder(curvePoints, side);
-                if (style === 2 /* DASHED */) {
+                if (style === 2 /* BORDER_STYLE.DASHED */) {
                     this.path(boxPaths);
                     this.ctx.clip();
                 }
@@ -7957,7 +8999,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     length = Math.abs(startY - endY);
                 }
                 this.ctx.beginPath();
-                if (style === 3 /* DOTTED */) {
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
                     this.formatPath(strokePaths);
                 }
                 else {
@@ -7965,7 +9007,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 }
                 dashLength = width < 3 ? width * 3 : width * 2;
                 spaceLength = width < 3 ? width * 2 : width;
-                if (style === 3 /* DOTTED */) {
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
                     dashLength = width;
                     spaceLength = width;
                 }
@@ -7988,14 +9030,14 @@ var CanvasRenderer = /** @class */ (function (_super) {
                             : maxSpace;
                 }
                 if (useLineDash) {
-                    if (style === 3 /* DOTTED */) {
+                    if (style === 3 /* BORDER_STYLE.DOTTED */) {
                         this.ctx.setLineDash([0, dashLength + spaceLength]);
                     }
                     else {
                         this.ctx.setLineDash([dashLength, spaceLength]);
                     }
                 }
-                if (style === 3 /* DOTTED */) {
+                if (style === 3 /* BORDER_STYLE.DOTTED */) {
                     this.ctx.lineCap = 'round';
                     this.ctx.lineWidth = width;
                 }
@@ -8006,7 +9048,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 this.ctx.stroke();
                 this.ctx.setLineDash([]);
                 // dashed round edge gap
-                if (style === 2 /* DASHED */) {
+                if (style === 2 /* BORDER_STYLE.DASHED */) {
                     if (isBezierCurve(boxPaths[0])) {
                         path1 = boxPaths[3];
                         path2 = boxPaths[0];
@@ -8063,22 +9105,22 @@ var isTextInputElement = function (container) {
 };
 var calculateBackgroundCurvedPaintingArea = function (clip, curves) {
     switch (clip) {
-        case 0 /* BORDER_BOX */:
+        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
             return calculateBorderBoxPath(curves);
-        case 2 /* CONTENT_BOX */:
+        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
             return calculateContentBoxPath(curves);
-        case 1 /* PADDING_BOX */:
+        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
         default:
             return calculatePaddingBoxPath(curves);
     }
 };
 var canvasTextAlign = function (textAlign) {
     switch (textAlign) {
-        case 1 /* CENTER */:
+        case 1 /* TEXT_ALIGN.CENTER */:
             return 'center';
-        case 2 /* RIGHT */:
+        case 2 /* TEXT_ALIGN.RIGHT */:
             return 'right';
-        case 0 /* LEFT */:
+        case 0 /* TEXT_ALIGN.LEFT */:
         default:
             return 'left';
     }
@@ -8100,11 +9142,11 @@ var ForeignObjectRenderer = /** @class */ (function (_super) {
         _this.options = options;
         _this.canvas.width = Math.floor(options.width * options.scale);
         _this.canvas.height = Math.floor(options.height * options.scale);
-        _this.canvas.style.width = options.width + "px";
-        _this.canvas.style.height = options.height + "px";
+        _this.canvas.style.width = "".concat(options.width, "px");
+        _this.canvas.style.height = "".concat(options.height, "px");
         _this.ctx.scale(_this.options.scale, _this.options.scale);
         _this.ctx.translate(-options.x, -options.y);
-        _this.context.logger.debug("EXPERIMENTAL ForeignObject renderer initialized (" + options.width + "x" + options.height + " at " + options.x + "," + options.y + ") with scale " + options.scale);
+        _this.context.logger.debug("EXPERIMENTAL ForeignObject renderer initialized (".concat(options.width, "x").concat(options.height, " at ").concat(options.x, ",").concat(options.y, ") with scale ").concat(options.scale));
         return _this;
     }
     ForeignObjectRenderer.prototype.render = function (element) {
@@ -8136,7 +9178,7 @@ var loadSerializedSVG = function (svg) {
             resolve(img);
         };
         img.onerror = reject;
-        img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
+        img.src = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(new XMLSerializer().serializeToString(svg)));
     });
 };
 
@@ -8157,7 +9199,7 @@ var Logger = /** @class */ (function () {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
                 // eslint-disable-next-line no-console
-                console.debug.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                console.debug.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
             }
             else {
                 this.info.apply(this, args);
@@ -8177,7 +9219,7 @@ var Logger = /** @class */ (function () {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
                 // eslint-disable-next-line no-console
-                console.info.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                console.info.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
             }
         }
     };
@@ -8191,7 +9233,7 @@ var Logger = /** @class */ (function () {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
                 // eslint-disable-next-line no-console
-                console.warn.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                console.warn.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
             }
             else {
                 this.info.apply(this, args);
@@ -8208,7 +9250,7 @@ var Logger = /** @class */ (function () {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
                 // eslint-disable-next-line no-console
-                console.error.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                console.error.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
             }
             else {
                 this.info.apply(this, args);
@@ -8223,7 +9265,7 @@ var Context = /** @class */ (function () {
     function Context(options, windowBounds) {
         var _a;
         this.windowBounds = windowBounds;
-        this.instanceName = "#" + Context.instanceCount++;
+        this.instanceName = "#".concat(Context.instanceCount++);
         this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
         this.cache = (_a = options.cache) !== null && _a !== void 0 ? _a : new Cache(this, options);
     }
@@ -8259,7 +9301,8 @@ var renderElement = function (element, opts) { return __awaiter(void 0, void 0,
                     allowTaint: (_b = opts.allowTaint) !== null && _b !== void 0 ? _b : false,
                     imageTimeout: (_c = opts.imageTimeout) !== null && _c !== void 0 ? _c : 15000,
                     proxy: opts.proxy,
-                    useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false
+                    useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false,
+                    customIsSameOrigin: opts.customIsSameOrigin
                 };
                 contextOptions = __assign({ logging: (_e = opts.logging) !== null && _e !== void 0 ? _e : true, cache: opts.cache }, resourceOptions);
                 windowOptions = {
@@ -8278,7 +9321,7 @@ var renderElement = function (element, opts) { return __awaiter(void 0, void 0,
                     inlineImages: foreignObjectRendering,
                     copyStyles: foreignObjectRendering
                 };
-                context.logger.debug("Starting document clone with size " + windowBounds.width + "x" + windowBounds.height + " scrolled to " + -windowBounds.left + "," + -windowBounds.top);
+                context.logger.debug("Starting document clone with size ".concat(windowBounds.width, "x").concat(windowBounds.height, " scrolled to ").concat(-windowBounds.left, ",").concat(-windowBounds.top));
                 documentCloner = new DocumentCloner(context, element, cloneOptions);
                 clonedElement = documentCloner.clonedReferenceElement;
                 if (!clonedElement) {
@@ -8308,13 +9351,13 @@ var renderElement = function (element, opts) { return __awaiter(void 0, void 0,
                 canvas = _u.sent();
                 return [3 /*break*/, 5];
             case 3:
-                context.logger.debug("Document cloned, element located at " + left + "," + top + " with size " + width + "x" + height + " using computed rendering");
+                context.logger.debug("Document cloned, element located at ".concat(left, ",").concat(top, " with size ").concat(width, "x").concat(height, " using computed rendering"));
                 context.logger.debug("Starting DOM parsing");
                 root = parseTree(context, clonedElement);
                 if (backgroundColor === root.styles.backgroundColor) {
                     root.styles.backgroundColor = COLORS.TRANSPARENT;
                 }
-                context.logger.debug("Starting renderer for element at " + renderOptions.x + "," + renderOptions.y + " with size " + renderOptions.width + "x" + renderOptions.height);
+                context.logger.debug("Starting renderer for element at ".concat(renderOptions.x, ",").concat(renderOptions.y, " with size ").concat(renderOptions.width, "x").concat(renderOptions.height));
                 renderer = new CanvasRenderer(context, renderOptions);
                 return [4 /*yield*/, renderer.render(root)];
             case 4:
@@ -8375,38 +9418,38 @@ class Screenshot {
                 useCORS: true,
                 logging: false,
                 width: fullPageWidth,
-                height: fullPageHeight
+                height: fullPageHeight,
             });
             // Restore scroll position
             window.scrollTo(0, originalScrollY);
             // Show UXbert UI elements again
             this.showUXbertElements();
             // Convert to base64
-            this.currentScreenshot = canvas.toDataURL('image/png');
+            this.currentScreenshot = canvas.toDataURL("image/png");
             return this.currentScreenshot;
         }
         catch (error) {
-            console.error('Screenshot capture failed:', error);
+            console.error("Screenshot capture failed:", error);
             this.showUXbertElements();
             throw error;
         }
     }
     hideUXbertElements() {
         const elements = document.querySelectorAll('[class*="uxbert-"]');
-        elements.forEach(el => {
+        elements.forEach((el) => {
             const element = el;
-            element.setAttribute('data-uxbert-display', element.style.display || '');
-            element.style.display = 'none';
+            element.setAttribute("data-uxbert-display", element.style.display || "");
+            element.style.display = "none";
         });
     }
     showUXbertElements() {
         const elements = document.querySelectorAll('[class*="uxbert-"]');
-        elements.forEach(el => {
+        elements.forEach((el) => {
             const element = el;
-            const originalDisplay = element.getAttribute('data-uxbert-display');
+            const originalDisplay = element.getAttribute("data-uxbert-display");
             if (originalDisplay !== null) {
                 element.style.display = originalDisplay;
-                element.removeAttribute('data-uxbert-display');
+                element.removeAttribute("data-uxbert-display");
             }
         });
     }
@@ -8825,6 +9868,22 @@ class DeviceInfo {
         this.info = this.collect();
     }
     collect() {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+            return {
+                browser: 'SSR',
+                os: 'SSR',
+                screenResolution: '0x0',
+                viewport: '0x0',
+                url: '',
+                timestamp: new Date().toISOString(),
+                userAgent: 'SSR',
+                language: 'en-US',
+                platform: 'SSR',
+                cookiesEnabled: false,
+                onLine: false
+            };
+        }
         return {
             browser: this.getBrowserInfo(),
             os: this.getOSInfo(),
@@ -9008,6 +10067,11 @@ class Reportly {
         this.isInitialized = false;
     }
     init(userConfig = {}) {
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn("Uxbert Reportly can only be initialized in a browser environment");
+            return;
+        }
         if (this.isInitialized) {
             console.warn("Uxbert Reportly is already initialized");
             return;