[fix]jsx-curly-brace-presence: report unnecessary curly braces with children on next line"

Author: vedadeepta

lib/rules/jsx-curly-brace-presence.js

@@ -205,10 +205,21 @@ module.exports = {
       );
     }
 
+    function isWhiteSpaceLiteral(node) {
+      return node.type && node.type === 'Literal' && node.value && !(/\S/.test(node.value));
+    }
+
+    function hasManyChildren(children) {
+      if (children.length === 1) return false;
+
+      const childrenExcludingWhitespaceLiteral = children.filter(child => !isWhiteSpaceLiteral(child));
+      return childrenExcludingWhitespaceLiteral.length !== 1;
+    }
+
     function shouldCheckForUnnecessaryCurly(parent, config) {
-      // If there are more than one JSX child, there is no need to check for
-      // unnecessary curly braces.
-      if (jsxUtil.isJSX(parent) && parent.children.length !== 1) {
+      // If there are more than one JSX child excluding white-space `Literal`,
+      // there is no need to check for unnecessary curly braces.
+      if (jsxUtil.isJSX(parent) && hasManyChildren(parent.children)) {
         return false;
       }
 

tests/lib/rules/jsx-curly-brace-presence.js

@@ -284,6 +284,15 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
         \`}</App>
       `,
       options: ['always']
+    },
+    {
+      code: `
+        <MyComponent>
+          %
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}]
     }
   ],
 
@@ -335,6 +344,21 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
       options: [{props: 'never'}],
       errors: [{message: unnecessaryCurlyMessage}]
     },
+    {
+      code: `
+        <MyComponent>
+          {'%'}
+        </MyComponent>
+      `,
+      output: `
+        <MyComponent>
+          %
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}],
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
     {
       code: `<MyComponent prop='bar'>foo</MyComponent>`,
       output: '<MyComponent prop={"bar"}>foo</MyComponent>',