CSS: Trim whitespace surrounding CSS Custom Properties values

fecore1 · mgol · commit 219ccf5c5ffd · 2021-10-18T22:43:59.000+02:00
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 (partially cherry picked from commit efadfe9)
diff --git a/src/css.js b/src/css.js
@@ -5,6 +5,7 @@ define( [
 	"./core/nodeName",
 	"./var/rcssNum",
 	"./css/var/rnumnonpx",
+	"./css/var/rcustomProp",
 	"./css/var/cssExpand",
 	"./css/var/getStyles",
 	"./css/var/swap",
@@ -17,8 +18,9 @@ define( [
 	"./core/init",
 	"./core/ready",
 	"./selector" // contains
-], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, cssExpand,
-	getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
+], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx,
+	rcustomProp, cssExpand, getStyles, swap, curCSS, adjustCSS, addGetHookIf,
+	support, finalPropName ) {
 
 "use strict";
 
@@ -28,7 +30,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",
diff --git a/src/css/curCSS.js b/src/css/curCSS.js
@@ -4,13 +4,17 @@ define( [
 	"./var/rboxStyle",
 	"./var/rnumnonpx",
 	"./var/getStyles",
+	"./var/rcustomProp",
+	"../var/rtrimCSS.js",
 	"./support"
-], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles, support ) {
+], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles,
+	rcustomProp, rtrimCSS, support ) {
 
 "use strict";
 
 function curCSS( elem, name, computed ) {
 	var width, minWidth, maxWidth, ret,
+		isCustomProp = rcustomProp.test( name ),
 
 		// Support: Firefox 51+
 		// Retrieving style before computed somehow
@@ -26,6 +30,11 @@ function curCSS( elem, name, computed ) {
 	if ( computed ) {
 		ret = computed.getPropertyValue( name ) || computed[ name ];
 
+		// trim whitespace for custom property (issue gh-4926)
+		if ( isCustomProp ) {
+			ret = ret.replace( rtrimCSS, "$1" );
+		}
+
 		if ( ret === "" && !isAttached( elem ) ) {
 			ret = jQuery.style( elem, name );
 		}
diff --git a/src/css/var/rcustomProp.js b/src/css/var/rcustomProp.js
@@ -0,0 +1,7 @@
+define( function() {
+
+"use strict";
+
+return /^--/;
+
+} );
diff --git a/src/var/rtrimCSS.js b/src/var/rtrimCSS.js
@@ -0,0 +1,12 @@
+define( [
+	"./whitespace"
+], function( whitespace ) {
+
+"use strict";
+
+return new RegExp(
+	"^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
+	"g"
+);
+
+} );
diff --git a/src/var/whitespace.js b/src/var/whitespace.js
@@ -0,0 +1,8 @@
+define( function() {
+
+"use strict";
+
+// https://www.w3.org/TR/css3-selectors/#whitespace
+return "[\\x20\\t\\r\\n\\f]";
+
+} );
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1745,28 +1745,27 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
 			"    .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>"
 		);
 
 		var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
 			$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
 				.appendTo( "#qunit-fixture" ),
-			webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
-				!/\firefox\b/i.test( navigator.userAgent ) &&
-				!/\edge\b/i.test( navigator.userAgent ),
-			oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
-				/\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
-				/iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
-			expected = 10;
-
-		if ( webkit ) {
-			expected -= 2;
-		}
-		if ( oldSafari ) {
+			webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
+			expected = 17;
+
+		if ( webkitOrBlink ) {
 			expected -= 2;
 		}
 		assert.expect( expected );
@@ -1792,20 +1791,24 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
 
 		assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
 
-		// Support: Safari 9.1-10.0 only
-		// Safari collapses whitespaces & quotes. Ignore it.
-		if ( !oldSafari ) {
-			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-55, Safari 9.1-10.0
+		// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
 		// Chrome treats single quotes as double ones.
 		// Safari treats double quotes as single ones.
-		if ( !webkit ) {
-			assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
-			assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
+		if ( !webkitOrBlink ) {
+			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" );
 	} );
 
 	QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) {
