Fix #4686: if a CSX interpolation contains comments, not just inner CSX (JSX) tags, it needs to be wrapped in braces (#4689)

lib/coffeescript/nodes.js

@@ -5010,7 +5010,9 @@
               fragments.push(this.makeCode('$'));
             }
             code = element.compileToFragments(o, LEVEL_PAREN);
-            if (!this.isNestedTag(element)) {
+            if (!this.isNestedTag(element) || code.some(function(fragment) {
+              return fragment.comments != null;
+            })) {
               code = this.wrapInBraces(code);
               // Flag the `{` and `}` fragments as having been generated by this
               // `StringWithInterpolations` node, so that `compileComments` knows

src/nodes.coffee

@@ -3403,7 +3403,7 @@ exports.StringWithInterpolations = class StringWithInterpolations extends Base
       else
         fragments.push @makeCode '$' unless @csx
         code = element.compileToFragments(o, LEVEL_PAREN)
-        unless @isNestedTag element
+        if not @isNestedTag(element) or code.some((fragment) -> fragment.comments?)
           code = @wrapInBraces code
           # Flag the `{` and `}` fragments as having been generated by this
           # `StringWithInterpolations` node, so that `compileComments` knows

test/csx.coffee

@@ -711,3 +711,34 @@ test 'unspaced less than after CSX works but is not encouraged', ->
 
       res = 2 < div;
     '''
+
+test '#4686: comments inside interpolations that also contain CSX tags', ->
+  eqJS '''
+    <div>
+      {
+        # comment
+        <div />
+      }
+    </div>
+  ''', '''
+    <div>
+      {  // comment
+    <div />}
+    </div>;
+  '''
+
+test '#4686: comments inside interpolations that also contain CSX attributes', ->
+  eqJS '''
+    <div>
+      <div anAttr={
+        # comment
+        "value"
+      } />
+    </div>
+  ''', '''
+    <div>
+      {  // comment
+    <div anAttr={"value"} />}
+    </div>;
+  '''
+