[Fix] jsx-curly-brace-presence: disable disallowed JSX text chars c…

…heck in props Fixes #2694
jsx-eslint · Jul 12, 2020 · f0ff971 · f0ff971
1 parent 9630957
commit f0ff971
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js
@@ -100,11 +100,11 @@ module.exports = {
       return rawStringValue.replace(/\\/g, '\\\\');
     }
 
-    function needToEscapeCharacterForJSX(raw) {
+    function needToEscapeCharacterForJSX(raw, node) {
       return (
         containsBackslash(raw)
         || containsHTMLEntity(raw)
-        || containsDisallowedJSXTextChars(raw)
+        || (node.parent.type !== 'JSXAttribute' && containsDisallowedJSXTextChars(raw))
       );
     }
 
@@ -238,7 +238,7 @@ module.exports = {
             (JSXExpressionNode.parent.type === 'JSXAttribute' && !isWhiteSpaceLiteral(expression))
             || !isLiteralWithTrailingWhiteSpaces(expression)
           )
-          && !needToEscapeCharacterForJSX(expression.raw) && (
+          && !needToEscapeCharacterForJSX(expression.raw, JSXExpressionNode) && (
           jsxUtil.isJSX(JSXExpressionNode.parent)
           || !containsQuoteCharacters(expression.value)
         )
@@ -249,7 +249,7 @@ module.exports = {
           && expression.expressions.length === 0
           && expression.quasis[0].value.raw.indexOf('\n') === -1
           && !isStringWithTrailingWhiteSpaces(expression.quasis[0].value.raw)
-          && !needToEscapeCharacterForJSX(expression.quasis[0].value.raw) && (
+          && !needToEscapeCharacterForJSX(expression.quasis[0].value.raw, JSXExpressionNode) && (
           jsxUtil.isJSX(JSXExpressionNode.parent)
           || !containsQuoteCharacters(expression.quasis[0].value.cooked)
         )

diff --git a/tests/lib/rules/jsx-curly-brace-presence.js b/tests/lib/rules/jsx-curly-brace-presence.js
@@ -244,14 +244,6 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
       code: '<MyComponent>{"<Foo />"}</MyComponent>',
       options: ['never']
     },
-    {
-      code: '<MyComponent prop={"{ style: true }"}>bar</MyComponent>',
-      options: ['never']
-    },
-    {
-      code: '<MyComponent prop={"< style: true >"}>foo</MyComponent>',
-      options: ['never']
-    },
     {
       code: '<MyComponent prop={"Hello \\u1026 world"}>bar</MyComponent>',
       options: ['never']
@@ -800,6 +792,40 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
         {message: missingCurlyMessage}
       ],
       options: [{children: 'always'}]
+    },
+    {
+      code: `
+        <Box mb={'1rem'} />
+      `,
+      output: `
+        <Box mb="1rem" />
+      `,
+      errors: [
+        {message: unnecessaryCurlyMessage}
+      ],
+      options: [{props: 'never'}]
+    },
+    {
+      code: `
+        <Box mb={'1rem {}'} />
+      `,
+      output: `
+        <Box mb="1rem {}" />
+      `,
+      errors: [{message: unnecessaryCurlyMessage}],
+      options: ['never']
+    },
+    {
+      code: '<MyComponent prop={"{ style: true }"}>bar</MyComponent>',
+      output: '<MyComponent prop="{ style: true }">bar</MyComponent>',
+      errors: [{message: unnecessaryCurlyMessage}],
+      options: ['never']
+    },
+    {
+      code: '<MyComponent prop={"< style: true >"}>foo</MyComponent>',
+      output: '<MyComponent prop="< style: true >">foo</MyComponent>',
+      errors: [{message: unnecessaryCurlyMessage}],
+      options: ['never']
     }
   ]
 });