From 5912a9c49ac89bf7fd6b05ccc7136d818a83b7f6 Mon Sep 17 00:00:00 2001
From: Jonathan Fulton <jonathan.s.fulton@gmail.com>
Date: Sat, 31 Jan 2026 18:58:10 -0500
Subject: [PATCH] fix(animation): strip CSS comments from color strings before
 interpolation

When color values contain CSS comments like 'rgba(255,0,0, /*alpha*/ 0.5)',
the color interpolator would fail to parse them correctly, causing
color transitions to not animate smoothly.

This fix strips CSS /* ... */ comments from color strings before passing
them to the color parser, allowing transitions to work even with
commented color values.

Fixes #12079
---
 src/core/core.animation.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/core/core.animation.js b/src/core/core.animation.js
index eca21f63584..aedfd9a630a 100644
--- a/src/core/core.animation.js
+++ b/src/core/core.animation.js
@@ -3,6 +3,21 @@ import {resolve} from '../helpers/helpers.options.js';
 import {color as helpersColor} from '../helpers/helpers.color.js';
 
 const transparent = 'transparent';
+
+/**
+ * Strip CSS comments from a color string.
+ * Handles /* ... */ style comments that some users put in rgba() for documentation.
+ * @param {string} value
+ * @returns {string}
+ */
+function stripCssComments(value) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+  // Remove /* ... */ comments from the string
+  return value.replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
 const interpolators = {
   boolean(from, to, factor) {
     return factor > 0.5 ? to : from;
@@ -13,8 +28,11 @@ const interpolators = {
    * @param {number} factor
    */
   color(from, to, factor) {
-    const c0 = helpersColor(from || transparent);
-    const c1 = c0.valid && helpersColor(to || transparent);
+    // Strip CSS comments from color strings to ensure proper parsing
+    const cleanFrom = stripCssComments(from);
+    const cleanTo = stripCssComments(to);
+    const c0 = helpersColor(cleanFrom || transparent);
+    const c1 = c0.valid && helpersColor(cleanTo || transparent);
     return c1 && c1.valid
       ? c1.mix(c0, factor).hexString()
       : to;