Skip to content

Commit b04cbaf

Browse files
RunDevelopmentRunDevelopment
authored
CSS: Better HTML style attribute tokenization (#2569)
1 parent 73f81c8 commit b04cbaf

File tree

6 files changed

+121
-89
lines changed

6 files changed

+121
-89
lines changed

‎components/prism-css.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,29 @@
5252

5353
Prism.languages.insertBefore('inside', 'attr-value', {
5454
'style-attr': {
55-
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
55+
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
56+
lookbehind: true,
5657
inside: {
57-
'attr-name': {
58-
pattern: /^\s*style/i,
59-
inside: markup.tag.inside
60-
},
61-
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
6258
'attr-value': {
63-
pattern: /.+/i,
64-
inside: Prism.languages.css
65-
}
66-
},
67-
alias: 'language-css'
59+
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
60+
inside: {
61+
'style': {
62+
pattern: /(["'])[\s\S]+(?=["']$)/,
63+
lookbehind: true,
64+
alias: 'language-css',
65+
inside: Prism.languages.css
66+
},
67+
'punctuation': [
68+
{
69+
pattern: /^=/,
70+
alias: 'attr-equals'
71+
},
72+
/"|'/
73+
]
74+
}
75+
},
76+
'attr-name': /^style/i
77+
}
6878
}
6979
}, markup.tag);
7080
}

‎components/prism-css.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎prism.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1384,19 +1384,29 @@ Prism.languages.rss = Prism.languages.xml;
13841384

13851385
Prism.languages.insertBefore('inside', 'attr-value', {
13861386
'style-attr': {
1387-
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
1387+
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
1388+
lookbehind: true,
13881389
inside: {
1389-
'attr-name': {
1390-
pattern: /^\s*style/i,
1391-
inside: markup.tag.inside
1392-
},
1393-
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
13941390
'attr-value': {
1395-
pattern: /.+/i,
1396-
inside: Prism.languages.css
1397-
}
1398-
},
1399-
alias: 'language-css'
1391+
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
1392+
inside: {
1393+
'style': {
1394+
pattern: /(["'])[\s\S]+(?=["']$)/,
1395+
lookbehind: true,
1396+
alias: 'language-css',
1397+
inside: Prism.languages.css
1398+
},
1399+
'punctuation': [
1400+
{
1401+
pattern: /^=/,
1402+
alias: 'attr-equals'
1403+
},
1404+
/"|'/
1405+
]
1406+
}
1407+
},
1408+
'attr-name': /^style/i
1409+
}
14001410
}
14011411
}, markup.tag);
14021412
}

‎tests/languages/markup!+css/css_inclusion.test‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,18 @@ foo {
9898
"foo"
9999
]],
100100
["style-attr", [
101-
["attr-name", [
102-
["attr-name", ["style"]]
103-
]],
104-
["punctuation", "=\""],
101+
["attr-name", "style"],
105102
["attr-value", [
106-
["property", "bar"],
107-
["punctuation", ":"],
108-
"baz",
109-
["punctuation", ";"]
110-
]],
111-
["punctuation", "\""]
103+
["punctuation", "="],
104+
["punctuation", "\""],
105+
["style", [
106+
["property", "bar"],
107+
["punctuation", ":"],
108+
"baz",
109+
["punctuation", ";"]
110+
]],
111+
["punctuation", "\""]
112+
]]
112113
]],
113114
["punctuation", ">"]
114115
]]

‎tests/languages/markup+css+wiki/table-tag_feature.test‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,18 @@ baz
6868
["punctuation", "!"],
6969
["table-tag", [
7070
["style-attr", [
71-
["attr-name", [["attr-name", ["style"]]]],
72-
["punctuation", "=\""],
71+
["attr-name", "style"],
7372
["attr-value", [
74-
["property", "text-align"],
75-
["punctuation", ":"],
76-
"left",
77-
["punctuation", ";"]
78-
]],
79-
["punctuation", "\""]
73+
["punctuation", "="],
74+
["punctuation", "\""],
75+
["style", [
76+
["property", "text-align"],
77+
["punctuation", ":"],
78+
"left",
79+
["punctuation", ";"]
80+
]],
81+
["punctuation", "\""]
82+
]]
8083
]],
8184
["table-bar", "|"]
8285
]], " Foo\r\n",
@@ -92,30 +95,36 @@ baz
9295
["punctuation", "!"],
9396
["table-tag", [
9497
["style-attr", [
95-
["attr-name", [["attr-name", ["style"]]]],
96-
["punctuation", "=\""],
98+
["attr-name", "style"],
9799
["attr-value", [
98-
["property", "color"],
99-
["punctuation", ":"],
100-
"red",
101-
["punctuation", ";"]
102-
]],
103-
["punctuation", "\""]
100+
["punctuation", "="],
101+
["punctuation", "\""],
102+
["style", [
103+
["property", "color"],
104+
["punctuation", ":"],
105+
"red",
106+
["punctuation", ";"]
107+
]],
108+
["punctuation", "\""]
109+
]]
104110
]],
105111
["table-bar", "|"]
106112
]], " Foo ",
107113
["punctuation", "!!"],
108114
["table-tag", [
109115
["style-attr", [
110-
["attr-name", [["attr-name", ["style"]]]],
111-
["punctuation", "=\""],
116+
["attr-name", "style"],
112117
["attr-value", [
113-
["property", "color"],
114-
["punctuation", ":"],
115-
"blue",
116-
["punctuation", ";"]
117-
]],
118-
["punctuation", "\""]
118+
["punctuation", "="],
119+
["punctuation", "\""],
120+
["style", [
121+
["property", "color"],
122+
["punctuation", ":"],
123+
"blue",
124+
["punctuation", ";"]
125+
]],
126+
["punctuation", "\""]
127+
]]
119128
]],
120129
["table-bar", "|"]
121130
]], " Bar ",
@@ -125,15 +134,18 @@ baz
125134
["punctuation", "||"],
126135
["table-tag", [
127136
["style-attr", [
128-
["attr-name", [["attr-name", ["style"]]]],
129-
["punctuation", "=\""],
137+
["attr-name", "style"],
130138
["attr-value", [
131-
["property", "font-weight"],
132-
["punctuation", ":"],
133-
"bold",
134-
["punctuation", ";"]
135-
]],
136-
["punctuation", "\""]
139+
["punctuation", "="],
140+
["punctuation", "\""],
141+
["style", [
142+
["property", "font-weight"],
143+
["punctuation", ":"],
144+
"bold",
145+
["punctuation", ";"]
146+
]],
147+
["punctuation", "\""]
148+
]]
137149
]],
138150
["table-bar", "|"]
139151
]], " bar ",
@@ -144,4 +156,4 @@ baz
144156
----------------------------------------------------
145157

146158
Checks for tables and cell attributes.
147-
Note: Markup is loaded before CSS so that inline styles are added into grammar.
159+
Note: Markup is loaded before CSS so that inline styles are added into grammar.

‎tests/languages/php!+css-extras/issue2008.test‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,30 @@
99
"img"
1010
]],
1111
["style-attr", [
12-
["attr-name", [
13-
["attr-name", [
14-
"style"
15-
]]
16-
]],
17-
["punctuation", "=\""],
12+
["attr-name", "style"],
1813
["attr-value", [
19-
["property", "width"],
20-
["punctuation", ":"],
21-
["php", [
22-
["delimiter", "<?php"],
23-
["keyword", "echo"],
24-
["punctuation", "("],
25-
["number", "80"],
26-
["operator", "/"],
27-
["function", "count"],
28-
["punctuation", "("],
29-
["variable", "$images"],
30-
["punctuation", ")"],
31-
["punctuation", ")"],
32-
["delimiter", "?>"]
14+
["punctuation", "="],
15+
["punctuation", "\""],
16+
["style", [
17+
["property", "width"],
18+
["punctuation", ":"],
19+
["php", [
20+
["delimiter", "<?php"],
21+
["keyword", "echo"],
22+
["punctuation", "("],
23+
["number", "80"],
24+
["operator", "/"],
25+
["function", "count"],
26+
["punctuation", "("],
27+
["variable", "$images"],
28+
["punctuation", ")"],
29+
["punctuation", ")"],
30+
["delimiter", "?>"]
31+
]],
32+
"%"
3333
]],
34-
"%"
35-
]],
36-
["punctuation", "\""]
34+
["punctuation", "\""]
35+
]]
3736
]],
3837
["punctuation", "/>"]
3938
]]

0 commit comments

Comments
 (0)