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

Fixes gh-4063
Closes gh-4064

diff --git a/src/css.js b/src/css.js
index e936c8f30ec7655371b5b9e9f79fc31a3e01e91a..19c2f79d15bd42f8602fd96996d709ed7a2cc784 100644 (file)
--- 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 626981b7d8c05f3b5ee78f3aff3eb8f029108ff0..96a231726d01d6d0fd31ccd52ea8e6266b63cd57 100644 (file)
--- 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" );
+       } );
 } )();
 
 }