fix(rainbow-sprinkles): reorganize the types in ChildSprinkle so th…

…at it checks for static+dynamic properties before checking for one or the other. (#169)

Previously in the `ChildSprinkle` type, TypeScript would match a dynamic+static property to the `DynamicProperty` type before it had a chance to evaluate whether it matched the `StaticDynamicProperty` type instead. This would result in IDEs only suggesting the dynamic values of a given property, instead of both the static values AND the dynamic values. We need to check whether the property extends `StaticDynamicProperty` first, and THEN fall back to check for the other types.

Co-authored-by: Scott Robertson <srobertson@dropbox.com>
Co-authored-by: Rogin Farrer <rogin@roginfarrer.com>

.changeset/gentle-scissors-yawn.md

@@ -0,0 +1,5 @@
+---
+"rainbow-sprinkles": patch
+---
+
+Fix an issue where conditionless properties that have both static and dynamic values wouldn't provide autocomplete suggestions for the static values.

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

@@ -595,3 +595,32 @@ describe('static (no conditions)', () => {
     `);
   });
 });
+
+describe('dynamic and static (no conditions)', () => {
+  const properties = defineProperties({
+    dynamicProperties: {
+      background: true,
+    },
+    staticProperties: {
+      background: vars.color,
+    },
+  });
+
+  const rainbowSprinkles = createRainbowSprinkles(properties);
+
+  it('handles static scale values', () => {
+    expect(rainbowSprinkles({ background: '$gray50' })).toMatchObject({
+      className: 'background-gray50',
+      style: {},
+    });
+  });
+
+  it('handles dynamic non-scale values', () => {
+    expect(rainbowSprinkles({ background: 'red' })).toMatchObject({
+      className: 'background',
+      style: {
+        '--background': 'red',
+      },
+    });
+  });
+});

packages/rainbow-sprinkles/src/types.ts

@@ -220,52 +220,58 @@ export type ChildSprinkle<
       Sprinkle['vars']
     >
   : Sprinkle extends StaticDynamicConditionalPropertyArray
-  ? ValueOrConditionObject<PropertyCssValue<Sprinkle['name']>, Sprinkle['vars']>
-  : Sprinkle extends DynamicConditionalProperty
-  ? Sprinkle['dynamicScale'] extends boolean
     ? ValueOrConditionObject<
         PropertyCssValue<Sprinkle['name']>,
         Sprinkle['vars']
       >
-    : ValueOrConditionObject<
-        | PropertyCssValue<Sprinkle['name']>
-        | PrefixValue<keyof Sprinkle['dynamicScale']>,
-        Sprinkle['vars']
-      >
-  : Sprinkle extends StaticDynamicConditionalPropertyArray
-  ? ValueOrConditionObject<Sprinkle['staticScale'][number], Sprinkle['dynamic']>
-  : Sprinkle extends StaticDynamicConditionalProperty
-  ? ValueOrConditionObjectStatic<
-      PrefixValue<keyof Sprinkle['staticScale']>,
-      Sprinkle['values']
-    >
-  : Sprinkle extends StaticConditionalProperty
-  ? ValueOrConditionObjectStatic<
-      PrefixValue<keyof Sprinkle['staticScale']>,
-      Sprinkle['values']
-    >
-  : Sprinkle extends StaticConditionalPropertyArray
-  ? ValueOrConditionObjectStatic<
-      Sprinkle['staticScale'][number],
-      Sprinkle['values']
-    >
-  : Sprinkle extends DynamicProperty
-  ?
-      | PropertyCssValue<Sprinkle['name']>
-      | (Sprinkle['dynamicScale'] extends boolean
-          ? never
-          : PrefixValue<keyof Sprinkle['dynamicScale']>)
-  : Sprinkle extends StaticProperty
-  ? PrefixValue<keyof Sprinkle['staticScale']>
-  : Sprinkle extends StaticPropertyArray
-  ? Sprinkle['staticScale'][number]
-  : Sprinkle extends StaticDynamicProperty
-  ?
-      | PrefixValue<keyof Sprinkle['staticScale']>
-      | PropertyCssValue<Sprinkle['name']>
-  : Sprinkle extends StaticDynamicPropertyArray
-  ? PropertyCssValue<Sprinkle['name']>
-  : never;
+    : Sprinkle extends DynamicConditionalProperty
+      ? Sprinkle['dynamicScale'] extends boolean
+        ? ValueOrConditionObject<
+            PropertyCssValue<Sprinkle['name']>,
+            Sprinkle['vars']
+          >
+        : ValueOrConditionObject<
+            | PropertyCssValue<Sprinkle['name']>
+            | PrefixValue<keyof Sprinkle['dynamicScale']>,
+            Sprinkle['vars']
+          >
+      : Sprinkle extends StaticDynamicConditionalPropertyArray
+        ? ValueOrConditionObject<
+            Sprinkle['staticScale'][number],
+            Sprinkle['dynamic']
+          >
+        : Sprinkle extends StaticDynamicConditionalProperty
+          ? ValueOrConditionObjectStatic<
+              PrefixValue<keyof Sprinkle['staticScale']>,
+              Sprinkle['values']
+            >
+          : Sprinkle extends StaticConditionalProperty
+            ? ValueOrConditionObjectStatic<
+                PrefixValue<keyof Sprinkle['staticScale']>,
+                Sprinkle['values']
+              >
+            : Sprinkle extends StaticConditionalPropertyArray
+              ? ValueOrConditionObjectStatic<
+                  Sprinkle['staticScale'][number],
+                  Sprinkle['values']
+                >
+              : Sprinkle extends StaticDynamicProperty
+                ?
+                    | PrefixValue<keyof Sprinkle['staticScale']>
+                    | PropertyCssValue<Sprinkle['name']>
+                : Sprinkle extends StaticDynamicPropertyArray
+                  ? PropertyCssValue<Sprinkle['name']>
+                  : Sprinkle extends DynamicProperty
+                    ?
+                        | PropertyCssValue<Sprinkle['name']>
+                        | (Sprinkle['dynamicScale'] extends boolean
+                            ? never
+                            : PrefixValue<keyof Sprinkle['dynamicScale']>)
+                    : Sprinkle extends StaticProperty
+                      ? PrefixValue<keyof Sprinkle['staticScale']>
+                      : Sprinkle extends StaticPropertyArray
+                        ? Sprinkle['staticScale'][number]
+                        : never;
 
 export type ChildSprinkles<Sprinkles extends SprinkleProperties> = {
   [Prop in keyof Sprinkles]?: Sprinkles[Prop] extends ShorthandProperty