Merge pull request #411 from gluestack/patch

chore: @gluestack-style/[email protected]

example/ui-examples-babel/App.tsx

@@ -137,16 +137,27 @@ export function ContextBasedStylesContent() {
   );
 }
 
-const renderItem = (item: any) => (
-  <Pressable
-    key={item}
-    sx={{
-      bg: '$amber400',
-    }}
-  >
-    {/* <RNText>{item}</RNText> */}
-  </Pressable>
-);
+const RenderItem = (item: any) => {
+  const [active, setActive] = React.useState(false);
+  return (
+    <Pressable
+      key={item}
+      onPressIn={() => setActive(true)}
+      onPressOut={() => setActive(false)}
+      states={{
+        active,
+      }}
+      sx={{
+        'bg': '$amber400',
+        ':active': {
+          bg: '$pink500',
+        },
+      }}
+    >
+      {/* <RNText>{item}</RNText> */}
+    </Pressable>
+  );
+};
 
 const renderItem2 = (item: any) => (
   <RNPressable key={item} style={styleshet.style}>
@@ -164,7 +175,7 @@ const MyList = React.memo(() => {
   }, []);
   const data = useMemo(
     () =>
-      Array(100)
+      Array(1000)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
@@ -182,7 +193,9 @@ const MyList = React.memo(() => {
       >
         {endTime}
       </Text>
-      {data.map(renderItem)}
+      {data.map((_, k) => (
+        <RenderItem key={k} />
+      ))}
     </>
   );
 });

example/ui-examples-babel/babel.config.js

@@ -1,5 +1,6 @@
 const myBabel = require('../../packages/babel-plugin-styled-resolver/src/index.js');
 const path = require('path');
+// process.env.GLUESTACK_STYLE_TARGET = 'native';
 
 module.exports = function (api) {
   api.cache(true);
@@ -11,13 +12,41 @@ module.exports = function (api) {
         {
           configPath: path.join(__dirname, './gluestack-ui.config.ts'),
           configThemePath: ['theme'],
-          // styled: [
-          //   // '@gluestack-style/react',
-          //   // path.resolve(__dirname, './gluestack-ui-components/core/styled'),
-          // ],
+          styled: [
+            // '@gluestack-style/react',
+            path.join(__dirname, '../../packages/react/src'),
+          ],
           // components: ['@gluesatck-ui/themed'],
         },
       ],
+      [
+        'module-resolver',
+        {
+          alias: {
+            // For development, we want to alias the library to the source
+            ['@gluestack-style/react']: path.join(
+              __dirname,
+              '../../packages/react/src'
+            ),
+            // ['@gluestack-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+            // ['@dank-style/react']: path.join(
+            //   __dirname,
+            //   '../../packages/react/src'
+            // ),
+            // ['@gluestack-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+            // ['@dank-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
+          },
+        },
+      ],
     ],
   };
 };

example/ui-examples-babel/package.json

@@ -4,11 +4,10 @@
   "scripts": {
     "start": "expo start --dev-client",
     "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "run:ios": "expo start --ios",
+    "ios": "GLUESTACK_STYLE_TARGET=native expo start --ios",
+    "web": "GLUESTACK_STYLE_TARGET=web expo start --web",
     "build": "tsc",
-    "native:prod": "expo start --no-dev --minify"
+    "native:prod": "GLUESTACK_STYLE_TARGET=native expo start --no-dev --minify"
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",

example/ui-examples/babel.config.js

@@ -23,10 +23,10 @@ module.exports = function (api) {
         {
           alias: {
             // For development, we want to alias the library to the source
-            // ['@gluestack-style/react']: path.join(
-            //   __dirname,
-            //   '../../packages/react/lib/commonjs'
-            // ),
+            ['@gluestack-style/react']: path.join(
+              __dirname,
+              '../../packages/react/src'
+            ),
             // ['@gluestack-style/animation-plugin']: path.join(
             //   __dirname,
             //   '../../packages/animation-plugin/src'

packages/babel-plugin-styled-resolver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-style/babel-plugin-styled-resolver",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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

@@ -447,6 +447,7 @@ module.exports = function (b) {
   const components = ['@gluestack-ui/themed'];
   let isStyledPathConfigured = false;
   let isComponentsPathConfigured = false;
+  let targetPlatform = process.env.GLUESTACK_STYLE_TARGET;
 
   return {
     name: 'ast-transform', // not required
@@ -884,6 +885,17 @@ module.exports = function (b) {
             let orderResolvedArrayExpression = [];
 
             orderedResolvedTheme.forEach((styledResolved) => {
+              if (targetPlatform === 'native') {
+                delete styledResolved.original;
+                delete styledResolved.value;
+                delete styledResolved.meta.cssRulesSet;
+                delete styledResolved.meta.weight;
+                delete styledResolved.meta.weight;
+                delete styledResolved.type;
+                delete styledResolved.componentHash;
+                delete styledResolved.extendedConfig;
+                delete styledResolved.value;
+              }
               let orderedResolvedAst = generateObjectAst(styledResolved);
               orderResolvedArrayExpression.push(orderedResolvedAst);
             });
@@ -898,12 +910,6 @@ module.exports = function (b) {
                 t.jsxExpressionContainer(styleIdsAst)
               )
             );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(
-                t.jsxIdentifier('toBeInjected'),
-                t.jsxExpressionContainer(toBeInjectedAst)
-              )
-            );
             jsxOpeningElementPath.node.attributes.push(
               t.jsxAttribute(
                 t.jsxIdentifier('orderedResolved'),
@@ -912,15 +918,6 @@ module.exports = function (b) {
                 )
               )
             );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(t.jsxIdentifier('sxHash'), t.stringLiteral(sxHash))
-            );
-            jsxOpeningElementPath.node.attributes.push(
-              t.jsxAttribute(
-                t.jsxIdentifier('styledIds'),
-                t.jsxExpressionContainer(orderedStyleIdsArrayAst)
-              )
-            );
           }
 
           if (

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.38",
+  "version": "0.2.40",
   "keywords": [
     "React Native",
     "Next.js",

packages/react/src/generateStylePropsFromCSSIds.ts

@@ -147,11 +147,10 @@ export function generateStylePropsFromCSSIds(
       const nativeStyleMap = GluestackStyleSheet.getStyleMap();
       styleCSSIds.forEach((cssId: any) => {
         const nativeStyle = nativeStyleMap.get(cssId);
+
         if (nativeStyle) {
           const queryCondition = nativeStyle?.meta?.queryCondition;
-          const styleSheetIds = nativeStyle?.value;
-          const styleSheet = styleSheetIds;
-
+          const styleSheet = nativeStyle?.resolved;
           if (queryCondition) {
             if (isValidBreakpoint(config, queryCondition)) {
               styleObj.push(styleSheet);