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

diff --git a/src/css.js b/src/css.js
index c82a08c545489cc30c951e0133ebbc7e50990429..b50aa3d91aa3e2a3a75374c99eff4a9a95e2c1f0 100644 (file)
--- a/src/css.js
+++ b/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",

diff --git a/src/css/curCSS.js b/src/css/curCSS.js
index 59a639f688abd7ebce3c426e98a77a6f970b6b4a..6d8b6a2d3bd25e8dde11a41c40ffbe3a69ea7d9d 100644 (file)
--- a/src/css/curCSS.js
+++ b/src/css/curCSS.js
@@ -1,9 +1,12 @@
 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 );
 
@@ -11,6 +14,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( rtrim, "$1" );
+               }
+
                if ( ret === "" && !isAttached( elem ) ) {
                        ret = jQuery.style( elem, name );
                }

diff --git a/src/css/var/rcustomProp.js b/src/css/var/rcustomProp.js
new file mode 100644 (file)
index 0000000..f435e7c
--- /dev/null
+++ b/src/css/var/rcustomProp.js
@@ -0,0 +1 @@
+export default ( /^--/ );

diff --git a/src/selector.js b/src/selector.js
index f7e8d9b60735847f5cd09c72d2111c41758a6086..4b9c8b6ed7c66c60840c897ee246643368675803 100644 (file)
--- a/src/selector.js
+++ b/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 + ")" +

diff --git a/src/selector/rbuggyQSA.js b/src/selector/rbuggyQSA.js
index 7a621073322658add2eaf3ac49f0191c9ed08ab6..bae05398fd8dcc528741c9b8c578bd0513572c31 100644 (file)
--- a/src/selector/rbuggyQSA.js
+++ b/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(
 

diff --git a/src/selector/var/whitespace.js b/src/selector/var/whitespace.js
deleted file mode 100644 (file)
index dcac814..0000000
--- a/src/selector/var/whitespace.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// https://www.w3.org/TR/css3-selectors/#whitespace
-export default "[\\x20\\t\\r\\n\\f]";

diff --git a/src/var/rtrim.js b/src/var/rtrim.js
new file mode 100644 (file)
index 0000000..89d86d1
--- /dev/null
+++ b/src/var/rtrim.js
@@ -0,0 +1,6 @@
+import whitespace from "./whitespace.js";
+
+export default new RegExp(
+       "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
+       "g"
+);

diff --git a/src/var/whitespace.js b/src/var/whitespace.js
new file mode 100644 (file)
index 0000000..dcac814
--- /dev/null
+++ b/src/var/whitespace.js
@@ -0,0 +1,2 @@
+// https://www.w3.org/TR/css3-selectors/#whitespace
+export default "[\\x20\\t\\r\\n\\f]";

diff --git a/test/unit/css.js b/test/unit/css.js
index 8ade482ffa29182616e290fd6d8b2bf3d6fda4e0..100b8c8c5dbbc69db722c251c49d9be7c2db258b 100644 (file)
--- a/test/unit/css.js
+++ b/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.