Sprinkles: Add static 'properties' set to atoms function (#81)

Author: markdalgleish

.changeset/friendly-maps-do.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/sprinkles': minor
+---
+
+Add static `properties` set to atoms function
+
+This allows runtime code to detect whether a given property can be handled by the atoms function or not.
+
+This is useful when building a Box component with atoms available at the top level (e.g. `<Box padding="small">`) since you'll need some way to filter atom props from non-atom props.

packages/sprinkles/README.md

@@ -476,6 +476,14 @@ export const atoms = createAtomsFn(
 );
 ```
 
+The atoms function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.
+
+```ts
+atoms.properties.has('paddingX'); // returns true or false
+```
+
+> 💡 This is useful when building a Box component with atoms available at the top level (e.g. `<Box padding="small">`) since you’ll need some way to filter atom props from non-atom props.
+
 ---
 
 ## Thanks

packages/sprinkles/src/createAtomsFn.ts

@@ -87,19 +87,20 @@ type AtomProps<Args extends ReadonlyArray<any>> = Args extends [
   ? (L extends AtomicStyles ? ChildAtomProps<L> : never) & AtomProps<R>
   : {};
 
-export type AtomsFn<Args extends ReadonlyArray<AtomicStyles>> = (
+export type AtomsFn<Args extends ReadonlyArray<AtomicStyles>> = ((
   props: AtomProps<Args>,
-) => string;
+) => string) & { properties: Set<keyof AtomProps<Args>> };
 
 export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
   ...args: Args
 ): AtomsFn<Args> {
   const atomicStyles = Object.assign({}, ...args);
-  const shorthandNames = Object.keys(atomicStyles).filter(
+  const atomicKeys = Object.keys(atomicStyles) as Array<keyof AtomProps<Args>>;
+  const shorthandNames = atomicKeys.filter(
     (property) => 'mappings' in atomicStyles[property],
   );
 
-  return (props: any) => {
+  const atomsFn = (props: any) => {
     const classNames = [];
     const shorthands: any = {};
     const nonShorthands: any = { ...props };
@@ -289,4 +290,8 @@ export function createAtomsFn<Args extends ReadonlyArray<AtomicStyles>>(
 
     return classNames.join(' ');
   };
+
+  return Object.assign(atomsFn, {
+    properties: new Set(atomicKeys),
+  });
 }

tests/sprinkles/sprinkles.test.ts

@@ -241,6 +241,28 @@ describe('sprinkles', () => {
         `"sprinkles_paddingTop_large__1kw4bre1z sprinkles_paddingBottom_large__1kw4bre22 sprinkles_paddingLeft_small__1kw4bre1r sprinkles_paddingRight_small__1kw4bre1u"`,
       );
     });
+
+    it('should provide a static set of properties on the atoms fn', () => {
+      const atoms = createAtomsFn(
+        atomicWithShorthandStyles,
+        conditionalAtomicStyles,
+      );
+
+      expect(atoms.properties).toMatchInlineSnapshot(`
+        Set {
+          "paddingX",
+          "anotherPaddingX",
+          "color",
+          "paddingLeft",
+          "paddingRight",
+          "paddingY",
+          "display",
+          "paddingTop",
+          "paddingBottom",
+          "opacity",
+        }
+      `);
+    });
   });
 
   describe('errors', () => {