JSX: Allow for two levels of nesting inside JSX tags. Fix #1408

PrismJS · Apr 27, 2018 · f1cd7c5 · f1cd7c5
1 parent a349c0c
commit f1cd7c5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/components/prism-jsx.js b/components/prism-jsx.js
@@ -3,7 +3,7 @@
 var javascript = Prism.util.clone(Prism.languages.javascript);
 
 Prism.languages.jsx = Prism.languages.extend('markup', javascript);
-Prism.languages.jsx.tag.pattern= /<\/?[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{[^}]*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?>/i;
+Prism.languages.jsx.tag.pattern= /<\/?[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?>/i;
 
 Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
 
@@ -19,8 +19,8 @@ Prism.languages.insertBefore('inside', 'attr-name', {
 
 Prism.languages.insertBefore('inside', 'attr-value',{
 	'script': {
-		// Allow for one level of nesting
-		pattern: /=(\{(?:\{[^}]*\}|[^}])+\})/i,
+		// Allow for two levels of nesting
+		pattern: /=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,
 		inside: {
 			'script-punctuation': {
 				pattern: /^=(?={)/,

diff --git a/components/prism-jsx.min.js b/components/prism-jsx.min.js
diff --git a/tests/languages/jsx/issue1408.test b/tests/languages/jsx/issue1408.test
@@ -0,0 +1,36 @@
+<div style={{ marginLeft: `${sidePanelWidth}px` }}>
+
+----------------------------------------------------
+
+[
+	["tag", [
+		["tag", [
+			["punctuation", "<"],
+			"div"
+		]],
+		["attr-name", ["style"]],
+		["script", [
+			["script-punctuation", "="],
+			["punctuation", "{"],
+			["punctuation", "{"],
+			" marginLeft",
+			["punctuation", ":"],
+			["template-string", [
+				["string", "`"],
+				["interpolation", [
+					["interpolation-punctuation", "${"],
+					"sidePanelWidth",
+					["interpolation-punctuation", "}"]
+				]],
+				["string", "px`"]
+			]],
+			["punctuation", "}"],
+			["punctuation", "}"]
+		]],
+		["punctuation", ">"]
+	]]
+]
+
+----------------------------------------------------
+
+Checks for template string with interpolation inside object inside JSX tag. See #1408