Add responsiveArray

packages/rainbow-sprinkles/src/__tests__/createNormalizeValueFn.test.ts

@@ -0,0 +1,54 @@
+import { createNormalizeValueFn } from '../createNormalizeValueFn';
+
+const responsiveArray = ['mobile', 'tablet', 'desktop'];
+
+describe('with responsive array', () => {
+  const config = {
+    config: {
+      display: {},
+    },
+    responsiveArray,
+  };
+
+  const fn = createNormalizeValueFn(config as any);
+
+  it('returns conditional object given responsive array', () => {
+    expect(fn('display', ['block', 'flex', 'grid'])).toMatchObject({
+      mobile: 'block',
+      tablet: 'flex',
+      desktop: 'grid',
+    });
+  });
+
+  it('fills in missing values with last value', () => {
+    expect(fn('display', ['block', 'flex'])).toMatchObject({
+      mobile: 'block',
+      tablet: 'flex',
+      desktop: 'flex',
+    });
+
+    expect(fn('display', ['block', null, 'flex'])).toMatchObject({
+      mobile: 'block',
+      tablet: 'block',
+      desktop: 'flex',
+    });
+  });
+});
+
+describe('without responsive array', () => {
+  const config = {
+    config: {
+      display: {},
+    },
+  };
+
+  const fn = createNormalizeValueFn(config as any);
+
+  it('returns original value given no responsive array', () => {
+    expect(fn('display', ['block', 'flex', 'grid'])).toMatchObject([
+      'block',
+      'flex',
+      'grid',
+    ]);
+  });
+});

packages/rainbow-sprinkles/src/__tests__/createRainbowSprinkles.test.ts

@@ -40,6 +40,7 @@ describe('dynamic properties only', () => {
       desktop: { '@media': 'screen and (min-width: 1024px)' },
     },
     defaultCondition: 'mobile',
+    responsiveArray: ['mobile', 'tablet', 'desktop'],
     dynamicProperties: {
       display: true,
       flexDirection: true,
@@ -120,13 +121,17 @@ describe('dynamic properties only', () => {
     it('handles conditionals', () => {
       expect(
         rainbowSprinkles({
+          p: ['$1x', '$2x', '$3x'],
           px: { mobile: '$1x', tablet: '$2x', desktop: '-$3x' },
           fontSize: { mobile: '$1x', desktop: '$2x' },
         }),
       ).toMatchObject({
         className:
-          'paddingLeft-mobile paddingLeft-tablet paddingLeft-desktop paddingRight-mobile paddingRight-tablet paddingRight-desktop fontSize-mobile fontSize-desktop',
+          'padding-mobile padding-tablet padding-desktop paddingLeft-mobile paddingLeft-tablet paddingLeft-desktop paddingRight-mobile paddingRight-tablet paddingRight-desktop fontSize-mobile fontSize-desktop',
         style: {
+          '--padding-mobile': vars.space['1x'],
+          '--padding-tablet': vars.space['2x'],
+          '--padding-desktop': vars.space['3x'],
           '--paddingLeft-mobile': vars.space['1x'],
           '--paddingRight-mobile': vars.space['1x'],
           '--paddingLeft-tablet': vars.space['2x'],
@@ -183,6 +188,7 @@ describe('static properties only', () => {
       tablet: { '@media': 'screen and (min-width: 768px)' },
       desktop: { '@media': 'screen and (min-width: 1024px)' },
     },
+    responsiveArray: ['mobile', 'tablet', 'desktop'],
     defaultCondition: 'mobile',
     staticProperties: {
       padding: vars.space,
@@ -224,12 +230,13 @@ describe('static properties only', () => {
     it('handles conditionals', () => {
       expect(
         rainbowSprinkles({
+          p: ['$1x', '$2x', '$3x'],
           px: { mobile: '$1x', tablet: '$2x' },
           fontSize: { mobile: '$1x', desktop: '$2x' },
         }),
       ).toMatchObject({
         className:
-          'paddingLeft-1x-mobile paddingLeft-2x-tablet paddingRight-1x-mobile paddingRight-2x-tablet fontSize-1x-mobile fontSize-2x-desktop',
+          'padding-1x-mobile padding-2x-tablet padding-3x-desktop paddingLeft-1x-mobile paddingLeft-2x-tablet paddingRight-1x-mobile paddingRight-2x-tablet fontSize-1x-mobile fontSize-2x-desktop',
       });
     });
 
@@ -287,6 +294,7 @@ describe('static and dynamic properties', () => {
       desktop: { '@media': 'screen and (min-width: 1024px)' },
     },
     defaultCondition: 'mobile',
+    responsiveArray: ['mobile', 'tablet', 'desktop'],
   });
 
   const rainbowSprinkles = createRainbowSprinkles(responsiveProps);

packages/rainbow-sprinkles/src/createNormalizeValueFn.ts

@@ -0,0 +1,36 @@
+import { DefinePropertiesReturn } from './types';
+
+export function createNormalizeValueFn<
+  Configs extends ReadonlyArray<DefinePropertiesReturn>,
+>(...configs: Configs) {
+  const normalizeValueFn = (property: string, value: any) => {
+    if (Array.isArray(value)) {
+      const config = configs.find((c) => property in c.config);
+      if (!config || !config.responsiveArray) {
+        return value;
+      }
+
+      let lastValue: typeof value;
+      return config.responsiveArray.reduce(
+        (acc, key, index) => {
+          const currentValue = value[index];
+
+          if (currentValue !== undefined && currentValue !== null) {
+            lastValue = currentValue;
+          }
+
+          acc[key] = lastValue;
+
+          return acc;
+        },
+        {} as {
+          [key in typeof config.responsiveArray[number]]: typeof value[number];
+        },
+      );
+    }
+
+    return value;
+  };
+
+  return normalizeValueFn;
+}

packages/rainbow-sprinkles/src/createRuntimeFn.ts

@@ -7,6 +7,7 @@ import {
   ShorthandProperty,
   SprinklesProps,
 } from './types';
+import { createNormalizeValueFn } from './createNormalizeValueFn';
 
 export type SprinklesFn<Args extends ReadonlyArray<DefinePropertiesReturn>> = ((
   props: SprinklesProps<Args>,
@@ -27,6 +28,8 @@ export const createRuntimeFn = <
     (property) => 'mappings' in cssConfig[property],
   );
 
+  const normalizeResponsiveValue = createNormalizeValueFn(...configs);
+
   /**
    * Cache the inline styles and classes for properties and their values
    *
@@ -81,7 +84,10 @@ export const createRuntimeFn = <
       }
 
       const propertyConfig = cssConfig[property];
-      const propValue = finalProps[property];
+      const propValue = normalizeResponsiveValue(
+        property,
+        finalProps[property],
+      );
 
       if ('mappings' in propertyConfig) {
         continue;

packages/rainbow-sprinkles/src/defineProperties.ts

@@ -25,6 +25,7 @@ type ReturnConditionalDynamic<
       vars: ConditionalMap<Conditions>;
     };
   };
+  responsiveArray?: Array<keyof Conditions>;
 };
 type ReturnDynamic<DynamicProperties extends ConfigDynamicProperties> = {
   config: {
@@ -56,6 +57,7 @@ type ReturnConditionalStatic<
       name: Property;
     };
   };
+  responsiveArray?: Array<keyof Conditions>;
 };
 type ReturnStatic<StaticProperties extends ConfigStaticProperties> = {
   config: {
@@ -85,6 +87,7 @@ export type OptionsConditionalDynamic<
   dynamicProperties: DynamicProperties;
   conditions: Conditions;
   defaultCondition: keyof Conditions;
+  responsiveArray?: Array<keyof Conditions>;
   shorthands?: Shorthands;
 };
 export type OptionsConditionalStatic<
@@ -95,6 +98,7 @@ export type OptionsConditionalStatic<
   staticProperties: StaticProperties;
   conditions: Conditions;
   defaultCondition: keyof Conditions;
+  responsiveArray?: Array<keyof Conditions>;
   shorthands?: Shorthands;
 };
 export type OptionsConditionalBoth<
@@ -107,6 +111,7 @@ export type OptionsConditionalBoth<
   staticProperties: StaticProperties;
   conditions: Conditions;
   defaultCondition: keyof Conditions;
+  responsiveArray?: Array<keyof Conditions>;
   shorthands?: Shorthands;
 };
 export type OptionsDynamic<
@@ -198,6 +203,7 @@ export function defineProperties(options: any): any {
     staticProperties,
     shorthands,
     defaultCondition,
+    responsiveArray,
   } = options;
 
   let config: any = shorthands
@@ -228,5 +234,5 @@ export function defineProperties(options: any): any {
     config[staticProp] = Object.assign({}, config?.[staticProp], style);
   }
 
-  return { config };
+  return { config, responsiveArray };
 }

packages/rainbow-sprinkles/src/types.ts

@@ -187,14 +187,16 @@ export type CreateStylesOutput = {
 
 export type DefinePropertiesReturn = {
   config: SprinkleProperties;
+  responsiveArray?: string[];
 };
 
 // Props
 
 type ValueOrConditionObject<T, Conditions extends ConditionalPropertyValue> =
   | T
   | null
-  | Partial<Record<keyof Conditions['conditions'], T | null>>;
+  | Partial<Record<keyof Conditions['conditions'], T | null>>
+  | T[];
 
 type ValueOrConditionObjectStatic<
   T,
@@ -204,7 +206,8 @@ type ValueOrConditionObjectStatic<
   | null
   | {
       [Condition in keyof Values[keyof Values]['conditions']]?: T | null;
-    };
+    }
+  | T[];
 
 export type PrefixValue<T> = T extends `-${infer Root}`
   ? `-$${Root}`