Fix fileScope error if composeStyles is called at runtime (#265)

Author: mattcompiles

.changeset/rich-walls-cry.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Fix fileScope error if `composeStyles` is called at runtime

packages/css/src/composeStyles.ts

@@ -1,5 +1,6 @@
 import { generateIdentifier } from './identifier';
 import { registerComposition, registerClassName } from './adapter';
+import { hasFileScope } from './fileScope';
 
 type ClassNames = string | Array<ClassNames>;
 
@@ -43,5 +44,14 @@ export function dudupeAndJoinClassList(classNames: Array<ClassNames>) {
 }
 
 export function composeStyles(...classNames: Array<ClassNames>) {
-  return createComposition(dudupeAndJoinClassList(classNames));
+  const classList = dudupeAndJoinClassList(classNames);
+
+  // When using Sprinkles with the runtime (e.g. within a jest test)
+  // `composeStyles` can be called outside of a fileScope. Checking
+  // the fileScope is bit of a hack but will solve the issue for now
+  if (!hasFileScope()) {
+    return classList;
+  }
+
+  return createComposition(classList);
 }

packages/css/src/fileScope.ts

@@ -20,6 +20,10 @@ export function endFileScope() {
   fileScopes.splice(0, 1);
 }
 
+export function hasFileScope() {
+  return fileScopes.length > 0;
+}
+
 export function getFileScope(): FileScope {
   if (fileScopes.length === 0) {
     throw new Error(

tests/sprinkles/sprinkles.test.ts

@@ -1,8 +1,8 @@
 import {
   createMapValueFn,
   createNormalizeValueFn,
+  createAtomsFn,
 } from '@vanilla-extract/sprinkles';
-import { createAtomsFn } from '@vanilla-extract/sprinkles/createRuntimeAtomsFn';
 
 import {
   atomicStyles,