Commit 0d4b6cb64e72a172fc64423c04aed4ac8b59cd0b

Michael Schmidt 2022-04-20T20:22:29

CSS: Fixed @-rules not accounting for strings (#3438)

diff --git a/components/prism-css.js b/components/prism-css.js
index f1f32fe..80d3463 100644
--- a/components/prism-css.js
+++ b/components/prism-css.js
@@ -5,7 +5,7 @@
 	Prism.languages.css = {
 		'comment': /\/\*[\s\S]*?\*\//,
 		'atrule': {
-			pattern: /@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,
+			pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + string.source + ')*?' + /(?:;|(?=\s*\{))/.source),
 			inside: {
 				'rule': /^@[\w-]+/,
 				'selector-function-argument': {
diff --git a/components/prism-css.min.js b/components/prism-css.min.js
index 1d3fc4f..3a9b628 100644
--- a/components/prism-css.min.js
+++ b/components/prism-css.min.js
@@ -1 +1 @@
-!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
\ No newline at end of file
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
\ No newline at end of file
diff --git a/prism.js b/prism.js
index 98835b5..aa7302c 100644
--- a/prism.js
+++ b/prism.js
@@ -1468,7 +1468,7 @@ Prism.languages.rss = Prism.languages.xml;
 	Prism.languages.css = {
 		'comment': /\/\*[\s\S]*?\*\//,
 		'atrule': {
-			pattern: /@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,
+			pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + string.source + ')*?' + /(?:;|(?=\s*\{))/.source),
 			inside: {
 				'rule': /^@[\w-]+/,
 				'selector-function-argument': {
diff --git a/tests/languages/css/atrule_feature.test b/tests/languages/css/atrule_feature.test
index adb84ab..d5ca5d2 100644
--- a/tests/languages/css/atrule_feature.test
+++ b/tests/languages/css/atrule_feature.test
@@ -4,6 +4,7 @@
 @supports (top: 50vmax)
 	or (top: 50vw) {}
 @main-color: red;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 ----------------------------------------------------
 
@@ -18,12 +19,14 @@
 		]],
 		["punctuation", ";"]
 	]],
+
 	["atrule", [
 		["rule", "@media"],
 		" print"
 	]],
 	["punctuation", "{"],
 	["punctuation", "}"],
+
 	["atrule", [
 		["rule", "@media"],
 		["punctuation", "("],
@@ -40,6 +43,7 @@
 	]],
 	["punctuation", "{"],
 	["punctuation", "}"],
+
 	["atrule", [
 		["rule", "@supports"],
 		["punctuation", "("],
@@ -47,6 +51,7 @@
 		["punctuation", ":"],
 		" 50vmax",
 		["punctuation", ")"],
+
 		["keyword", "or"],
 		["punctuation", "("],
 		["property", "top"],
@@ -56,11 +61,23 @@
 	]],
 	["punctuation", "{"],
 	["punctuation", "}"],
+
 	["atrule", [
 		["rule", "@main-color"],
 		["punctuation", ":"],
 		" red",
 		["punctuation", ";"]
+	]],
+
+	["atrule", [
+		["rule", "@import"],
+		["url", [
+			["function", "url"],
+			["punctuation", "("],
+			["string", "'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'"],
+			["punctuation", ")"]
+		]],
+		["punctuation", ";"]
 	]]
 ]