Skip to content

Commit

Permalink
CSS: Better HTML style attribute tokenization (#2569)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RunDevelopment
RunDevelopment authored Oct 13, 2020
1 parent 73f81c8 commit b04cbaf
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 89 deletions.
32 changes: 21 additions & 11 deletions components/prism-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,29 @@

Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
lookbehind: true,
inside: {
'attr-name': {
pattern: /^\s*style/i,
inside: markup.tag.inside
},
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
'attr-value': {
pattern: /.+/i,
inside: Prism.languages.css
}
},
alias: 'language-css'
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
inside: {
'style': {
pattern: /(["'])[\s\S]+(?=["']$)/,
lookbehind: true,
alias: 'language-css',
inside: Prism.languages.css
},
'punctuation': [
{
pattern: /^=/,
alias: 'attr-equals'
},
/"|'/
]
}
},
'attr-name': /^style/i
}
}
}, markup.tag);
}
Expand Down
2 changes: 1 addition & 1 deletion components/prism-css.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 21 additions & 11 deletions prism.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1384,19 +1384,29 @@ Prism.languages.rss = Prism.languages.xml;

Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
lookbehind: true,
inside: {
'attr-name': {
pattern: /^\s*style/i,
inside: markup.tag.inside
},
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
'attr-value': {
pattern: /.+/i,
inside: Prism.languages.css
}
},
alias: 'language-css'
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
inside: {
'style': {
pattern: /(["'])[\s\S]+(?=["']$)/,
lookbehind: true,
alias: 'language-css',
inside: Prism.languages.css
},
'punctuation': [
{
pattern: /^=/,
alias: 'attr-equals'
},
/"|'/
]
}
},
'attr-name': /^style/i
}
}
}, markup.tag);
}
Expand Down
21 changes: 11 additions & 10 deletions tests/languages/markup!+css/css_inclusion.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,17 +98,18 @@ foo {
"foo"
]],
["style-attr", [
["attr-name", [
["attr-name", ["style"]]
]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "bar"],
["punctuation", ":"],
"baz",
["punctuation", ";"]
]],
["punctuation", "\""]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "bar"],
["punctuation", ":"],
"baz",
["punctuation", ";"]
]],
["punctuation", "\""]
]]
]],
["punctuation", ">"]
]]
Expand Down
78 changes: 45 additions & 33 deletions tests/languages/markup+css+wiki/table-tag_feature.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,18 @@ baz
["punctuation", "!"],
["table-tag", [
["style-attr", [
["attr-name", [["attr-name", ["style"]]]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "text-align"],
["punctuation", ":"],
"left",
["punctuation", ";"]
]],
["punctuation", "\""]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "text-align"],
["punctuation", ":"],
"left",
["punctuation", ";"]
]],
["punctuation", "\""]
]]
]],
["table-bar", "|"]
]], " Foo\r\n",
Expand All @@ -92,30 +95,36 @@ baz
["punctuation", "!"],
["table-tag", [
["style-attr", [
["attr-name", [["attr-name", ["style"]]]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "color"],
["punctuation", ":"],
"red",
["punctuation", ";"]
]],
["punctuation", "\""]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "color"],
["punctuation", ":"],
"red",
["punctuation", ";"]
]],
["punctuation", "\""]
]]
]],
["table-bar", "|"]
]], " Foo ",
["punctuation", "!!"],
["table-tag", [
["style-attr", [
["attr-name", [["attr-name", ["style"]]]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "color"],
["punctuation", ":"],
"blue",
["punctuation", ";"]
]],
["punctuation", "\""]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "color"],
["punctuation", ":"],
"blue",
["punctuation", ";"]
]],
["punctuation", "\""]
]]
]],
["table-bar", "|"]
]], " Bar ",
Expand All @@ -125,15 +134,18 @@ baz
["punctuation", "||"],
["table-tag", [
["style-attr", [
["attr-name", [["attr-name", ["style"]]]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "font-weight"],
["punctuation", ":"],
"bold",
["punctuation", ";"]
]],
["punctuation", "\""]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "font-weight"],
["punctuation", ":"],
"bold",
["punctuation", ";"]
]],
["punctuation", "\""]
]]
]],
["table-bar", "|"]
]], " bar ",
Expand All @@ -144,4 +156,4 @@ baz
----------------------------------------------------

Checks for tables and cell attributes.
Note: Markup is loaded before CSS so that inline styles are added into grammar.
Note: Markup is loaded before CSS so that inline styles are added into grammar.
45 changes: 22 additions & 23 deletions tests/languages/php!+css-extras/issue2008.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,30 @@
"img"
]],
["style-attr", [
["attr-name", [
["attr-name", [
"style"
]]
]],
["punctuation", "=\""],
["attr-name", "style"],
["attr-value", [
["property", "width"],
["punctuation", ":"],
["php", [
["delimiter", "<?php"],
["keyword", "echo"],
["punctuation", "("],
["number", "80"],
["operator", "/"],
["function", "count"],
["punctuation", "("],
["variable", "$images"],
["punctuation", ")"],
["punctuation", ")"],
["delimiter", "?>"]
["punctuation", "="],
["punctuation", "\""],
["style", [
["property", "width"],
["punctuation", ":"],
["php", [
["delimiter", "<?php"],
["keyword", "echo"],
["punctuation", "("],
["number", "80"],
["operator", "/"],
["function", "count"],
["punctuation", "("],
["variable", "$images"],
["punctuation", ")"],
["punctuation", ")"],
["delimiter", "?>"]
]],
"%"
]],
"%"
]],
["punctuation", "\""]
["punctuation", "\""]
]]
]],
["punctuation", "/>"]
]]
Expand Down

0 comments on commit b04cbaf

Please sign in to comment.