Allow readonly arrays for responsive array properties (#100)

Author: mattcompiles

.changeset/tricky-coins-hug.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Allow readonly arrays for responsive array properties

packages/sprinkles/src/index.ts

@@ -52,6 +52,8 @@ type ConditionalAtomicOptions<
 
 type Values<Property, Result> = {
   [Value in Property extends ReadonlyArray<any>
+    ? Property[number]
+    : Property extends Array<any>
     ? Property[number]
     : keyof Property]: Result;
 };

packages/sprinkles/src/types.ts

@@ -1,11 +1,19 @@
-export type RA1<Value> = [Value];
-export type RA2<Value> = [Value, Value];
-export type RA3<Value> = [Value, Value, Value];
-export type RA4<Value> = [Value, Value, Value, Value];
-export type RA5<Value> = [Value, Value, Value, Value, Value];
-export type RA6<Value> = [Value, Value, Value, Value, Value, Value];
-export type RA7<Value> = [Value, Value, Value, Value, Value, Value, Value];
-export type RA8<Value> = [
+export type RA1<Value> = readonly [Value];
+export type RA2<Value> = readonly [Value, Value];
+export type RA3<Value> = readonly [Value, Value, Value];
+export type RA4<Value> = readonly [Value, Value, Value, Value];
+export type RA5<Value> = readonly [Value, Value, Value, Value, Value];
+export type RA6<Value> = readonly [Value, Value, Value, Value, Value, Value];
+export type RA7<Value> = readonly [
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+  Value,
+];
+export type RA8<Value> = readonly [
   Value,
   Value,
   Value,

tests/sprinkles/spinkles-type-tests.ts

@@ -79,6 +79,11 @@ import {
     paddingY: ['medium', 'smalll'],
   });
 
+  // Valid value - Accept readonly arrays
+  atoms({
+    paddingY: ['medium', 'small'] as const,
+  });
+
   // Valid value
   atoms({
     transform: {