CSS: Trim whitespace surrounding CSS Custom Properties values

The spec has recently changed and CSS Custom Properties values are trimmed now.
This change makes jQuery polyfill that new behavior for all browsers.

Ref w3c/csswg-drafts#774
Fixes gh-4926
Closes gh-4930

src/css.js

@@ -4,6 +4,7 @@ import nodeName from "./core/nodeName.js";
 import rcssNum from "./var/rcssNum.js";
 import isIE from "./var/isIE.js";
 import rnumnonpx from "./css/var/rnumnonpx.js";
+import rcustomProp from "./css/var/rcustomProp.js";
 import cssExpand from "./css/var/cssExpand.js";
 import isAutoPx from "./css/isAutoPx.js";
 import cssCamelCase from "./css/cssCamelCase.js";
@@ -24,7 +25,6 @@ var
 	// except "table", "table-cell", or "table-caption"
 	// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
 	rdisplayswap = /^(none|table(?!-c[ea]).+)/,
-	rcustomProp = /^--/,
 	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
 	cssNormalTransform = {
 		letterSpacing: "0",

src/css/curCSS.js

@@ -1,16 +1,24 @@
 import jQuery from "../core.js";
 import isAttached from "../core/isAttached.js";
 import getStyles from "./var/getStyles.js";
+import rcustomProp from "./var/rcustomProp.js";
+import rtrim from "../var/rtrim.js";
 
 function curCSS( elem, name, computed ) {
-	var ret;
+	var ret,
+		isCustomProp = rcustomProp.test( name );
 
 	computed = computed || getStyles( elem );
 
 	// getPropertyValue is needed for `.css('--customProperty')` (gh-3144)
 	if ( computed ) {
 		ret = computed.getPropertyValue( name ) || computed[ name ];
 
+		// trim whitespace for custom property (issue gh-4926)
+		if ( isCustomProp ) {
+			ret = ret.replace( rtrim, "$1" );
+		}
+
 		if ( ret === "" && !isAttached( elem ) ) {
 			ret = jQuery.style( elem, name );
 		}

src/css/var/rcustomProp.js

@@ -0,0 +1 @@
+export default ( /^--/ );

src/selector.js

@@ -5,8 +5,9 @@ import documentElement from "./var/documentElement.js";
 import indexOf from "./var/indexOf.js";
 import pop from "./var/pop.js";
 import push from "./var/push.js";
-import whitespace from "./selector/var/whitespace.js";
+import whitespace from "./var/whitespace.js";
 import rbuggyQSA from "./selector/rbuggyQSA.js";
+import rtrim from "./var/rtrim.js";
 import isIE from "./var/isIE.js";
 
 // The following utils are attached directly to the jQuery object.
@@ -71,7 +72,6 @@ var i,
 
 	// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
 	rwhitespace = new RegExp( whitespace + "+", "g" ),
-	rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
 
 	rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
 	rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" +

src/selector/rbuggyQSA.js

@@ -1,5 +1,5 @@
 import isIE from "../var/isIE.js";
-import whitespace from "./var/whitespace.js";
+import whitespace from "../var/whitespace.js";
 
 var rbuggyQSA = isIE && new RegExp(
 

src/var/rtrim.js

@@ -0,0 +1,6 @@
+import whitespace from "./whitespace.js";
+
+export default new RegExp(
+	"^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
+	"g"
+);

test/unit/css.js

@@ -1738,9 +1738,16 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
 		"    .test__customProperties {\n" +
 		"        --prop1:val1;\n" +
 		"        --prop2: val2;\n" +
-		"        --prop3:val3 ;\n" +
-		"        --prop4:\"val4\";\n" +
-		"        --prop5:'val5';\n" +
+		"        --prop3:   val3;\n" +
+		"        --prop4:val4 ;\n" +
+		"        --prop5:val5   ;\n" +
+		"        --prop6: val6 ;\n" +
+		"        --prop7:   val7   ;\n" +
+		"        --prop8:\"val8\";\n" +
+		"        --prop9:'val9';\n" +
+		"        --prop10:\f\r\n\t val10 \f\r\n\t;\n" +
+		"        --prop11:\u000C\u000D\u000A\u0009\u0020val11\u0020\u0009\u000A\u000D\u000C;\n" +
+		"        --prop12:\u000Bval12\u000B;\n" +
 		"    }\n" +
 		"</style>"
 	);
@@ -1749,7 +1756,7 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
 		$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
 			.appendTo( "#qunit-fixture" ),
 		webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
-		expected = 10;
+		expected = 17;
 
 	if ( webkitOrBlink ) {
 		expected -= 2;
@@ -1777,16 +1784,24 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
 
 	assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
 
-	assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
-	assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
+	assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
+	assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
+	assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
+	assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
+	assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
+	assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
 
 	// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
 	// Chrome treats single quotes as double ones.
 	// Safari treats double quotes as single ones.
 	if ( !webkitOrBlink ) {
-		assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
-		assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
+		assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
+		assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
 	}
+
+	assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
+	assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
+	assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
 } );
 
 // IE doesn't support CSS variables.