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.
less · Dec 19, 2024 · 8677acb · 8677acb
1 parent 145d95e
commit 8677acb
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;
+    }
+}