diff --git a/packages/cryptic-css/core/src/types.ts b/packages/cryptic-css/core/src/types.ts index 1fe277a..0c75e07 100644 --- 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 = (v: CCSSPropValue, o?: T) => string +export declare type CCSSPropFunction = (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 index 5dc6c81..f6b88cb 100644 --- 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 = (v: CCSSPropValue, o?: T, p?: InputObject) => MediaQueryItems +export type MediaQueryValue = MediaQueryItem | MediaQueryItem[] | MediaQueryPropFunction declare module '@cryptic-css/core' { interface CCSSProps { @@ -13,7 +16,7 @@ declare module '@cryptic-css/core' { * * @see https://ccss.dev/docs/api-and-packages/prop-mq */ - mq?: MediaQueryItems + mq?: MediaQueryValue /** * # mediaQuery * @@ -21,7 +24,7 @@ declare module '@cryptic-css/core' { * * @see https://ccss.dev/docs/api-and-packages/prop-mq */ - mediaQuery?: MediaQueryItems + mediaQuery?: MediaQueryValue /** * # mediaQuery * @@ -29,7 +32,7 @@ declare module '@cryptic-css/core' { * * @see https://ccss.dev/docs/api-and-packages/prop-mq */ - at?: MediaQueryItems + at?: MediaQueryValue /** * # mediaQuery * @@ -37,7 +40,7 @@ declare module '@cryptic-css/core' { * * @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 index be63c93..30b876b 100644 --- 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 +export type UiPropsWithThemeProviderProps = UiProps & { children: ThemeProviderProps["children"] } export type UiComponent = StyledComponent<'div', any, UiProps> export type UiComponentFactories = { [TTag in keyof JSX.IntrinsicElements]: StyledComponent @@ -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}`,