Repository: PrismJS/prism (ts)

Issue:
Bug: Broken URL string
**Information**
- Language: CSS
- Plugins: none

**Description**
The URL string is highlighted incorrectly.

Expected behavior:

<img width="946" alt="Screen Shot 2022-04-19 at 11 57 05 AM" src="https://user-images.githubusercontent.com/34835685/163968386-f18a0208-60d1-4db4-8aef-f9ec7ddb5d19.png">

Actual behavior:

<img width="985" alt="Screen Shot 2022-04-19 at 11 56 10 AM" src="https://user-images.githubusercontent.com/34835685/163968970-c53ae8a2-2c70-4021-a7b0-9f9e19cf39a3.png">

**Code snippet**

[Test page](https://prismjs.com/test.html#language=css&text=%40import%20url('https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DInter%3Awght%40300%3B400%3B500%3B600%3B700%26display%3Dswap')%3B%0A)

<details>
<summary>The code being highlighted incorrectly.</summary>

```
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
```

</details>


Pull request description:
CSS: Fixed @-rules not accounting for strings
This fixes #3437.

Patch:
diff --git a/components/prism-css.js b/components/prism-css.js
index f1f32fed..80d3463c 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 1d3fc4f9..3a9b628e 100644
--- a/components/prism-css.min.js
+++ b/components/prism-css.min.js
@@ -1,1 +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 98835b58..aa7302c9 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': {


Test patch:
diff --git a/tests/languages/css/atrule_feature.test b/tests/languages/css/atrule_feature.test
index adb84ab0..d5ca5d2c 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", ";"]
 	]]
 ]