Merge pull request #429 from gluestack/release/@gluestack-style/babel…

…[email protected]

Release/@gluestack style/babel plugin styled [email protected]

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -13,20 +13,14 @@ 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';
 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',

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",

packages/babel-plugin-styled-resolver/src/index.js

@@ -97,43 +97,64 @@ 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
+        );
       }
     },
   });
 
   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;
     },
   });
 

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",

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 ? <As {...props}>{children}</As> : <Svg {...props}>{children}</Svg>;
 };
-AsForwarder.displayName = '__AsForwarder__';
-export { AsForwarder };
+AsForwarderTemp.displayName = '__AsForwarder__';
+
+export const AsForwarder = AsForwarderTemp as React.ComponentType<
+  RNProps & { as?: any }
+>;

packages/react/src/styled.tsx

@@ -820,7 +820,7 @@ const getStyleIdsFromMap = (
   return componentStyleObject;
 };
 
-export function verboseStyled<P, Variants, ComCon, PluginType>(
+export function verboseStyled<P, Variants, ComCon, PluginType = unknown>(
   Component: React.ComponentType<P>,
   theme: Partial<IVerbosedTheme<Variants, P>>,
   componentStyleConfig: IComponentStyleConfig<ComCon> = {},
@@ -1826,7 +1826,7 @@ export function verboseStyled<P, Variants, ComCon, PluginType>(
   return StyledComp;
 }
 
-export function styled<P, Variants, ComCon, PluginType = []>(
+export function styled<P, Variants, ComCon, PluginType = unknown>(
   Component: React.ComponentType<P>,
   theme: ITheme<Variants, P, PluginType>,
   componentStyleConfig?: IComponentStyleConfig<ComCon>,

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<GenericComponentStyles, PLATFORM> &
     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,