jQuery Migrate throws error when an object is specified for the name parameter and number for the value parameter

[mweichert]

jQuery Migrate will treat the name as a string when a number is provided as the value. However, it shouldn't make that assumption.

jQuery UI Slider will make a call to jQuery.fn.css like so:

jQuery.css({left: "100%"}, 300)

It does this when the animate setting is specified. See ​https://jsfiddle.net/mweichert/784kjmoh/17/

jQuery UI Slider is used in this context by wp-color-picker / iris.

Note, I've created an issue and pull request for jquery-migrate here:
​https://github.com/jquery/jquery-migrate/issues/404

jQuery Migrate has a bug which treats the name argument as a string when the value parameter is a number. I've created a PR (that includes tests) for jquery-migrate to fix that. Till that gets merged upstream, WP should be testing against a version of jquery-migrate that doesn't have that problem. I'm included the built version of jquery-migrate from the fork of jquery-migrate I used when submitting my PR.

Trac ticket: https://core.trac.wordpress.org/ticket/51621#ticket

[Clorith]

Thank you very much for finding this, and for reporting it upstream to the jQuery team!

Just so I'm understanding this right, this is jQuery Migrate incorrectly being triggered by Query code in the Iris library of WordPress, which should be compatible without any deprecations in jQuery 3.x?

[mweichert]

No, not exactly.

jQuery has deprecated number values being passed to jQuery.fn.css:
​https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-number-typed-values-are-deprecated-for-jqueryfncss-property-name-value-

E.g.

This call should trigger a "Number-typed values are deprecated for jQuery.fn.css" warning:

jQuery('<div/>').css('width', 30); // implicit px

The above behaviour is working correctly.

However, you can also make these calls to jQuery.fn.css:

jQuery('<div/>').css({width: "30%"});
jQuery('<div/>').css({width: "30%"}, 300); // <- note this use 

jQuery UI Slider will make use of the noted call above when the animate setting is set. See this fiddle I created as an example:
​https://jsfiddle.net/mweichert/784kjmoh/17/

Because Iris uses the animate setting for the slider, it will also trigger this jQuery.fn.css call.

As a reminder, jQuery.fn.css accepts two parameters called "name" and "value".

jQuery Migrate mistakenly assumes that "name" is a string when "value" is a number, which will throw an exception when the .replace() method is called on name via the camelCase function which jQuery Migrate provides:

jQuery.fn.css = function( name, value ) {
	var camelName,
		origThis = this;
	if ( name && typeof name === "object" && !Array.isArray( name ) ) {
		jQuery.each( name, function( n, v ) {
			jQuery.fn.css.call( origThis, n, v );
		} );
	}
	if ( typeof value === "number" ) {
		camelName = camelCase( name ); // throws error because name is not a string
		if ( !isAutoPx( camelName ) && !jQuery.cssNumber[ camelName ] ) {
			migrateWarn( "Number-typed values are deprecated for jQuery.fn.css( \"" +
				name + "\", value )" );
		}
	}

	return oldFnCss.apply( this, arguments );
};

Hopefully that helps. Let me know if there's any more questions. I should maybe also create an issue for jQuery UI Slider, as its also a fault on their end, but for migration reasons, jquery-migrate needs to adjust here as well as jQuery 1.12.1 and earlier will be commonly used for a while.

[mweichert]

It was pointed out to me that the code snippet in the issue description had a syntax error. Not sure if anyone can update it but it should be this:

jQuery UI Slider will make a call to jQuery.fn.css like so:

jQuery.css({left: "100%"}, 300);

It does this when the animate setting is specified. See ​https://jsfiddle.net/mweichert/784kjmoh/17/

[azaozz]

@mweichert as @Clorith mentioned thank you for the bug report and the patch.

Looking ​upstream seems this will be resolved in jQuery Migrate very soon, probably before beta-2 next Tuesday. If not, I'm a +1 to commit to WP while it is being resolved in Migrate.

[azaozz]

Replying to mweichert:

It was pointed out to me that the code snippet in the issue description had a syntax error.

Fixed, thanks.

[helen]

In 49338:

External Libraries: Update jQuery Migrate to 3.3.2-pre.

This is a prerelease version to avoid some errors in 5.6 beta 2. We need to be sure that we ship with a released version by 5.6 RC.

Props mweichert.
Fixes #51621. See #50564.

[prbot]

​hellofromtonya commented on ​PR #654:

Merged in changeset https://core.trac.wordpress.org/changeset/49338

[SergeyBiryukov]

In 49615:

Script Loader: Correct version for jQuery Migrate.

Follow-up to [49338].

See #51621, #50564.