React component tags are styled as classes in JSX (#1519)

The PR adds a class-name alias to all the tags of React components. Tags which start with an uppercase letter are considered React components. HTML tags remain unchanged. Fixes #1518.
PrismJS · Aug 20, 2018 · 3e1a9a3 · 3e1a9a3
1 parent c40f604
commit 3e1a9a3
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 19 deletions.
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
@@ -7,6 +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.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/issue1235.test b/tests/languages/jsx/issue1235.test
@@ -6,7 +6,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Child"
+			["class-name", "Child"]
 		]],
 		["attr-name", ["options"]],
 		["script", [
@@ -26,4 +26,4 @@
 ----------------------------------------------------
 
 Checks that attribute can contain an simple object.
-See #1235.
+See #1235.
diff --git a/tests/languages/jsx/issue1236.test b/tests/languages/jsx/issue1236.test
@@ -6,7 +6,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Child"
+			["class-name", "Child"]
 		]],
 		["spread", [
 			["punctuation", "{"],
@@ -23,4 +23,4 @@
 ----------------------------------------------------
 
 Checks that spread can contain an object property.
-See #1236.
+See #1236.
diff --git a/tests/languages/jsx/issue1335.test b/tests/languages/jsx/issue1335.test
@@ -14,7 +14,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Button"
+			["class-name", "Button"]
 		]],
 		["attr-name", ["onClick"]],
 		["script", [
@@ -41,7 +41,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Component"
+			["class-name", "Component"]
 		]],
 		["attr-name", ["data"]],
 		["script", [
@@ -76,7 +76,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Component"
+			["class-name", "Component"]
 		]],
 		["attr-name", ["title"]],
 		["script", [
@@ -98,7 +98,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"Component"
+			["class-name", "Component"]
 		]],
 		["attr-name", ["title"]],
 		["script", [
@@ -121,4 +121,4 @@
 
 ----------------------------------------------------
 
-Handles nested pairs of curly braces inside tag attribute. See #1335
+Handles nested pairs of curly braces inside tag attribute. See #1335
diff --git a/tests/languages/jsx/issue1342.test b/tests/languages/jsx/issue1342.test
@@ -6,7 +6,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"CodeView"
+			["class-name", "CodeView"]
 		]],
 		["attr-name", ["title"]],
 		["script", [
@@ -42,12 +42,12 @@
 	["tag", [
 		["tag", [
 			["punctuation", "</"],
-			"CodeView"
+			["class-name", "CodeView"]
 		]],
 		["punctuation", ">"]
 	]]
 ]
 
 ----------------------------------------------------
 
-Checks for nested tag with JSX inside another tag with JSX. See #1342
+Checks for nested tag with JSX inside another tag with JSX. See #1342
diff --git a/tests/languages/jsx/issue1364.test b/tests/languages/jsx/issue1364.test
@@ -6,7 +6,7 @@
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"CodeView"
+			["class-name", "CodeView"]
 		]],
 		["attr-name", ["title"]],
 		["script", [
@@ -22,4 +22,4 @@
 
 ----------------------------------------------------
 
-Checks for empty objects in JSX. See #1364
+Checks for empty objects in JSX. See #1364
diff --git a/tests/languages/jsx/tag_feature.test b/tests/languages/jsx/tag_feature.test
@@ -31,7 +31,7 @@ var myElement = <MyComponent someProperty={true} />;
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"MyComponent"
+			["class-name", "MyComponent"]
 		]],
 		["attr-name", ["someProperty"]],
 		["script", [
@@ -80,4 +80,4 @@ var myElement = <MyComponent someProperty={true} />;
 
 ----------------------------------------------------
 
-Checks for JSX tags.
+Checks for JSX tags.
diff --git a/tests/languages/tsx/tag_feature.test b/tests/languages/tsx/tag_feature.test
@@ -35,7 +35,7 @@ class Test extends Component {
 	["tag", [
 		["tag", [
 			["punctuation", "<"],
-			"MyComponent"
+			["class-name", "MyComponent"]
 		]],
 		["attr-name", ["someProperty"]],
 		["script", [
@@ -102,4 +102,4 @@ class Test extends Component {
 
 ----------------------------------------------------
 
-Checks for TSX tags.
+Checks for TSX tags.