Fix multiple top-level conditional styles in runtime version (#284)

Author: markdalgleish

.changeset/many-dingos-bake.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Fix multiple top-level conditional styles in runtime version

fixtures/themed/src/styles.css.ts

@@ -65,9 +65,13 @@ export const button = composeStyles(
       '"THIS FALLBACK VALUE SHOULD NEVER BE USED"',
     ),
     color: vars.colors.text,
+    borderRadius: '9999px',
     '@media': {
       'only screen and (min-width: 500px)': {
-        borderRadius: '9999px',
+        padding: vars.space[1],
+      },
+      'only screen and (min-width: 1000px)': {
+        padding: vars.space[2],
       },
     },
     selectors: {

packages/css/src/conditionalRulesets.ts

@@ -182,22 +182,24 @@ export class ConditionalRuleset {
     });
   }
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
 
-    const target: any = {};
+    const arr: any = [];
 
     for (const { query, rules, children } of this.ruleset) {
-      target[query] = {};
+      const selectors: any = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+
+      arr.push({ [query]: selectors });
     }
 
-    return target;
+    return arr;
   }
 }

packages/css/src/transformCss.ts

@@ -407,7 +407,9 @@ class Stylesheet {
 
     // Render conditional rules
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
 
     return css.filter(Boolean);