CSS: Fixed @-rules not accounting for strings (#3438)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
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", ";"]
]]
]