feat: add

front-of-house · Apr 11, 2023 · dc49db5 · dc49db5
1 parent a38dcbe
commit dc49db5
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 3 deletions.
diff --git a/.changeset/witty-rivers-smash.md b/.changeset/witty-rivers-smash.md
@@ -0,0 +1,5 @@
+---
+"@svbstrate/core": patch
+---
+
+Add `customProperty` support to theme. `customProperty` allows you to define an arbitrary property name and a function to process it and return a style object.
diff --git a/packages/core/lib/__tests__/index.test.ts b/packages/core/lib/__tests__/index.test.ts
@@ -408,3 +408,29 @@ test("issue #7", async () => {
     "@media (min-width: 400px)": { color: "red", background: "tomato" },
   });
 });
+
+test("customProperties", () => {
+  const custom = createTheme({
+    tokens: {
+      color: {
+        primary: "blue",
+      },
+    },
+    customProperties: {
+      // @ts-expect-error un-typed custom property
+      shadow(value, theme) {
+        return {
+          boxShadow: `0 0 0 1px ${theme.color[value]}`,
+        };
+      },
+    },
+  });
+  const styles = style(
+    {
+      shadow: "primary",
+    },
+    custom
+  );
+
+  expect(styles.boxShadow).toEqual(`0 0 0 1px blue`);
+});
diff --git a/packages/core/lib/__tests__/test b/packages/core/lib/__tests__/test
@@ -21,6 +21,10 @@ declare module "../" {
   interface Variants {
     btn: "primary" | "secondary";
   }
+
+  interface CustomProperties {
+    shadow: 'large' | 'small'
+  }
 }
 
 const theme = s.createTheme({
@@ -59,6 +63,12 @@ const theme = s.createTheme({
       },
     },
   },
+  customProperties: {
+    shadow(value, theme) {
+      return {
+      }
+    }
+  }
 });
 
 s.style(
@@ -79,7 +89,8 @@ s.style(
     },
     w: 5,
     other: 0,
-    row: false
+    row: false,
+    shadow: 'large'
   },
   theme
 );
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
@@ -34,6 +34,18 @@ export function explode(
         styles,
         theme.variants[prop as keyof types.Variants][value as string]
       );
+    } else if (theme.customProperties[prop as keyof types.CustomProperties]) {
+      /*
+       * Custom property exists, merge it in.
+       */
+      Object.assign(
+        styles,
+        // @ts-expect-error
+        theme.customProperties[prop as keyof types.CustomProperties](
+          value,
+          theme.tokens
+        )
+      );
     } else if (typeof value === "object" && !Array.isArray(value)) {
       /*
        * If we have some other object here, we need to recurse.
@@ -230,6 +242,7 @@ export function createTheme(
     shorthands: Object.assign({}, theme.shorthands || {}),
     macros: Object.assign({}, theme.macros || {}),
     variants: Object.assign({}, theme.variants || {}),
+    customProperties: Object.assign({}, theme.customProperties || {}),
     properties: Object.assign({}, cssProperties, theme.properties),
   };
 }
diff --git a/packages/core/lib/types.ts b/packages/core/lib/types.ts
@@ -89,6 +89,8 @@ export interface Macros {}
 export interface PresetVariants {} // unused
 export interface Variants {}
 
+export interface CustomProperties {}
+
 export type MapShorthandToToken<
   Prop extends keyof CSSProperties,
   Token extends keyof BaseTokens
@@ -113,7 +115,8 @@ export type SvbstrateCSSStyleObject = {
   paddingBottom?: MapShorthandToToken<"paddingBottom", "space">;
   paddingLeft?: MapShorthandToToken<"paddingLeft", "space">;
   paddingRight?: MapShorthandToToken<"paddingRight", "space">;
-} & Partial<Shorthands>;
+} & Partial<Shorthands> &
+  Partial<CustomProperties>;
 
 export type SvbstratePsuedoStyleObject = {
   // psuedo selector blocks
@@ -156,6 +159,12 @@ export interface ThemeConfig {
       [Value in Variants[Variant]]: SvbstrateStyleObject;
     };
   };
+  customProperties: {
+    [Property in keyof CustomProperties]: (
+      value: Value,
+      theme: Tokens
+    ) => SvbstrateStyleObject;
+  };
   properties: {
     [Property in keyof CSSProperties]?: {
       token?: keyof ThemeConfig["tokens"];

diff --git a/packages/react-native/lib/__tests__/test b/packages/react-native/lib/__tests__/test
@@ -9,6 +9,10 @@ declare module '@svbstrate/core' {
       secondary: "#ff4567";
     };
   }
+
+  interface Variants {
+    shadow: 'large' | 'small'
+  }
 }
 
 function App() {
@@ -21,9 +25,14 @@ function App() {
             secondary: "#ff4567",
           },
           space: [],
+        },
+        variants: {
+          shadow(value, theme) {
+            return value
+          }
         }
       }}>
-        <Box as={Box} cx={theme => ({ color: theme.color.primary })}>Hello</Box>
+        <Box as={Box}>Hello</Box>
       </ThemeProvider>
     </>
   )