Support JSX/TSX class-name with dot (#1725)

Adds class-name highlighting for JSX/TSX tag names containing dots.
PrismJS · Feb 12, 2019 · 4362e42 · 4362e42
1 parent 5311ca3
commit 4362e42
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
@@ -7,7 +7,7 @@ Prism.languages.jsx.tag.pattern= /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|'
 
 Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
 Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
-Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*$/;
+Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
 
 Prism.languages.insertBefore('inside', 'attr-name', {
 	'spread': {

diff --git a/components/prism-jsx.min.js b/components/prism-jsx.min.js
diff --git a/tests/languages/jsx/tag_feature.test b/tests/languages/jsx/tag_feature.test
@@ -2,6 +2,7 @@ var myDivElement = <div className="foo" />;
 var myElement = <MyComponent someProperty={true} />;
 <div {...foo}></div>
 <> </>
+<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
 
 ----------------------------------------------------
 
@@ -75,6 +76,27 @@ var myElement = <MyComponent someProperty={true} />;
 			["punctuation", "</"]
 		]],
 		["punctuation", ">"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			["class-name", "Tree.TreeNode.Item"]
+		]],
+		["attr-name", ["leaf"]],
+		["script", [
+			 ["script-punctuation", "="],
+			 ["punctuation", "{"],
+			 ["boolean", "true"],
+			 ["punctuation", "}"]
+		]],
+		["punctuation", ">"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "</"],
+			["class-name", "Tree.TreeNode.Item"]
+		]],
+		["punctuation", ">"]
 	]]
 ]
 

diff --git a/tests/languages/tsx/tag_feature.test b/tests/languages/tsx/tag_feature.test
@@ -1,6 +1,7 @@
 var myDivElement = <div className="foo" />;
 var myElement = <MyComponent someProperty={true} />;
 <div {...foo} />
+<Tree.TreeNode.Item leaf={true}></Tree.TreeNode.Item>
 class Test extends Component {
 	render() {
 		return <p onClick={this.clickHandler}>Hello world.</p>;
@@ -61,6 +62,28 @@ class Test extends Component {
 		["punctuation", "/>"]
 	]],
 
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			["class-name", "Tree.TreeNode.Item"]
+		]],
+		["attr-name", ["leaf"]],
+		["script", [
+			 ["script-punctuation", "="],
+			 ["punctuation", "{"],
+			 ["boolean", "true"],
+			 ["punctuation", "}"]
+		]],
+		["punctuation", ">"]
+	]],
+	["tag", [
+		["tag", [
+			["punctuation", "</"],
+			["class-name", "Tree.TreeNode.Item"]
+		]],
+		["punctuation", ">"]
+	]],
+
 	["keyword",  "class"],
 	["class-name", ["Test"]],
 	["keyword", "extends"],