CSS variable stripped from calls to jQuery .css()

[Krinkle]

I found an odd behavior in the jQuery Core .css() function when passing values that contain CSS variables, with a color value as fallback. This bug only happens when jQuery UI is also loaded on the page, and seems to be caused by the jQuery Color plugin (as vendored by jQuery UI) and its cssHooks for converting colors to rgb() notation.

Test case

$('<div>').css('color', 'var(--color-base, #202122)').css('color');

Expected
If you run this e.g. on https://jquery.com where jQuery UI is not loaded, it returns var(--color-base, #202122).

Actual
If you run it on https://jqueryui.com/resources/demos/draggable/default.html where jQuery UI is present, it returns rgb(32, 33, 34).

This is not limited to the return value, the style attribute itself is altered so this happens during the setting, not the getting.

The impact is that when you later attach the element to the document, where the CSS variable exists in a stylesheet, its value will not be used, and instead the fallback is always used.

This was found downstream at Wikipedia (https://phabricator.wikimedia.org/T391461), where we found theme variables (especially dark mode) causing some challenging color combinations. The issue only happened on the subset of forms where jQuery UI is loaded by something elsewhere on the page.

[Krinkle]

I'm looking at patching https://github.com/jquery/jquery-color to add a regex anchor but wondering about back-compat with regards to whitespace. Today, the hook technically matches inputs like #202FF2 , but it may or may not have to.

Firefox, Safari, and Chrome agree in how they accept it as input:

var d = document.createElement('div');
d.style.color = '    #202FF2   ';
d.style.color;
//> "rgb(32, 47, 242)" 

Idem when using .css() without jQuery Color (or jQuery UI) loaded:

$('<div>').css('color', '    #202FF2   ').attr('style');
//> "color: rgb(32, 47, 242);" 

But... while it may get trimmed eventually, it is not trimmed before making it into cssHooks:

$.cssHooks.color = { set: function( elem, value ) { debugger; } };
$('<div>').css('color', '    #202FF2   ').attr('style');
//> value = "    #202FF2   "

So to make the smallest possible change, I'll keep tolerance for leading whitespace, and leave off any end anchor.

[Krinkle]

Looking at the stringParse() implementation I note that the above does not hold for color keywords.

At https://jqueryui.com/resources/demos/draggable/default.html with jQuery UI/jQuery color loaded:

$('<div>').css('color', 'red').text('Foo').appendTo('body').attr('style');
//> "color: rgb(255, 0, 0);" 

$('<div>').css('color', '    red  ').text('Foo').appendTo('body').attr('style');
//> "color: red;" 

var d = document.createElement('div');
d.style.color = '    red   ';
d.style.color; 
//> "red"