From 8677acb2099cf75f910b1ed0df282fac8a3b398e Mon Sep 17 00:00:00 2001
From: Daniel Puckowski <puckowski.d@gmail.com>
Date: Thu, 19 Dec 2024 16:52:40 -0500
Subject: [PATCH] fix(issue:4301) at-rule declarations missing

* Fixes issue #4301. At-rule declarations may go missing or are
  incorrectly merged under certain nesting conditions.
* Added more ```@container``` tests.
---
 packages/less/src/less/tree/nested-at-rule.js |  6 ++
 packages/test-data/css/_main/container.css    | 76 +++++++++++++++
 packages/test-data/less/_main/container.less  | 94 +++++++++++++++++++
 3 files changed, 176 insertions(+)

diff --git a/packages/less/src/less/tree/nested-at-rule.js b/packages/less/src/less/tree/nested-at-rule.js
index c97a2dc2c..2846f5ffb 100644
--- a/packages/less/src/less/tree/nested-at-rule.js
+++ b/packages/less/src/less/tree/nested-at-rule.js
@@ -45,6 +45,12 @@ const NestableAtRulePrototype = {
 
         // Extract the media-query conditions separated with `,` (OR).
         for (i = 0; i < path.length; i++) {
+            if (path[i].type !== this.type) { 
+                context.mediaBlocks.splice(i, 1); 
+                
+                return this; 
+            }
+            
             value = path[i].features instanceof Value ?
                 path[i].features.value : path[i].features;
             path[i] = Array.isArray(value) ? value : [value];
diff --git a/packages/test-data/css/_main/container.css b/packages/test-data/css/_main/container.css
index f6f31639e..f5a17a602 100644
--- a/packages/test-data/css/_main/container.css
+++ b/packages/test-data/css/_main/container.css
@@ -165,3 +165,79 @@
     max-height: 300;
   }
 }
+@media only screen and (min-width: 768px) {
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      font-size: 1.75rem;
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      font-size: 1.75rem;
+      @media not all and (hover: hover) {
+        color: limegreen;
+      }
+      .media-3 {
+        padding: 0.5rem;
+      }
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@container (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
+    color: aliceblue;
+  }
+  .container-1 {
+    color: purple;
+  }
+}
diff --git a/packages/test-data/less/_main/container.less b/packages/test-data/less/_main/container.less
index c8f8a7807..73fd17be0 100644
--- a/packages/test-data/less/_main/container.less
+++ b/packages/test-data/less/_main/container.less
@@ -195,3 +195,97 @@
 .my_mixin(100);
 .my_mixin(200);
 .my_mixin(300);
+
+@media only screen and (min-width: 768px) {
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+
+        @media (hover: hover) {
+            font-size: 1.75rem;
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+
+        @media (hover: hover) {
+            font-size: 1.75rem;
+
+            @media not all and (hover: hover) {
+                color: limegreen;
+            }
+
+            .media-3 {
+                padding: 0.5rem;
+            }
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@container (min-width: 768px) {
+    @media only screen and (min-width: 768px) {
+        color: aliceblue;
+    }
+
+    .container-1 {
+        color: purple;
+    }
+}