Multiline Block comments are sticky to Multiline components. Add newline before first

comment.

Author: justmejulian

lib/rules/jsx-newline.js

@@ -77,6 +77,17 @@ module.exports = {
       return /^\s*{\/\*/.test(elementRawValue);
     }
 
+    function findFirstNonBlockComment(index, elements) {
+      if (index >= elements.length) return;
+
+      const element = elements[index];
+      const isElementJSX = element.type === 'JSXElement' || element.type === 'JSXExpressionContainer';
+
+      if (!isBlockCommentInCurlyBraces(element) && isElementJSX) return element;
+
+      return findFirstNonBlockComment(index + 1, elements);
+    }
+
     return {
       'Program:exit'() {
         jsxElementParents.forEach((parent) => {
@@ -98,7 +109,13 @@ module.exports = {
               // Check adjacent sibling has the proper amount of newlines
               const isWithoutNewLine = !/\n\s*\n/.test(firstAdjacentSibling.value);
 
-              if (allowMultilines && (isMultilined(element) || isMultilined(secondAdjacentSibling))) {
+              if (isBlockCommentInCurlyBraces(element)) return;
+
+              if (
+                allowMultilines
+                && (isMultilined(element)
+                  || isMultilined(findFirstNonBlockComment(index + 2, elements)))
+              ) {
                 if (!isWithoutNewLine) return;
 
                 const regex = /(\n)(?!.*\1)/g;
@@ -121,8 +138,6 @@ module.exports = {
 
               if (isWithoutNewLine === prevent) return;
 
-              if (isBlockCommentInCurlyBraces(element)) return;
-
               const messageId = prevent
                 ? 'prevent'
                 : 'require';

tests/lib/rules/jsx-newline.js

@@ -159,6 +159,24 @@ new RuleTester({ parserOptions }).run('jsx-newline', rule, {
       features: ['fragment'],
       options: [{ prevent: true, allowMultilines: true }],
     },
+    {
+      code: `
+        <div>
+          {/* this does not have a newline */}
+          <Icon f7='gear' />
+          {/* neither does this */}
+          <OneLineComponent />
+
+          {/* but this one needs one */}
+          <Button>
+            <IconPreview />
+            Button 2
+            <span></span>
+          </Button>
+        </div>
+      `,
+      options: [{ prevent: true, allowMultilines: true }],
+    },
     {
       code: `
         <div>
@@ -284,6 +302,76 @@ new RuleTester({ parserOptions }).run('jsx-newline', rule, {
       `,
       errors: [{ messageId: 'require' }],
     },
+    {
+      code: `
+        <div>
+          {/* this does not have a newline */}
+          <Icon f7='gear' />
+          {/* neither does this */}
+          <OneLineComponent />
+          {/* but this one needs one */}
+          <Button>
+            <IconPreview />
+            Button 2
+            <span></span>
+          </Button>
+        </div>
+      `,
+      output: `
+        <div>
+          {/* this does not have a newline */}
+          <Icon f7='gear' />
+          {/* neither does this */}
+          <OneLineComponent />
+
+          {/* but this one needs one */}
+          <Button>
+            <IconPreview />
+            Button 2
+            <span></span>
+          </Button>
+        </div>
+      `,
+      options: [{ prevent: true, allowMultilines: true }],
+      errors: [{ messageId: 'allowMultilines' }],
+    },
+    {
+      code: `
+        <div>
+          {/* this does not have a newline */}
+          <Icon f7='gear' />
+          {/* neither does this */}
+          <OneLineComponent />
+          {/* Multiline */}
+          {/* Block comments */}
+          {/* Stick to MultilineComponent */}
+          <Button>
+            <IconPreview />
+            Button 2
+            <span></span>
+          </Button>
+        </div>
+      `,
+      output: `
+        <div>
+          {/* this does not have a newline */}
+          <Icon f7='gear' />
+          {/* neither does this */}
+          <OneLineComponent />
+
+          {/* Multiline */}
+          {/* Block comments */}
+          {/* Stick to MultilineComponent */}
+          <Button>
+            <IconPreview />
+            Button 2
+            <span></span>
+          </Button>
+        </div>
+      `,
+      options: [{ prevent: true, allowMultilines: true }],
+      errors: [{ messageId: 'allowMultilines' }],
+    },
     {
       code: `
         <div>