From b86f3f59c86420e12593996a14f8cdb5db2f7c25 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Fri, 14 Jun 2024 11:45:29 +1000
Subject: [PATCH] css: Fix conditional rule merging bug (#1425)

---
 .changeset/four-humans-hammer.md        |  5 +++
 packages/css/src/conditionalRulesets.ts |  6 +++-
 packages/css/src/transformCss.test.ts   | 41 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/four-humans-hammer.md

diff --git a/.changeset/four-humans-hammer.md b/.changeset/four-humans-hammer.md
new file mode 100644
index 000000000..cc0eff9bb
--- /dev/null
+++ b/.changeset/four-humans-hammer.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Fixes a bug where declarations with identical selectors would not be merged correctly inside conditional rules
diff --git a/packages/css/src/conditionalRulesets.ts b/packages/css/src/conditionalRulesets.ts
index 4b3d0abd2..18712c2bf 100644
--- a/packages/css/src/conditionalRulesets.ts
+++ b/packages/css/src/conditionalRulesets.ts
@@ -196,7 +196,11 @@ export class ConditionalRuleset {
       const selectors: any = {};
 
       for (const rule of rules) {
-        selectors[rule.selector] = rule.rule;
+        selectors[rule.selector] = {
+          // Preserve existing declarations if a rule with the same selector has already been added
+          ...selectors[rule.selector],
+          ...rule.rule,
+        };
       }
 
       Object.assign(selectors, ...children.renderToArray());
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
index 39cd3ead7..fe9fa25c3 100644
--- a/packages/css/src/transformCss.test.ts
+++ b/packages/css/src/transformCss.test.ts
@@ -549,6 +549,47 @@ describe('transformCss', () => {
     `);
   });
 
+  it('should merge declarations with the same selector when merging conditional rules', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: [],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: '.testClass',
+            rule: {
+              '@layer': {
+                myLayer: {
+                  color: 'red',
+                },
+              },
+            },
+          },
+          {
+            type: 'local',
+            selector: '.testClass',
+            rule: {
+              '@layer': {
+                myLayer: {
+                  fontSize: '32px',
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @layer myLayer;
+      @layer myLayer {
+        .testClass {
+          color: red;
+          font-size: 32px;
+        }
+      }
+    `);
+  });
+
   it('should handle simple pseudos', () => {
     expect(
       transformCss({