Skip to content

Commit efadfe9

Browse files
fecore1fecore1
authored
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
1 parent 175db73 commit efadfe9

File tree

8 files changed

+43
-13
lines changed

8 files changed

+43
-13
lines changed

‎src/css.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import nodeName from "./core/nodeName.js";
44
import rcssNum from "./var/rcssNum.js";
55
import isIE from "./var/isIE.js";
66
import rnumnonpx from "./css/var/rnumnonpx.js";
7+
import rcustomProp from "./css/var/rcustomProp.js";
78
import cssExpand from "./css/var/cssExpand.js";
89
import isAutoPx from "./css/isAutoPx.js";
910
import cssCamelCase from "./css/cssCamelCase.js";
@@ -24,7 +25,6 @@ var
2425
// except "table", "table-cell", or "table-caption"
2526
// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
2627
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
27-
rcustomProp = /^--/,
2828
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
2929
cssNormalTransform = {
3030
letterSpacing: "0",

‎src/css/curCSS.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import jQuery from "../core.js";
22
import isAttached from "../core/isAttached.js";
33
import getStyles from "./var/getStyles.js";
4+
import rcustomProp from "./var/rcustomProp.js";
5+
import rtrim from "../var/rtrim.js";
46

57
function curCSS( elem, name, computed ) {
6-
var ret;
8+
var ret,
9+
isCustomProp = rcustomProp.test( name );
710

811
computed = computed || getStyles( elem );
912

1013
// getPropertyValue is needed for `.css('--customProperty')` (gh-3144)
1114
if ( computed ) {
1215
ret = computed.getPropertyValue( name ) || computed[ name ];
1316

17+
// trim whitespace for custom property (issue gh-4926)
18+
if ( isCustomProp ) {
19+
ret = ret.replace( rtrim, "$1" );
20+
}
21+
1422
if ( ret === "" && !isAttached( elem ) ) {
1523
ret = jQuery.style( elem, name );
1624
}

‎src/css/var/rcustomProp.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default ( /^--/ );

‎src/selector.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import documentElement from "./var/documentElement.js";
55
import indexOf from "./var/indexOf.js";
66
import pop from "./var/pop.js";
77
import push from "./var/push.js";
8-
import whitespace from "./selector/var/whitespace.js";
8+
import whitespace from "./var/whitespace.js";
99
import rbuggyQSA from "./selector/rbuggyQSA.js";
10+
import rtrim from "./var/rtrim.js";
1011
import isIE from "./var/isIE.js";
1112

1213
// The following utils are attached directly to the jQuery object.
@@ -71,7 +72,6 @@ var i,
7172

7273
// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
7374
rwhitespace = new RegExp( whitespace + "+", "g" ),
74-
rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
7575

7676
rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
7777
rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" +

‎src/selector/rbuggyQSA.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import isIE from "../var/isIE.js";
2-
import whitespace from "./var/whitespace.js";
2+
import whitespace from "../var/whitespace.js";
33

44
var rbuggyQSA = isIE && new RegExp(
55

‎src/var/rtrim.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import whitespace from "./whitespace.js";
2+
3+
export default new RegExp(
4+
"^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
5+
"g"
6+
);

‎src/selector/var/whitespace.js ‎src/var/whitespace.js

File renamed without changes.

‎test/unit/css.js

+23-8
Original file line numberDiff line numberDiff line change
@@ -1738,9 +1738,16 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
17381738
" .test__customProperties {\n" +
17391739
" --prop1:val1;\n" +
17401740
" --prop2: val2;\n" +
1741-
" --prop3:val3 ;\n" +
1742-
" --prop4:\"val4\";\n" +
1743-
" --prop5:'val5';\n" +
1741+
" --prop3: val3;\n" +
1742+
" --prop4:val4 ;\n" +
1743+
" --prop5:val5 ;\n" +
1744+
" --prop6: val6 ;\n" +
1745+
" --prop7: val7 ;\n" +
1746+
" --prop8:\"val8\";\n" +
1747+
" --prop9:'val9';\n" +
1748+
" --prop10:\f\r\n\t val10 \f\r\n\t;\n" +
1749+
" --prop11:\u000C\u000D\u000A\u0009\u0020val11\u0020\u0009\u000A\u000D\u000C;\n" +
1750+
" --prop12:\u000Bval12\u000B;\n" +
17441751
" }\n" +
17451752
"</style>"
17461753
);
@@ -1749,7 +1756,7 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
17491756
$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
17501757
.appendTo( "#qunit-fixture" ),
17511758
webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
1752-
expected = 10;
1759+
expected = 17;
17531760

17541761
if ( webkitOrBlink ) {
17551762
expected -= 2;
@@ -1777,16 +1784,24 @@ QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
17771784

17781785
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
17791786

1780-
assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1781-
assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1787+
assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
1788+
assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
1789+
assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
1790+
assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
1791+
assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
1792+
assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
17821793

17831794
// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
17841795
// Chrome treats single quotes as double ones.
17851796
// Safari treats double quotes as single ones.
17861797
if ( !webkitOrBlink ) {
1787-
assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1788-
assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1798+
assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
1799+
assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
17891800
}
1801+
1802+
assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
1803+
assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
1804+
assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
17901805
} );
17911806

17921807
// IE doesn't support CSS variables.

0 commit comments

Comments
 (0)