Support passing arrays of styles to globalStyle

.changeset/seven-singers-compare.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Support passing arrays of styles to `globalStyle`

packages/css/src/index.ts

@@ -4,6 +4,7 @@ export type {
   StyleRule,
   ComplexStyleRule,
   GlobalStyleRule,
+  ComplexGlobalStyleRule,
   Adapter,
   FileScope,
   CSSProperties,

packages/css/src/style.ts

@@ -9,6 +9,8 @@ import type {
   GlobalStyleRule,
   ClassNames,
   ComplexStyleRule,
+  ComplexGlobalStyleRule,
+  CSSPropertiesWithVars,
 } from './types';
 import {
   registerClassName,
@@ -20,6 +22,13 @@ import { getFileScope, hasFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
 import { dudupeAndJoinClassList } from './utils';
 
+function composedStyleRule(rules: Array<CSSPropertiesWithVars>) {
+  return deepmerge.all(rules, {
+    // Replace arrays rather than merging
+    arrayMerge: (_, sourceArray) => sourceArray,
+  });
+}
+
 function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   const className = generateIdentifier(debugId);
   registerClassName(className, getFileScope());
@@ -56,10 +65,10 @@ function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {
   }
 
   if (styleRules.length > 0) {
-    const rule = deepmerge.all(styleRules, {
-      // Replace arrays rather than merging
-      arrayMerge: (_, sourceArray) => sourceArray,
-    });
+    // Remove type cast below (and this assertion) when this assertion becomes invalid
+    // @ts-expect-error
+    styleRules satisfies Array<StyleRule>;
+    const rule = composedStyleRule(styleRules as Array<StyleRule>);
 
     appendCss({ type: 'local', selector: className, rule }, getFileScope());
   }
@@ -89,8 +98,12 @@ export function composeStyles(...classNames: Array<ClassNames>) {
   return compose(classNames);
 }
 
-export function globalStyle(selector: string, rule: GlobalStyleRule) {
-  appendCss({ type: 'global', selector, rule }, getFileScope());
+export function globalStyle(selector: string, rule: ComplexGlobalStyleRule) {
+  const composedRule: GlobalStyleRule = Array.isArray(rule)
+    ? composedStyleRule(rule)
+    : rule;
+
+  appendCss({ type: 'global', selector, rule: composedRule }, getFileScope());
 }
 
 export function fontFace(

packages/css/src/types.ts

@@ -166,6 +166,7 @@ export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
 export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+export type ComplexGlobalStyleRule = GlobalStyleRule | Array<GlobalStyleRule>;
 
 type _PropertySyntax =
   | '<angle>'