CSS: Warn and fill jQuery.cssNumber and .css(name, Number)

Fixes jquery#296

Author: dmethvin

src/css.js

@@ -42,3 +42,25 @@ jQuery.swap = function( elem, options, callback, args ) {
 
 	return ret;
 };
+
+if ( !jQuery.cssNumber ) {
+	jQuery.cssNumber = {};
+}
+migrateWarnProp( jQuery, "cssNumber", jQuery.cssNumber,
+	"jQuery.cssNumber is deprecated" );
+
+var oldFnCss = jQuery.fn.css;
+
+jQuery.fn.css = function( name, value ) {
+	var origThis = this;
+	if ( typeof name !== "string" ) {
+		jQuery.each( name, function( n, v ) {
+			jQuery.fn.css.call( origThis, n, v );
+		} );
+	}
+	if ( typeof value === "number" ) {
+		migrateWarn( "Use of number-typed values is deprecated in jQuery.fn.css" );
+	}
+
+	return oldFnCss.apply( this, arguments );
+};

test/css.js

@@ -25,3 +25,48 @@ QUnit.test( "jQuery.swap()", function( assert ) {
 	} );
 
 } );
+
+QUnit.test( "jQuery.css with numbers", function( assert) {
+	assert.expect( 4 );
+
+	expectWarning( assert, "Number value direct", 1, function() {
+		jQuery( "<div />" ).css( "height", 10 );
+	} );
+
+	expectWarning( assert, "Number in an object", 2, function() {
+		jQuery( "<div />" ).css( {
+			"width": 14,
+			"height": "10px",
+			"line-height": 2
+		} );
+	} );
+
+	expectNoWarning( assert, "Number value direct", function() {
+		jQuery( "<div />" ).css( "height", 10 );
+	} );
+
+	expectNoWarning( assert, "Number in an object", function() {
+		jQuery( "<div />" ).css( {
+			"width": "14em",
+			"height": "10px",
+			"line-height": "2"
+		} );
+	} );
+
+} );
+
+QUnit.test( "jQuery.cssNumber", function( assert) {
+	assert.expect( 2 );
+
+	expectWarning( assert, "Setting cssNumber value", 1, function() {
+		jQuery.cssNumber.blart = true;
+	} );
+
+
+	expectWarning( assert, "Getting cssNumber value", function() {
+		assert.ok( jQuery.cssNumber.blart, "blart was set" );
+	} );
+
+	delete jQuery.cssNumber.blart;
+
+} );

warnings.md

@@ -229,3 +229,10 @@ See jQuery-ui [commit](https://github.com/jquery/jquery-ui/commit/c0093b599fcd58
 **Cause:** This public but never-documented method has been deprecated as of jQuery 3.2.0.
 
 **Solution:** Replace calls such as `jQuery.nodeName( elem, "div" )` with a test such as `elem.nodeName.toLowerCase() === "div"`.
+
+### JQMIGRATE: Use of number-typed values is deprecated in jQuery.fn.css
+### JQMIGRATE: jQuery.cssNumber is deprecated
+
+**Cause:** In past versions, when a number-typed value was passed to `.css()` jQuery converted it to a string and added `"px"` to the end. As the CSS standard has evolved, an increasingly large set of CSS properties now accept values that are unitless numbers, where this behavior is incorrect. It has become impractical to manage these exceptions in the `jQuery.cssNumber` object. In addition, some CSS properties like `line-height` can accept both a bare number `2` or a pixel value `2px`. jQuery cannot know the correct way to interpret `$.css("line-height", 2)` and currently treats it as `"2px"`.
+
+**Solution:** Always pass string values to `.css()`, and explicitly add units where required. For example, use `$.css("line-height", "2")` to specify 200% of the current line height or `$.css("line-height", "2px")` to specify pixels. When the numeric value is in a variable, ensure the value is converted to string, e.g. `$.css("line-height", String(height))` and `$.css("line-height", height+"px")`.