From f67aeb82b36824fb4c59e2c48d4bbecd386be2e3 Mon Sep 17 00:00:00 2001
From: Abhineet Saha <abhineetsaha@Abhineets-MacBook-Pro.local>
Date: Wed, 11 Dec 2024 09:58:41 +0530
Subject: [PATCH] Prevent flipping percentages in CSS color functions

---
 src/cssjanus.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/cssjanus.js b/src/cssjanus.js
index dc82880..fb918b6 100644
--- a/src/cssjanus.js
+++ b/src/cssjanus.js
@@ -182,12 +182,17 @@ function CSSJanus() {
 	 * @return {string} Inverted property
 	 */
 	function calculateNewBackgroundPosition( match, pre, value ) {
-		var idx, len;
+		// Check if inside a known color function
+		var lowerPre = pre.toLowerCase();
+		if (/(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|linear-gradient)\(/.test(lowerPre)) {
+			// Do not flip if inside a color function
+			return pre + value;
+		}
+
 		if ( value.slice( -1 ) === '%' ) {
-			idx = value.indexOf( '.' );
+			var idx = value.indexOf( '.' );
 			if ( idx !== -1 ) {
-				// Two off, one for the "%" at the end, one for the dot itself
-				len = value.length - idx - 2;
+				var len = value.length - idx - 2;
 				value = 100 - parseFloat( value );
 				value = value.toFixed( len ) + '%';
 			} else {