Skip to content

Commit 4362e42

Browse files
RexSkzRunDevelopment
authored andcommitted
Support JSX/TSX class-name with dot (#1725)
Adds class-name highlighting for JSX/TSX tag names containing dots.
1 parent 5311ca3 commit 4362e42

File tree

4 files changed

+47
-2
lines changed

4 files changed

+47
-2
lines changed

components/prism-jsx.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Prism.languages.jsx.tag.pattern= /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|'
77

88
Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
99
Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
10-
Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*$/;
10+
Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
1111

1212
Prism.languages.insertBefore('inside', 'attr-name', {
1313
'spread': {

components/prism-jsx.min.js

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

tests/languages/jsx/tag_feature.test

+22
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ var myDivElement = <div className="foo" />;
22
var myElement = <MyComponent someProperty={true} />;
33
<div {...foo}></div>
44
<> </>
5+
<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
56

67
----------------------------------------------------
78

@@ -75,6 +76,27 @@ var myElement = <MyComponent someProperty={true} />;
7576
["punctuation", "</"]
7677
]],
7778
["punctuation", ">"]
79+
]],
80+
["tag", [
81+
["tag", [
82+
["punctuation", "<"],
83+
["class-name", "Tree.TreeNode.Item"]
84+
]],
85+
["attr-name", ["leaf"]],
86+
["script", [
87+
["script-punctuation", "="],
88+
["punctuation", "{"],
89+
["boolean", "true"],
90+
["punctuation", "}"]
91+
]],
92+
["punctuation", ">"]
93+
]],
94+
["tag", [
95+
["tag", [
96+
["punctuation", "</"],
97+
["class-name", "Tree.TreeNode.Item"]
98+
]],
99+
["punctuation", ">"]
78100
]]
79101
]
80102

tests/languages/tsx/tag_feature.test

+23
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
var myDivElement = <div className="foo" />;
22
var myElement = <MyComponent someProperty={true} />;
33
<div {...foo} />
4+
<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
45
class Test extends Component {
56
render() {
67
return <p onClick={this.clickHandler}>Hello world.</p>;
@@ -61,6 +62,28 @@ class Test extends Component {
6162
["punctuation", "/>"]
6263
]],
6364

65+
["tag", [
66+
["tag", [
67+
["punctuation", "<"],
68+
["class-name", "Tree.TreeNode.Item"]
69+
]],
70+
["attr-name", ["leaf"]],
71+
["script", [
72+
["script-punctuation", "="],
73+
["punctuation", "{"],
74+
["boolean", "true"],
75+
["punctuation", "}"]
76+
]],
77+
["punctuation", ">"]
78+
]],
79+
["tag", [
80+
["tag", [
81+
["punctuation", "</"],
82+
["class-name", "Tree.TreeNode.Item"]
83+
]],
84+
["punctuation", ">"]
85+
]],
86+
6487
["keyword", "class"],
6588
["class-name", ["Test"]],
6689
["keyword", "extends"],

0 commit comments

Comments
 (0)