feat(styled): pass theme and children props to function props (#27)

wintercounter · Sep 23, 2021 · 6014a80 · 6014a80
1 parent fb098f4
commit 6014a80
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/packages/cryptic-css/core/src/types.ts b/packages/cryptic-css/core/src/types.ts
@@ -38,7 +38,7 @@ export interface CCSSParser extends Parser {
     ): unknown
 }
 
-export declare type CCSSPropFunction = <T>(v: CCSSPropValue, o?: T) => string
+export declare type CCSSPropFunction = <T>(v: CCSSPropValue, o?: T, p?: InputObject) => string
 export declare type CCSSPropValue =
     | string
     | number

diff --git a/packages/cryptic-css/prop-mq/src/index.ts b/packages/cryptic-css/prop-mq/src/index.ts
@@ -1,8 +1,11 @@
-import { CCSSProps } from '@cryptic-css/core'
+import { CCSSProps, CCSSPropValue } from '@cryptic-css/core'
+import { InputObject } from 'transformed'
 import { mediaQuery } from '@w11r/use-breakpoint'
 
-type MediaQueryItem = [string, CCSSProps]
-type MediaQueryItems = MediaQueryItem | MediaQueryItem[]
+export type MediaQueryItem = [string, CCSSProps]
+export type MediaQueryItems = MediaQueryItem | MediaQueryItem[]
+export type MediaQueryPropFunction = <T>(v: CCSSPropValue, o?: T, p?: InputObject) => MediaQueryItems
+export type MediaQueryValue = MediaQueryItem | MediaQueryItem[] | MediaQueryPropFunction
 
 declare module '@cryptic-css/core' {
     interface CCSSProps {
@@ -13,31 +16,31 @@ declare module '@cryptic-css/core' {
          *
          * @see https://ccss.dev/docs/api-and-packages/prop-mq
          */
-        mq?: MediaQueryItems
+        mq?: MediaQueryValue
         /**
          * # mediaQuery
          *
          * Helps you to apply CCSS rules based on screen sizes, and use query (@ based rules).
          *
          * @see https://ccss.dev/docs/api-and-packages/prop-mq
          */
-        mediaQuery?: MediaQueryItems
+        mediaQuery?: MediaQueryValue
         /**
          * # mediaQuery
          *
          * Helps you to apply CCSS rules based on screen sizes, and use query (@ based rules).
          *
          * @see https://ccss.dev/docs/api-and-packages/prop-mq
          */
-        at?: MediaQueryItems
+        at?: MediaQueryValue
         /**
          * # mediaQuery
          *
          * Helps you to apply CCSS rules based on screen sizes, and use query (@ based rules).
          *
          * @see https://ccss.dev/docs/api-and-packages/prop-mq
          */
-        media?: MediaQueryItems
+        media?: MediaQueryValue
     }
 }
 

diff --git a/packages/youeye/styled/src/factory.ts b/packages/youeye/styled/src/factory.ts
@@ -1,8 +1,9 @@
 import { CCSSProps, CCSSTransformedFn } from '@cryptic-css/core'
 // @ts-ignore
-import { StyledComponent, StyledProps, StyledInterface } from '@types/styled-components'
+import { StyledComponent, StyledProps, ThemeProviderProps, StyledInterface } from '@types/styled-components'
 
 export type UiProps = StyledProps<CCSSProps>
+export type UiPropsWithThemeProviderProps = UiProps & { children: ThemeProviderProps<any>["children"] }
 export type UiComponent = StyledComponent<'div', any, UiProps>
 export type UiComponentFactories = {
     [TTag in keyof JSX.IntrinsicElements]: StyledComponent<TTag, any, UiProps>
@@ -53,6 +54,27 @@ const isSupportedTag = (styled, tag, isNative) => {
     }
 }
 
+const preserveStyledProps = (target: UiPropsWithThemeProviderProps, source: UiPropsWithThemeProviderProps) => {
+    target.theme = source.theme
+    target.children = source.children
+
+    return target
+}
+
+const preservePropsOnCCss = (input, prop, transformedFn, inputObject) => {
+    return preserveStyledProps(input, inputObject)
+};
+
+const preservePropsOnChild = (input, prop, transformedFn, inputObject) => {
+    for (const k in inputObject.child) {
+        if (inputObject.child.hasOwnProperty(k)) {
+            preserveStyledProps(inputObject.child[k], inputObject)
+        }
+    }
+
+    return inputObject
+}
+
 type StyledCCSS = {
     Ui: UiType
     ccss: CCSSTransformedFn
@@ -72,7 +94,12 @@ export const createCreator: CreateCreator = (
     const defaultTag = isNative ? 'View' : 'div'
 
     // Just don't do anything with styled stuff
-    transformedFn.setProps([[['theme', 'children'], null, [noop], { ccssContext: false }]])
+    transformedFn
+        .setProps([
+            [['theme', 'children'], null, [noop], { ccssContext: false }],
+            [['ccss', 'css'], null, [preservePropsOnCCss, '...'], { ccssContext: false }],
+            [['child'], null, [preservePropsOnChild, '...'], { ccssContext: false }]
+        ])
 
     const Ui = styled[defaultTag].withConfig({
         componentId: `sc-ui${id}`,