Sprinkles: Fix style object bug when no conditions are present (#307)

Author: rtkaaho

.changeset/eight-moons-lie.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Allow style objects to be passed when no conditions are present

fixtures/sprinkles/src/styles.css.ts

@@ -7,6 +7,7 @@ import {
 } from '@vanilla-extract/sprinkles';
 
 const alpha = createVar();
+const textAlpha = createVar();
 
 const responsiveStyles = createAtomicStyles({
   defaultCondition: 'mobile',
@@ -46,7 +47,24 @@ const responsiveStyles = createAtomicStyles({
   },
 });
 
-export const atoms = createAtomsFn(responsiveStyles);
+const styleWithNoConditions = createAtomicStyles({
+  properties: {
+    color: {
+      red: {
+        vars: {
+          [textAlpha]: '1',
+        },
+        color: `rgba(255, 0, 0, ${textAlpha})`,
+      },
+    },
+    textOpacity: {
+      1: { vars: { [textAlpha]: '1' } },
+      0.8: { vars: { [textAlpha]: '0.8' } },
+    },
+  },
+});
+
+export const atoms = createAtomsFn(responsiveStyles, styleWithNoConditions);
 
 export const mapResponsiveValue = createMapValueFn(responsiveStyles);
 export const normalizeResponsiveValue =
@@ -57,6 +75,8 @@ export const preComposedAtoms = atoms({
   paddingTop: 'small',
   background: 'red',
   backgroundOpacity: { mobile: 0.1, tablet: 0.2, desktop: 0.3 },
+  color: 'red',
+  textOpacity: 0.8,
 });
 
 export const preComposedAtomsUsedInSelector = atoms({

packages/sprinkles/src/index.ts

@@ -237,19 +237,14 @@ export function createAtomicStyles(options: any): any {
         };
 
         for (const conditionName in options.conditions) {
+          let styleValue: StyleRule =
+            typeof value === 'object' ? value : { [key]: value };
+
           const condition =
             options.conditions[
               conditionName as keyof typeof options.conditions
             ];
 
-          let styleValue: any = {};
-
-          if (typeof value === 'object') {
-            styleValue = value;
-          } else {
-            styleValue[key] = value;
-          }
-
           if (condition['@supports']) {
             styleValue = {
               '@supports': {
@@ -286,8 +281,11 @@ export function createAtomicStyles(options: any): any {
           }
         }
       } else {
+        const styleValue: StyleRule =
+          typeof value === 'object' ? value : { [key]: value };
+
         styles[key].values[valueName] = {
-          defaultClass: style({ [key]: value }, `${key}_${String(valueName)}`),
+          defaultClass: style(styleValue, `${key}_${String(valueName)}`),
         };
       }
     };