CSS: Improved url and added keywords (#2432)

PrismJS · Jun 27, 2020 · 964de5a · 964de5a
1 parent 22eb5ca
commit 964de5a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 13 deletions.
diff --git a/components/prism-css.js b/components/prism-css.js
@@ -12,16 +12,25 @@
 					pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
 					lookbehind: true,
 					alias: 'selector'
+				},
+				'keyword': {
+					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+					lookbehind: true
 				}
 				// See rest below
 			}
 		},
 		'url': {
-			pattern: RegExp('url\\((?:' + string.source + '|[^\n\r()]*)\\)', 'i'),
+			// https://drafts.csswg.org/css-values-3/#urls
+			pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
 			greedy: true,
 			inside: {
 				'function': /^url/i,
-				'punctuation': /^\(|\)$/
+				'punctuation': /^\(|\)$/,
+				'string': {
+					pattern: RegExp('^' + string.source + '$'),
+					alias: 'url'
+				}
 			}
 		},
 		'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),

diff --git a/components/prism-css.min.js b/components/prism-css.min.js
diff --git a/prism.js b/prism.js
@@ -1329,16 +1329,25 @@ Prism.languages.rss = Prism.languages.xml;
 					pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
 					lookbehind: true,
 					alias: 'selector'
+				},
+				'keyword': {
+					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+					lookbehind: true
 				}
 				// See rest below
 			}
 		},
 		'url': {
-			pattern: RegExp('url\\((?:' + string.source + '|[^\n\r()]*)\\)', 'i'),
+			// https://drafts.csswg.org/css-values-3/#urls
+			pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
 			greedy: true,
 			inside: {
 				'function': /^url/i,
-				'punctuation': /^\(|\)$/
+				'punctuation': /^\(|\)$/,
+				'string': {
+					pattern: RegExp('^' + string.source + '$'),
+					alias: 'url'
+				}
 			}
 		},
 		'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),

diff --git a/tests/languages/css/atrule_feature.test b/tests/languages/css/atrule_feature.test
@@ -31,7 +31,7 @@
 		["punctuation", ":"],
 		" 640px",
 		["punctuation", ")"],
-		" and ",
+		["keyword", "and"],
 		["punctuation", "("],
 		["property", "min-height"],
 		["punctuation", ":"],
@@ -47,7 +47,7 @@
 		["punctuation", ":"],
 		" 50vmax",
 		["punctuation", ")"],
-		"\r\n\tor ",
+		["keyword", "or"],
 		["punctuation", "("],
 		["property", "top"],
 		["punctuation", ":"],

diff --git a/tests/languages/css/url_feature.test b/tests/languages/css/url_feature.test
@@ -1,4 +1,5 @@
 url(foo.png)
+url(close\)parens)
 url('foo.png')
 url("foo.png")
 url('foo\
@@ -21,33 +22,39 @@ bar.png")
 	["url", [
 		["function", "url"],
 		["punctuation", "("],
-		"'foo.png'",
+		"close\\)parens",
 		["punctuation", ")"]
 	]],
 	["url", [
 		["function", "url"],
 		["punctuation", "("],
-		"\"foo.png\"",
+		["string", "'foo.png'"],
 		["punctuation", ")"]
 	]],
 	["url", [
 		["function", "url"],
 		["punctuation", "("],
-		"'foo\\\r\nbar.png'",
+		["string", "\"foo.png\""],
 		["punctuation", ")"]
 	]],
 	["url", [
 		["function", "url"],
 		["punctuation", "("],
-		"\"foo\\\r\nbar.png\"",
+		["string", "'foo\\\r\nbar.png'"],
+		["punctuation", ")"]
+	]],
+	["url", [
+		["function", "url"],
+		["punctuation", "("],
+		["string", "\"foo\\\r\nbar.png\""],
 		["punctuation", ")"]
 	]],
 	["atrule", [
 		["rule", "@import"],
 		["url", [
 			["function", "url"],
 			["punctuation", "("],
-			"\"https://cdn.jsdelivr.net/npm/prismj1.19.0/themes/prism-dark.css\"",
+			["string", "\"https://cdn.jsdelivr.net/npm/prismj1.19.0/themes/prism-dark.css\""],
 			["punctuation", ")"]
 		]],
 		["punctuation", ";"]
@@ -57,7 +64,7 @@ bar.png")
 		["url", [
 			["function", "url"],
 			["punctuation", "("],
-			"\"https://cdn.jsdelivr.net/npm/prismjs/themes/prism-dark.css\"",
+			["string", "\"https://cdn.jsdelivr.net/npm/prismjs/themes/prism-dark.css\""],
 			["punctuation", ")"]
 		]],
 		["punctuation", ";"]