Fix runtime behavior to match the type definition (#1558)

Co-authored-by: Adam Skoufis <[email protected]>

Author: andjsrk

.changeset/dry-rabbits-grow.md

@@ -0,0 +1,15 @@
+---
+'@vanilla-extract/css': patch
+---
+
+`style`: Fixed a bug where nested arrays of classnames could cause missing or malformed CSS during [style composition](https://vanilla-extract.style/documentation/style-composition/) in certain situations.
+
+For example, the following style composition would not generate CSS for the `backgroundColor: 'orange'` style, and would also generate malformed CSS:
+
+```ts
+const styleWithNestedComposition = style([
+  [style1, style2],
+  { backgroundColor: 'orange' },
+  [style3],
+]);
+```

packages/css/src/style.ts

@@ -28,7 +28,7 @@ function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   const styleRules = [];
 
   for (const rule of rules) {
-    if (typeof rule === 'string') {
+    if (typeof rule === 'string' || Array.isArray(rule)) {
       classList.push(rule);
     } else {
       styleRules.push(rule);