diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index c1d632c27..31c4c8449 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -13,12 +13,7 @@ import { StyleSheet, View, } from 'react-native'; -import { - AsForwarder, - createStyled, - styled1, - Theme, -} from '@gluestack-style/react'; +import { AsForwarder, createStyled, styled } from '@gluestack-style/react'; import { Wrapper } from '../../components/Wrapper'; import { AddIcon, Box, Icon } from '@gluestack/design-system'; // import { AddIcon } from '@gluestack/design-system'; @@ -26,7 +21,6 @@ import { AlertCircle, Circle, Sun } from 'lucide-react-native'; import { AnimationResolver } from '@gluestack-style/animation-plugin'; -const styled = createStyled([new AnimationResolver({})]); const styleshet = StyleSheet.create({ style: { padding: 12, @@ -37,7 +31,6 @@ const Pressable = styled( { bg: '$red500', p: '$2', - // 'bg': '$red600', // 'w': 100, // 'h': 100, @@ -115,32 +108,34 @@ const Text = styled( const StyledIcon = styled( AsForwarder, { - bg: '$red500', - variants: { - size: { - sm: { - width: 10, - height: 10, - // props: { - // size: 32, - // }, - }, - md: { - // props: { - // size: 32, - // }, - width: '$4', - height: '$4', - }, - lg: { - // props: { - // size: 32, - // }, - width: '$6', - height: '$6', - }, - }, - }, + bg: '$amber100', + bgColor: '$amber100', + + // variants: { + // size: { + // sm: { + // width: 10, + // height: 10, + // // props: { + // // size: 32, + // // }, + // }, + // md: { + // // props: { + // // size: 32, + // // }, + // width: '$4', + // height: '$4', + // }, + // lg: { + // // props: { + // // size: 32, + // // }, + // width: '$6', + // height: '$6', + // }, + // }, + // }, }, { componentName: 'MyIcon', diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index aa376c608..311828fec 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "0.2.4", + "version": "0.2.5", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js", diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 62225668c..50620e005 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -97,20 +97,26 @@ function addQuotesToObjectKeys(code) { }); traverse(ast, { - ObjectProperty: (path) => { - if (types.isTemplateLiteral(path.node.value)) { - path.node.value = types.stringLiteral( - path.node.value.quasis[0].value.raw + ObjectProperty: (objectPropertyPath) => { + if (types.isTemplateLiteral(objectPropertyPath.node.value)) { + objectPropertyPath.node.value = types.stringLiteral( + objectPropertyPath.node.value.quasis[0].value.raw ); } - if (types.isIdentifier(path.node.key)) { - path.node.key = types.stringLiteral(path.node.key.name); + if (types.isIdentifier(objectPropertyPath.node.key)) { + objectPropertyPath.node.key = types.stringLiteral( + objectPropertyPath.node.key.name + ); } - if (types.isNumericLiteral(path.node.key)) { - path.node.key = types.stringLiteral(path.node.key.extra.raw); + if (types.isNumericLiteral(objectPropertyPath.node.key)) { + objectPropertyPath.node.key = types.stringLiteral( + objectPropertyPath.node.key.extra.raw + ); } - if (types.isStringLiteral(path.node.value)) { - path.node.value = types.stringLiteral(path.node.value.value); + if (types.isStringLiteral(objectPropertyPath.node.value)) { + objectPropertyPath.node.value = types.stringLiteral( + objectPropertyPath.node.value.value + ); } }, }); @@ -118,22 +124,37 @@ function addQuotesToObjectKeys(code) { let initAst; traverse(ast, { - ObjectProperty: (path) => { - if (types.isIdentifier(path?.node?.value)) { - path.remove(); - } - if (types.isTemplateLiteral(path?.node?.value)) { - path.remove(); - } - if (types.isConditionalExpression(path?.node?.value)) { - path.remove(); + ObjectProperty: (objectPropertyPath) => { + if (types.isArrayExpression(objectPropertyPath?.node?.value)) { + let arrayElements = objectPropertyPath.node.value.elements; + const dynamicElementsIndex = []; + arrayElements.forEach((element, index) => { + if ( + types.isNewExpression(element) || + types.isIdentifier(element) || + types.isTemplateLiteral(element) + ) { + dynamicElementsIndex.push(index); + } + }); + + arrayElements = arrayElements.filter( + (element, index) => !dynamicElementsIndex.includes(index) + ); + objectPropertyPath.node.value.elements = arrayElements; + } else if ( + types.isIdentifier(objectPropertyPath?.node?.value) || + types.isTemplateLiteral(objectPropertyPath?.node?.value) || + types.isConditionalExpression(objectPropertyPath?.node?.value) + ) { + objectPropertyPath.remove(); } }, }); traverse(ast, { - VariableDeclarator: (path) => { - initAst = path.node.init; + VariableDeclarator: (variableDeclaratorPath) => { + initAst = variableDeclaratorPath.node.init; }, }); diff --git a/packages/react/package.json b/packages/react/package.json index 88af49e39..5b54631fb 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "0.2.43", + "version": "0.2.45", "keywords": [ "React Native", "Next.js", diff --git a/packages/react/src/AsForwarder.tsx b/packages/react/src/AsForwarder.tsx index 6533b6217..bccf3c0aa 100644 --- a/packages/react/src/AsForwarder.tsx +++ b/packages/react/src/AsForwarder.tsx @@ -1,9 +1,17 @@ import React from 'react'; import Svg from 'react-native-svg'; +import type { RNProps } from './types'; -const AsForwarder = ({ as, children, ...props }: any) => { +const AsForwarderTemp = ({ + as, + children, + ...props +}: any): React.ReactElement => { const As: any = as; return as ? {children} : {children}; }; -AsForwarder.displayName = '__AsForwarder__'; -export { AsForwarder }; +AsForwarderTemp.displayName = '__AsForwarder__'; + +export const AsForwarder = AsForwarderTemp as React.ComponentType< + RNProps & { as?: any } +>; diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index ec099970e..96e60a1c1 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -820,7 +820,7 @@ const getStyleIdsFromMap = ( return componentStyleObject; }; -export function verboseStyled( +export function verboseStyled( Component: React.ComponentType

, theme: Partial>, componentStyleConfig: IComponentStyleConfig = {}, @@ -1826,7 +1826,7 @@ export function verboseStyled( return StyledComp; } -export function styled( +export function styled( Component: React.ComponentType

, theme: ITheme, componentStyleConfig?: IComponentStyleConfig, diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 59443a1ed..b77cf4292 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -361,6 +361,14 @@ type PassingPropsType< } : {}; +// PluginPropsType< +// PluginType, +// GenericComponentProps, +// GenericComponentStyles, +// PLATFORM +// > + +// eslint-disable-next-line @typescript-eslint/no-unused-vars type PluginPropsType< PluginType, GenericComponentProps, @@ -398,7 +406,7 @@ export type SxProps< GenericComponentProps = unknown, PLATFORM = '', MediaQuery = '', - PluginType = [] + _PluginType = [] > = Partial< StylePropsType & PassingPropsType< @@ -407,81 +415,57 @@ export type SxProps< GenericComponentProps, MediaQuery > -> & - PluginPropsType< - PluginType, +> & { + [Key in `_${COLORMODES}`]?: SxProps< + GenericComponentStyles, + Variants, GenericComponentProps, + PLATFORM, + MediaQuery + >; +} & { + [Key in `:${IState}`]?: SxProps< GenericComponentStyles, - PLATFORM - > & { - [Key in `_${COLORMODES}`]?: SxProps< - GenericComponentStyles, - Variants, - GenericComponentProps, - PLATFORM, - MediaQuery - > & - PluginPropsType< - PluginType, - GenericComponentProps, - GenericComponentStyles, - PLATFORM - >; - } & { - [Key in `:${IState}`]?: SxProps< + Variants, + GenericComponentProps, + PLATFORM, + MediaQuery + >; +} & { + [Key in `_${PLATFORMS}`]?: SxProps< + GenericComponentStyles, + Variants, + GenericComponentProps, + Key, + MediaQuery + > & + PassingPropsType< GenericComponentStyles, Variants, GenericComponentProps, - PLATFORM, MediaQuery > & - PluginPropsType< - PluginType, - GenericComponentProps, - GenericComponentStyles, - PLATFORM - >; - } & { - [Key in `_${PLATFORMS}`]?: SxProps< + Partial<{ + [key: string]: any; + }>; +} & { + [Key in `_${string}`]?: SxProps< + RNStyledProps, + {}, + GenericComponentProps, + PLATFORM, + MediaQuery + > & + PassingPropsType< GenericComponentStyles, - Variants, - GenericComponentProps, - Key, - MediaQuery - > & - PluginPropsType< - PluginType, - GenericComponentProps, - GenericComponentStyles, - PLATFORM - > & - PassingPropsType< - GenericComponentStyles, - Variants, - GenericComponentProps, - MediaQuery - > & - Partial<{ - [key: string]: any; - }>; - } & { - [Key in `_${string}`]?: SxProps< - RNStyledProps, {}, GenericComponentProps, - PLATFORM, MediaQuery > & - PassingPropsType< - GenericComponentStyles, - {}, - GenericComponentProps, - MediaQuery - > & - Partial<{ - [key: string]: any; - }>; - }; + Partial<{ + [key: string]: any; + }>; +}; export type VariantType< Variants,