CSS: Don't auto-append "px" to CSS variables

mgol · mgol · commit 5fc77d121bd1 · 2018-05-02T17:12:10.000+02:00
Fixes gh-4063
diff --git a/src/css.js b/src/css.js
@@ -246,7 +246,9 @@ jQuery.extend( {
 			}
 
 			// If a number was passed in, add the unit (except for certain CSS properties)
-			if ( type === "number" ) {
+			// The isCustomProp check can be removed in jQuery 4.0 when we only auto-append
+			// "px" to a few hardcoded values.
+			if ( type === "number" && !isCustomProp ) {
 				value += ret && ret[ 3 ] || ( jQuery.cssNumber[ origName ] ? "" : "px" );
 			}
 
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1658,6 +1658,21 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
 			assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
 		}
 	} );
+
+	QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) {
+		assert.expect( 3 );
+
+		var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
+
+		$div
+			.css( "--a", 3 )
+			.css( "--line-height", 4 )
+			.css( "--lineHeight", 5 );
+
+		assert.equal( $div.css( "--a" ), "3", "--a: 3" );
+		assert.equal( $div.css( "--line-height" ), "4", "--line-height: 4" );
+		assert.equal( $div.css( "--lineHeight" ), "5", "--lineHeight: 5" );
+	} );
 } )();
 
 }

Original file line number	Diff line number	Diff line change
`@@ -246,7 +246,9 @@ jQuery.extend( {`
`246`	`246`	`}`
`247`	`247`
`248`	`248`	`// If a number was passed in, add the unit (except for certain CSS properties)`
`249`		`- if ( type === "number" ) {`
	`249`	`+ // The isCustomProp check can be removed in jQuery 4.0 when we only auto-append`
	`250`	`+ // "px" to a few hardcoded values.`
	`251`	`+ if ( type === "number" && !isCustomProp ) {`
`250`	`252`	`value += ret && ret[ 3 ] \|\| ( jQuery.cssNumber[ origName ] ? "" : "px" );`
`251`	`253`	`}`
`252`	`254`