Skip to content

Commit a2d445d

Browse files
RunDevelopmentRunDevelopment
authored
CSS: Selectors can contain any string (#1638)
This fixes that certain attribute value strings break the selector pattern.
1 parent 878ef29 commit a2d445d

File tree

4 files changed

+109
-82
lines changed

4 files changed

+109
-82
lines changed

‎components/prism-css.js

+47-40
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,51 @@
1-
Prism.languages.css = {
2-
'comment': /\/\*[\s\S]*?\*\//,
3-
'atrule': {
4-
pattern: /@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,
5-
inside: {
6-
'rule': /@[\w-]+/
7-
// See rest below
8-
}
9-
},
10-
'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
11-
'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
12-
'string': {
13-
pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
14-
greedy: true
15-
},
16-
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
17-
'important': /!important\b/i,
18-
'function': /[-a-z0-9]+(?=\()/i,
19-
'punctuation': /[(){};:,]/
20-
};
1+
(function (Prism) {
212

22-
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
3+
var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
234

24-
if (Prism.languages.markup) {
25-
Prism.languages.markup.tag.addInlined('style', 'css');
26-
27-
Prism.languages.insertBefore('inside', 'attr-value', {
28-
'style-attr': {
29-
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
5+
Prism.languages.css = {
6+
'comment': /\/\*[\s\S]*?\*\//,
7+
'atrule': {
8+
pattern: /@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,
309
inside: {
31-
'attr-name': {
32-
pattern: /^\s*style/i,
33-
inside: Prism.languages.markup.tag.inside
10+
'rule': /@[\w-]+/
11+
// See rest below
12+
}
13+
},
14+
'url': RegExp('url\\((?:' + string.source + '|.*?)\\)', 'i'),
15+
'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),
16+
'string': {
17+
pattern: string,
18+
greedy: true
19+
},
20+
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
21+
'important': /!important\b/i,
22+
'function': /[-a-z0-9]+(?=\()/i,
23+
'punctuation': /[(){};:,]/
24+
};
25+
26+
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
27+
28+
var markup = Prism.languages.markup;
29+
if (markup) {
30+
markup.tag.addInlined('style', 'css');
31+
32+
Prism.languages.insertBefore('inside', 'attr-value', {
33+
'style-attr': {
34+
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
35+
inside: {
36+
'attr-name': {
37+
pattern: /^\s*style/i,
38+
inside: markup.tag.inside
39+
},
40+
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
41+
'attr-value': {
42+
pattern: /.+/i,
43+
inside: Prism.languages.css
44+
}
3445
},
35-
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
36-
'attr-value': {
37-
pattern: /.+/i,
38-
inside: Prism.languages.css
39-
}
40-
},
41-
alias: 'language-css'
42-
}
43-
}, Prism.languages.markup.tag);
44-
}
46+
alias: 'language-css'
47+
}
48+
}, markup.tag);
49+
}
50+
51+
}(Prism));

‎components/prism-css.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎prism.js

+47-40
Original file line numberDiff line numberDiff line change
@@ -668,50 +668,57 @@ Prism.languages.svg = Prism.languages.markup;
668668
Begin prism-css.js
669669
********************************************** */
670670

671-
Prism.languages.css = {
672-
'comment': /\/\*[\s\S]*?\*\//,
673-
'atrule': {
674-
pattern: /@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,
675-
inside: {
676-
'rule': /@[\w-]+/
677-
// See rest below
678-
}
679-
},
680-
'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
681-
'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
682-
'string': {
683-
pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
684-
greedy: true
685-
},
686-
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
687-
'important': /!important\b/i,
688-
'function': /[-a-z0-9]+(?=\()/i,
689-
'punctuation': /[(){};:,]/
690-
};
671+
(function (Prism) {
691672

692-
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
673+
var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
693674

694-
if (Prism.languages.markup) {
695-
Prism.languages.markup.tag.addInlined('style', 'css');
696-
697-
Prism.languages.insertBefore('inside', 'attr-value', {
698-
'style-attr': {
699-
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
675+
Prism.languages.css = {
676+
'comment': /\/\*[\s\S]*?\*\//,
677+
'atrule': {
678+
pattern: /@[\w-]+?[\s\S]*?(?:;|(?=\s*\{))/i,
700679
inside: {
701-
'attr-name': {
702-
pattern: /^\s*style/i,
703-
inside: Prism.languages.markup.tag.inside
680+
'rule': /@[\w-]+/
681+
// See rest below
682+
}
683+
},
684+
'url': RegExp('url\\((?:' + string.source + '|.*?)\\)', 'i'),
685+
'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),
686+
'string': {
687+
pattern: string,
688+
greedy: true
689+
},
690+
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
691+
'important': /!important\b/i,
692+
'function': /[-a-z0-9]+(?=\()/i,
693+
'punctuation': /[(){};:,]/
694+
};
695+
696+
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
697+
698+
var markup = Prism.languages.markup;
699+
if (markup) {
700+
markup.tag.addInlined('style', 'css');
701+
702+
Prism.languages.insertBefore('inside', 'attr-value', {
703+
'style-attr': {
704+
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
705+
inside: {
706+
'attr-name': {
707+
pattern: /^\s*style/i,
708+
inside: markup.tag.inside
709+
},
710+
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
711+
'attr-value': {
712+
pattern: /.+/i,
713+
inside: Prism.languages.css
714+
}
704715
},
705-
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
706-
'attr-value': {
707-
pattern: /.+/i,
708-
inside: Prism.languages.css
709-
}
710-
},
711-
alias: 'language-css'
712-
}
713-
}, Prism.languages.markup.tag);
714-
}
716+
alias: 'language-css'
717+
}
718+
}, markup.tag);
719+
}
720+
721+
}(Prism));
715722

716723

717724
/* **********************************************

‎tests/languages/css/selector_feature.test

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
foo{
2+
23
foo + bar {
4+
35
foo:first-child:hover {
6+
47
* {
8+
59
foo,
610
bar{
711

12+
[foo="{\"}"] {
13+
814
----------------------------------------------------
915

1016
[
1117
["selector", "foo"],
1218
["punctuation", "{"],
19+
1320
["selector", "foo + bar"],
1421
["punctuation", "{"],
22+
1523
["selector", "foo:first-child:hover"],
1624
["punctuation", "{"],
25+
1726
["selector", "*"],
1827
["punctuation", "{"],
28+
1929
["selector", "foo,\r\nbar"],
30+
["punctuation", "{"],
31+
32+
["selector", "[foo=\"{\\\"}\"]"],
2033
["punctuation", "{"]
2134
]
2235

2336
----------------------------------------------------
2437

25-
Checks for single-line and multi-line selectors.
38+
Checks for single-line and multi-line selectors.

0 commit comments

Comments
 (0)