css: Fix conditional rule merging bug (#1425)

vanilla-extract-css · Jun 14, 2024 · b86f3f5 · b86f3f5
1 parent e50a078
commit b86f3f5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/.changeset/four-humans-hammer.md 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
@@ -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
@@ -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({