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

Fixes jquery#296

Author: dmethvin

src/css.js

@@ -52,3 +52,25 @@ if ( jQueryVersionSince( "3.4.0" ) && typeof Proxy !== "undefined" ) {
 		}
 	} );
 }
+
+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

@@ -41,3 +41,48 @@ QUnit[ ( jQueryVersionSince( "3.4.0" ) && typeof Proxy !== "undefined" ) ? "test
 
 	delete jQuery.cssProps.devoHat;
 } );
+
+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

@@ -253,3 +253,10 @@ See jQuery-ui [commit](https://github.com/jquery/jquery-ui/commit/c0093b599fcd58
 **Cause:** Older versions of IE & Android Browser didn't implement a method to `trim` strings so jQuery provided a cross-browser implementation. The browsers supported by jQuery 3.0 all provide a standard method for this purpose.
 
 **Solution:** Replace any calls to `jQuery.trim( text )` with `text.trim()` if you know `text` is a string; otherwise, you can replace it with `text == null ? "" : text.trim()`.
+
+### 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")`.