CSS: Don't auto-append "px" to CSS variables (#4064)

Fixes gh-4063
Closes gh-4064

2 files changed, 18 insertions, 1 deletions

diff --git a/src/css.js b/src/css.js
index e936c8f30..19c2f79d1 100644
--- 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
index 626981b7d..96a231726 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -1659,6 +1659,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" );
+	} );
 } )();
 
 }