Sprinkles: Fix some minor type issues (#98)

.changeset/neat-buttons-shave.md

@@ -0,0 +1,8 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Fix some minor type issues
+
+- Better support passing config to `createAtomicStyles` that was not defined inline
+- Remove array methods being exposed on properties using number arrays

packages/sprinkles/src/index.ts

@@ -18,7 +18,7 @@ type BaseConditions = { [conditionName: string]: Condition };
 type AtomicProperties = {
   [Property in keyof CSSProperties]?:
     | Record<string, CSSProperties[Property]>
-    | Array<CSSProperties[Property]>;
+    | ReadonlyArray<CSSProperties[Property]>;
 };
 
 type ShorthandOptions<
@@ -51,7 +51,7 @@ type ConditionalAtomicOptions<
 };
 
 type Values<Property, Result> = {
-  [Value in Property extends Array<any>
+  [Value in Property extends ReadonlyArray<any>
     ? Property[number]
     : keyof Property]: Result;
 };

tests/sprinkles/index.css.ts

@@ -50,7 +50,7 @@ export const conditionalAtomicStyles = createAtomicStyles({
     display: ['block', 'none', 'flex'],
     paddingTop: spacing,
     paddingBottom: spacing,
-    opacity: [0, 1],
+    opacity: [0, 1] as const,
   },
   shorthands: {
     paddingY: ['paddingBottom', 'paddingTop'],

tests/sprinkles/spinkles-type-tests.ts

@@ -1,7 +1,7 @@
 /*
     This file is for validating types, it is not designed to be executed
 */
-
+import { createAtomicStyles } from '@vanilla-extract/sprinkles';
 import { createAtomsFn } from '@vanilla-extract/sprinkles/createAtomsFn';
 
 import {
@@ -95,4 +95,16 @@ import {
   atoms({
     marginY: { mobile: 'medium' },
   });
+
+  // @ts-expect-error - Property defined with numbers should not allow array methods
+  atoms({ opacity: 'forEach' });
+
+  const atomicConfig = {
+    properties: {
+      flexDirection: ['row', 'column'],
+    },
+  } as const;
+
+  // Valid value - config defined outside the createAtomicStyles function
+  createAtomicStyles(atomicConfig);
 };