fix: logic with espaced

cspell.json

@@ -192,6 +192,7 @@
     "queryloader",
     "querystrings",
     "RBDT",
+    "reconsume",
     "recurse",
     "redeclaration",
     "reexecuted",

lib/css/CssParser.js

@@ -384,12 +384,13 @@ class CssParser extends Parser {
 						break;
 					}
 					default: {
+						// TODO move escaped parsing to tokenizer
 						const lastFunction = functionStack[functionStack.length - 1];
 
 						if (
 							lastFunction &&
-							(lastFunction[0].toLowerCase() === "url" ||
+							(lastFunction[0].replace(/\\/g, "").toLowerCase() === "url" ||
-								/^(-\w+-)?image-set$/i.test(lastFunction[0]))
+								/^(-\w+-)?image-set$/i.test(lastFunction[0].replace(/\\/g, "")))
 						) {
 							let value = normalizeUrl(input.slice(start + 1, end - 1), true);
 
@@ -402,7 +403,8 @@ class CssParser extends Parser {
 								break;
 							}
 
-							const isUrl = lastFunction[0].toLowerCase() === "url";
+							const isUrl =
+								lastFunction[0].replace(/\\/g, "").toLowerCase() === "url";
 							const dep = new CssUrlDependency(
 								value,
 								[start, end],

lib/css/walkCssTokens.js

@@ -37,7 +37,7 @@ const CC_TAB = "\t".charCodeAt(0);
 const CC_SPACE = " ".charCodeAt(0);
 
 const CC_SLASH = "/".charCodeAt(0);
-const CC_BACK_SLASH = "\\".charCodeAt(0);
+const CC_REVERSE_SOLIDUS = "\\".charCodeAt(0);
 const CC_ASTERISK = "*".charCodeAt(0);
 
 const CC_LEFT_PARENTHESIS = "(".charCodeAt(0);
@@ -144,7 +144,7 @@ const _consumeString = (input, pos, end) => {
 			// bad string
 			return pos;
 		}
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			// we don't need to fully parse the escaped code point
 			// just skip over a potential new line
 			pos++;
@@ -165,6 +165,12 @@ const _isIdentifierStartCode = cc => {
 	);
 };
 
+const _isTwoCodePointsAreValidEscape = (first, second) => {
+	if (first !== CC_REVERSE_SOLIDUS) return false;
+	if (_isNewLine(second)) return false;
+	return true;
+};
+
 const _isDigit = cc => {
 	return cc >= CC_0 && cc <= CC_9;
 };
@@ -175,13 +181,13 @@ const _startsIdentifier = (input, pos) => {
 		if (pos === input.length) return false;
 		const cc = input.charCodeAt(pos + 1);
 		if (cc === CC_HYPHEN_MINUS) return true;
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			const cc = input.charCodeAt(pos + 2);
 			return !_isNewLine(cc);
 		}
 		return _isIdentifierStartCode(cc);
 	}
-	if (cc === CC_BACK_SLASH) {
+	if (cc === CC_REVERSE_SOLIDUS) {
 		const cc = input.charCodeAt(pos + 1);
 		return !_isNewLine(cc);
 	}
@@ -222,7 +228,7 @@ const consumeMinus = (input, pos, callbacks) => {
 				return callbacks.identifier(input, start, pos);
 			}
 		}
-	} else if (cc === CC_BACK_SLASH) {
+	} else if (cc === CC_REVERSE_SOLIDUS) {
 		if (pos + 1 === input.length) return pos;
 		const cc = input.charCodeAt(pos + 1);
 		if (_isNewLine(cc)) return pos;
@@ -306,7 +312,7 @@ const consumePotentialUrl = (input, pos, callbacks) => {
 			const contentStart = pos;
 			let contentEnd;
 			for (;;) {
-				if (cc === CC_BACK_SLASH) {
+				if (cc === CC_REVERSE_SOLIDUS) {
 					pos++;
 					if (pos === input.length) return pos;
 					pos++;
@@ -425,7 +431,7 @@ const consumeComma = (input, pos, callbacks) => {
 const _consumeIdentifier = (input, pos) => {
 	for (;;) {
 		const cc = input.charCodeAt(pos);
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			pos++;
 			if (pos === input.length) return pos;
 			pos++;
@@ -499,7 +505,6 @@ const consumeLessThan = (input, pos, callbacks) => {
 	return pos + 1;
 };
 
-/** @type {CharHandler} */
 const consumeAt = (input, pos, callbacks) => {
 	const start = pos;
 	pos++;
@@ -513,6 +518,25 @@ const consumeAt = (input, pos, callbacks) => {
 	return pos;
 };
 
+/** @type {CharHandler} */
+const consumeReverseSolidus = (input, pos, callbacks) => {
+	const start = pos;
+	pos++;
+
+	// If the input stream starts with a valid escape, reconsume the current input code point, consume an ident-like token, and return it.
+	if (
+		_isTwoCodePointsAreValidEscape(
+			input.charCodeAt(start),
+			input.charCodeAt(pos)
+		)
+	) {
+		return consumeOtherIdentifier(input, pos - 1, callbacks);
+	}
+
+	// Otherwise, this is a parse error. Return a <delim-token> with its value set to the current input code point.
+	return pos;
+};
+
 const CHAR_MAP = Array.from({ length: 0x80 }, (_, cc) => {
 	// https://drafts.csswg.org/css-syntax/#consume-token
 	switch (cc) {
@@ -558,6 +582,8 @@ const CHAR_MAP = Array.from({ length: 0x80 }, (_, cc) => {
 			return consumeLessThan;
 		case CC_AT_SIGN:
 			return consumeAt;
+		case CC_REVERSE_SOLIDUS:
+			return consumeReverseSolidus;
 		case CC_LOWER_U:
 		case CC_UPPER_U:
 			return consumePotentialUrl;

test/__snapshots__/ConfigTestCases.basictest.js.snap

@@ -136,7 +136,11 @@ Object {
   "a19": " url('#line-marker')",
   "a190": " image-set(url(img.09a1a1112c577c279435.png)1x)",
   "a191": " image-set(url(img.09a1a1112c577c279435.png)1x/* test*/,/* test*/url(img.09a1a1112c577c279435.png)2x)",
+  "a197": " \\\\u\\\\r\\\\l(img.09a1a1112c577c279435.png)",
+  "a198": " \\\\image-\\\\set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
+  "a199": " \\\\-webk\\\\it-image-set(url(img.09a1a1112c577c279435.png)1x)",
   "a2": " url(img.09a1a1112c577c279435.png)",
+  "a200": "-webkit-image-set(url(img.09a1a1112c577c279435.png)1x)",
   "a22": " \\"do not use url(path)\\"",
   "a23": " 'do not \\"use\\" url(path)'",
   "a24": " -webkit-image-set(url(img1x.09a1a1112c577c279435.png) 1x, url(img2x.09a1a1112c577c279435.png) 2x)

test/configCases/css/urls/spacing.css

@@ -592,3 +592,10 @@ div {
 		}
 	}
 }
+
+div {
+	a197: \u\r\l("img.png");
+	a198: \image-\set("img.png"1x,"img.png"2x,"img.png"3x);
+	a199: \-webk\it-image-set("img.png"1x);
+	a200:-webkit-image-set("img.png"1x);
+}