diff --git a/.changeset/seven-singers-compare.md b/.changeset/seven-singers-compare.md new file mode 100644 index 000000000..0983272bc --- /dev/null +++ b/.changeset/seven-singers-compare.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/css': minor +--- + +Support passing arrays of styles to `globalStyle` diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index b167e4832..f0374ffcf 100644 --- a/packages/css/src/index.ts +++ b/packages/css/src/index.ts @@ -4,6 +4,7 @@ export type { StyleRule, ComplexStyleRule, GlobalStyleRule, + ComplexGlobalStyleRule, Adapter, FileScope, CSSProperties, diff --git a/packages/css/src/style.ts b/packages/css/src/style.ts index d2c417a1f..31d656f91 100644 --- a/packages/css/src/style.ts +++ b/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) { + return deepmerge.all(rules, { + // Replace arrays rather than merging + arrayMerge: (_, sourceArray) => sourceArray, + }); +} + function composedStyle(rules: Array, debugId?: string) { const className = generateIdentifier(debugId); registerClassName(className, getFileScope()); @@ -56,10 +65,10 @@ function composedStyle(rules: Array, 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; + const rule = composedStyleRule(styleRules as Array); appendCss({ type: 'local', selector: className, rule }, getFileScope()); } @@ -89,8 +98,12 @@ export function composeStyles(...classNames: Array) { 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( diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index 4af194842..fad324be0 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -166,6 +166,7 @@ export type ThemeVars = MapLeafNodes< export type ClassNames = string | Array; export type ComplexStyleRule = StyleRule | Array; +export type ComplexGlobalStyleRule = GlobalStyleRule | Array; type _PropertySyntax = | ''