proof of concept working

1 files changed, 20 insertions, 3 deletions

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5a0cba668..84b85a2a8 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -21,12 +21,29 @@ export const media = {
 };
 
 /// media helper
-export interface MediaChoice {
-    sm: string;
+export interface ScreenSpecifications {
+    default: string;
+    sm?: string;
     md?: string;
     lg?: string;
 }
+export type MediaChoice = string | ScreenSpecifications;
 // TODO: handle string too
 export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    return media.small`width: ${choice.sm}`;
+    let res: InterpolationValue[];
+    if (typeof choice === 'string') {
+        res = css`
+            width: ${choice};
+        `;
+    } else {
+        res = css`
+            width: ${choice.default};
+            ${choice.lg && media.large`width: ${choice.lg}`}
+            ${choice.md && media.medium`width: ${choice.md}`}
+            ${choice.sm && media.small`width: ${choice.sm}`}
+        `;
+    }
+
+    console.log(res.toString());
+    return res;
 };