Patch

example/storybook/src/advanced/BabelPlugins/index.stories.mdx

@@ -12,7 +12,7 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 ### @gluestack-style/babel-plugin-styled-resolver
 
-@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times.
+@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
 
 ### **Let us see how this Babel plugin works.**
 
@@ -168,7 +168,7 @@ module.exports = function (api) {
 };
 ```
 
-- `libraryName`: The `libraryName` option is useful in scenarios where you are exporting the styled function from a different library. This option allows you to specify the name of the library that provides the styled function. By default, the plugin assumes that the styled function is exported from `@gluestack-style/react`. However, with the `libraryName` option, you can customize it to match the actual library name where the styled function is defined.
+- `styled`: The `styled` option allows you to specify the library name & file path of the styled function. This option is useful in scenarios where you are exporting the styled function from a different library. By default, the plugin assumes that the styled function is exported from `@gluestack-style/react`. However, with the `styled` option, you can customize it to match the actual library & file name where the styled function is defined.
 
 ```js
 // babel.config.js
@@ -183,15 +183,20 @@ module.exports = function (api) {
       [
         gluestackStyleResolver,
         {
-          libraryName: '@gluestack-style/react', // Specify the library name from where the styled function is exported
+          styled: [
+            '@gluestack-style/react', // import path of the styled function
+            path.resolve(__dirname, './gluestack-ui-components/core/styled'), // file path of the styled function
+          ],
         },
       ],
     ],
   };
 };
 ```
 
-- `filename`: The filename option enables you to specify the file path of the styled function.
+- `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library.
+
+> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
 
 ```js
 // babel.config.js
@@ -206,7 +211,10 @@ module.exports = function (api) {
       [
         gluestackStyleResolver,
         {
-          filename: path.resolve(__dirname, './core/styled'), // Specify the file path of the styled function
+          components: [
+            '@gluestack-ui/themed', // import path of the components folder or library name
+            path.resolve(__dirname, './gluestack-ui-components/core/component'), // file path of the components folder
+          ],
         },
       ],
     ],

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

@@ -13,18 +13,78 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { AsForwarder, styled, Theme } from '@gluestack-style/react';
+import {
+  AsForwarder,
+  createStyled,
+  styled1,
+  Theme,
+} 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 } from 'lucide-react-native';
 
+import { AnimationResolver } from '@gluestack-style/animation-plugin';
+
+const styled = createStyled([new AnimationResolver({})]);
+const styleshet = StyleSheet.create({
+  style: {
+    padding: 12,
+  },
+});
 const Pressable = styled(
   RNPressable,
   {
     bg: '$red500',
     p: '$2',
 
+    // 'bg': '$red600',
+    // 'w': 100,
+    // 'h': 100,
+    // '_light': {
+    //   bg: '$red600',
+    // },
+    // '@base': {
+    //   bg: '$blue500',
+    // },
+    // ':hover': {
+    //   bg: '$red500',
+    // },
+    // '@sm': {
+    //   props: {
+    //     test: 'sm',
+    //   },
+    // },
+    _dark: {
+      // bg: '$amber200',
+      props: {
+        bg: 3 < 2 ? '$yellow400' : 'blue',
+      },
+    },
+
+    // '@xl': {
+    //   props: {
+    //     bg: '$green500',
+    //   },
+    // },
+
+    // 'props': {
+    //   bg: '$blue400',
+    //   // test: 'hello',
+    // },
+  },
+  {
+    componentName: 'Pressable',
+    // descendantStyle: ['_text'],
+  }
+);
+
+const Pressable1 = styled(
+  Pressable,
+  {
+    bg: '$red500',
+    p: '$2',
+
     // 'bg': '$red600',
     // 'w': 100,
     // 'h': 100,
@@ -52,22 +112,22 @@ const Text = styled(
   }
 );
 
-const MyIcon = styled(
+const StyledIcon = styled(
   AsForwarder,
   {
     variants: {
       size: {
         sm: {
-          width: 32,
-          height: 32,
-          props: {
-            size: 32,
-          },
+          width: 10,
+          height: 10,
+          // props: {
+          //   size: 32,
+          // },
         },
         md: {
-          props: {
-            size: 32,
-          },
+          // props: {
+          //   size: 32,
+          // },
           width: '$4',
           height: '$4',
         },
@@ -82,17 +142,50 @@ const MyIcon = styled(
   }
 );
 
-const MyNewIcon = styled(
-  MyIcon,
-  {},
+const MyIcon = styled(
+  StyledIcon,
+  {
+    variants: {
+      size: {
+        sm: {
+          width: 12,
+          height: 12,
+          // props: {
+          //   size: 32,
+          // },
+        },
+        md: {
+          width: 32,
+          height: 32,
+          // props: {
+          //   size: 32,
+          // },
+        },
+      },
+    },
+    props: {
+      size: 'md',
+    },
+  },
   {
     componentName: 'MyNewIcon',
   }
 );
+
+// console.log(
+//   MyIcon.isComposedComponent,
+//   MyIcon.isStyledComponent,
+//   // MyNewIcon.isComposedComponent,
+//   // MyNewIcon.isStyledComponent,
+//   'composed here'
+// );
+
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
-      <ContextBasedStylesContent />
+      <Pressable></Pressable>
+      {/* <MyIcon bg="$blue500" size="sm" />
+      <StyledIcon as={MyIcon} bg="$red500" size="sm" /> */}
     </Wrapper>
   );
 }
@@ -136,11 +229,11 @@ export function ContextBasedStylesContent() {
   //   </>
   // );
 
-  return (
-    <>
-      <MyNewIcon as={AlertCircle} size="sm"></MyNewIcon>
-    </>
-  );
+  // return (
+  //   <>
+  //     <MyNewIcon as={AlertCircle} size="sm"></MyNewIcon>
+  //   </>
+  // );
   return (
     <>
       <RNPressable
@@ -170,41 +263,36 @@ export function ContextBasedStylesContent() {
   );
 }
 
+const renderItem = (item: any) => (
+  <Pressable
+    key={item}
+    // sx={{
+    //   bg: '$amber400',
+    // }}
+  >
+    {/* <RNText>{item}</RNText> */}
+  </Pressable>
+);
+
+const renderItem2 = (item: any) => (
+  <RNPressable key={item} style={styleshet.style}>
+    {/* <RNText>{item}</RNText>r */}
+  </RNPressable>
+);
+
 const MyList = React.memo(() => {
   const time = React.useRef(Date.now());
   useEffect(() => {
     console.log(Date.now() - time.current, '>>>');
   }, []);
   const data = useMemo(
     () =>
-      Array(1)
+      Array(100)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
   );
 
-  const renderItem = useCallback(
-    (item: any) => (
-      <Pressable
-        key={item}
-        sx={{
-          bg: '$amber400',
-        }}
-      >
-        {/* <RNText>{item}</RNText> */}
-      </Pressable>
-    ),
-    []
-  );
-
-  // const renderItem2 = useCallback(
-  //   (item: any) => (
-  //     <RNPressable key={item} style={styleshet.style}>
-  //       <RNText>{item}</RNText>r
-  //     </RNPressable>
-  //   ),
-  //   []
-  // );
   return <>{data.map(renderItem)}</>;
 });
 export default ContextBasedStyles;

example/ui-examples-babel/package.json

@@ -54,19 +54,19 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
-    "expo": "~48.0.18",
+    "expo": "~47.0.14",
     "expo-app-loading": "^2.1.1",
     "expo-font": "~11.1.1",
     "expo-image": "~1.0.1",
     "expo-linear-gradient": "~12.1.2",
-    "expo-splash-screen": "~0.18.2",
+    "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.4",
     "expo-updates": "~0.16.4",
     "install": "^0.13.0",
     "lucide-react-native": "^0.161.0",
-    "react": "18.2.0",
+    "react": "18.1.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
+    "react-native": "0.70.8",
     "react-native-svg": "13.4.0"
   },
   "devDependencies": {