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

Author: vedadeepta

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

@@ -205,17 +205,44 @@ module.exports = {
       );
     }
 
-    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) {
+    function isWhiteSpaceLiteral(node) {
+      return node.type && node.type === 'Literal' && node.value && !(/\S/.test(node.value));
+    }
+
+    function getAdjacentSiblings(node, children) {
+      for (let i = 1; i < children.length - 1; i++) {
+        const child = children[i];
+        if (node === child) {
+          return [children[i - 1], children[i + 1]];
+        }
+      }
+      if (node === children[0] && children[1]) {
+        return [children[1]];
+      }
+      if (node === children[children.length - 1] && children[children.length - 2]) {
+        return [children[children.length - 2]];
+      }
+      return [];
+    }
+
+    function hasAdjacentJsxExpressionContainers(node, children) {
+      const childrenExcludingWhitespaceLiteral = children.filter(child => !isWhiteSpaceLiteral(child));
+      const adjSiblings = getAdjacentSiblings(node, childrenExcludingWhitespaceLiteral);
+
+      return adjSiblings.some(x => x.type && x.type === 'JSXExpressionContainer');
+    }
+
+    function shouldCheckForUnnecessaryCurly(parent, node, config) {
+      // If there are adjacent `JsxExpressionContainer` then there is no need,
+      // to check for unnecessary curly braces.
+      if (jsxUtil.isJSX(parent) && hasAdjacentJsxExpressionContainers(node, parent.children)) {
         return false;
       }
 
       if (
         parent.children &&
         parent.children.length === 1 &&
-        containsWhitespaceExpression(parent.children[0])
+        containsWhitespaceExpression(node)
       ) {
         return false;
       }
@@ -241,7 +268,7 @@ module.exports = {
 
     return {
       JSXExpressionContainer: (node) => {
-        if (shouldCheckForUnnecessaryCurly(node.parent, userConfig)) {
+        if (shouldCheckForUnnecessaryCurly(node.parent, node, userConfig)) {
           lintUnnecessaryCurly(node);
         }
       },

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

@@ -284,6 +284,25 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
         \`}</App>
       `,
       options: ['always']
+    },
+    {
+      code: `
+        <MyComponent>
+          %
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}]
+    },
+    {
+      code: `
+        <MyComponent>
+          foo
+          <div>bar</div>
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}]
     }
   ],
 
@@ -335,6 +354,73 @@ 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>
+          {'foo'}
+          <div>
+            {'bar'}
+          </div>
+          {'baz'}
+        </MyComponent>
+      `,
+      output: `
+        <MyComponent>
+          foo
+          <div>
+            bar
+          </div>
+          baz
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}],
+      errors: [
+        {message: unnecessaryCurlyMessage},
+        {message: unnecessaryCurlyMessage},
+        {message: unnecessaryCurlyMessage}
+      ]
+    },
+    {
+      code: `
+        <MyComponent>
+          {'foo'}
+          <div>
+            {'bar'}
+          </div>
+          {'baz'}
+          {'some-complicated-exp'}
+        </MyComponent>
+      `,
+      output: `
+        <MyComponent>
+          foo
+          <div>
+            bar
+          </div>
+          {'baz'}
+          {'some-complicated-exp'}
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}],
+      errors: [{message: unnecessaryCurlyMessage}, {message: unnecessaryCurlyMessage}]
+    },
     {
       code: `<MyComponent prop='bar'>foo</MyComponent>`,
       output: '<MyComponent prop={"bar"}>foo</MyComponent>',