Merge pull request #471 from gluestack/patch

Patch

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

@@ -116,8 +116,12 @@ const Text1 = styled(
   }
 );
 
-const MyLink = styled(Link, {});
+const Box = styled(View, {
+  bg: '$blue500',
+  p: '$10',
+});
 export function ContextBasedStyles() {
+  console.log('>>>>>  component');
   return (
     <Wrapper colorMode="dark">
       {/* <StyledIcon as={CameraIcon} /> */}
@@ -129,14 +133,12 @@ export function ContextBasedStyles() {
       >
         vdkbkdfbv
       </Text1> */}
-      <MyLink
-        href={'/'}
+      <Box
+        // href={'/'}
         sx={{
-          color: '$red500',
+          bg: '$red500',
         }}
-      >
-        next link
-      </MyLink>
+      ></Box>
     </Wrapper>
   );
 }

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

packages/react/src/StyledProvider.tsx

@@ -1,11 +1,12 @@
 import { get, onChange, set } from './core/colorMode';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 import { propertyTokenMap } from './propertyTokenMap';
 import type { COLORMODES } from './types';
 import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 import { createGlobalStyles } from './createGlobalStyles';
+
 type Config = any;
 let colorModeSet = false;
 
@@ -42,7 +43,19 @@ export const StyledProvider: React.FC<{
   colorMode?: COLORMODES;
   children?: React.ReactNode;
   globalStyles?: any;
-}> = ({ config, colorMode, children, globalStyles }) => {
+  _experimentalNestedProvider: boolean;
+}> = ({
+  config,
+  colorMode,
+  children,
+  globalStyles,
+  _experimentalNestedProvider,
+}) => {
+  const inlineStyleMap: any = React.useRef({
+    initialStyleInjected: false,
+  });
+  inlineStyleMap.current.initialStyleInjected = false;
+
   const currentConfig: any = React.useMemo(() => {
     //TODO: Add this later
     return platformSpecificSpaceUnits(config, Platform.OS);
@@ -57,25 +70,40 @@ export const StyledProvider: React.FC<{
     return colorMode ?? get() ?? 'light';
   }, [colorMode]);
 
+  const _experimentalNestedProviderRef = React.useRef(null);
   React.useEffect(() => {
+    let documentElement: any = null;
+
+    if (Platform.OS === 'web') {
+      if (_experimentalNestedProvider) {
+        // write own code for nested colorMode
+        documentElement = _experimentalNestedProviderRef.current;
+      } else {
+        documentElement = document.documentElement;
+      }
+    }
     // Add gs class name
     if (Platform.OS === 'web') {
-      document.documentElement.classList.add(`gs`);
-      document.documentElement.classList.add(`gs-${currentColorMode}`);
+      documentElement.classList.add(`gs`);
+      documentElement.classList.add(`gs-${currentColorMode}`);
     }
 
     // GluestackStyleSheet.resolve({ ...config, propertyTokenMap });
     // GluestackStyleSheet.injectInStyle();
 
     onChange((currentColor: string) => {
       // only for web
-      if (Platform.OS === 'web') {
-        if (currentColor === 'dark') {
-          document.documentElement.classList.remove(`gs-light`);
-        } else {
-          document.documentElement.classList.remove(`gs-dark`);
+      if (!_experimentalNestedProvider) {
+        const documentElement = document.documentElement;
+
+        if (Platform.OS === 'web') {
+          if (currentColor === 'dark') {
+            documentElement.classList.remove(`gs-light`);
+          } else {
+            documentElement.classList.remove(`gs-dark`);
+          }
+          documentElement.classList.add(`gs-${currentColor}`);
         }
-        document.documentElement.classList.add(`gs-${currentColor}`);
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,6 +113,38 @@ export const StyledProvider: React.FC<{
     setCurrentColorMode(currentColorMode);
   }, [currentColorMode]);
 
+  React.useLayoutEffect(() => {
+    if (Platform.OS === 'web') {
+      const toBeInjectedStyles: any = {};
+
+      if (inlineStyleMap.current.initialStyleInjected) {
+        return;
+      }
+
+      Object.keys(inlineStyleMap.current).forEach((key: any) => {
+        if (key !== 'initialStyleInjected') {
+          const styles = inlineStyleMap.current[key];
+          if (!toBeInjectedStyles[key]) {
+            toBeInjectedStyles[key] = document.createDocumentFragment();
+          }
+
+          styles.forEach((style: any) => {
+            if (!document.getElementById(style.id)) {
+              toBeInjectedStyles[key].appendChild(style);
+            }
+          });
+        }
+      });
+      Object.keys(toBeInjectedStyles).forEach((key) => {
+        let wrapperElement = document.querySelector('#' + key);
+        if (wrapperElement) {
+          wrapperElement.appendChild(toBeInjectedStyles[key]);
+        }
+        // delete inlineStyleMap.current[key];
+      });
+      inlineStyleMap.current.initialStyleInjected = true;
+    }
+  });
   // // Set colormode for the first time
   if (!colorModeSet) {
     setCurrentColorMode(currentColorMode);
@@ -95,19 +155,37 @@ export const StyledProvider: React.FC<{
     config?.globalStyle && createGlobalStyles(config.globalStyle);
 
   const contextValue = React.useMemo(() => {
-    return {
+    const styledData = {
       config: currentConfig,
       globalStyle: globalStyleMap,
       animationDriverData,
       setAnimationDriverData,
+      inlineStyleMap: inlineStyleMap.current,
     };
+
+    if (_experimentalNestedProvider) {
+      //@ts-ignore
+      styledData._experimentalNestedProvider = _experimentalNestedProvider;
+      //@ts-ignore
+      styledData.colorMode = colorMode;
+    }
+    return styledData;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentConfig, globalStyleMap, animationDriverData]);
 
-  return (
+  const providerComponent = (
     <StyledContext.Provider value={contextValue}>
       {children}
     </StyledContext.Provider>
   );
+
+  if (_experimentalNestedProvider) {
+    return (
+      <View ref={_experimentalNestedProviderRef}>{providerComponent}</View>
+    );
+  } else {
+    return <>{providerComponent}</>;
+  }
 };
 
 export const useStyled = () => React.useContext(StyledContext);

packages/react/src/resolver/injectComponentAndDescendantStyles.ts

@@ -12,7 +12,8 @@ export function injectComponentAndDescendantStyles(
   styleTagId?: string,
   type: 'boot' | 'inline' = 'boot',
   _GluestackStyleSheet: StyleInjector = GluestackStyleSheet,
-  platform: string = ''
+  platform: string = '',
+  inlineStyleMap?: any
 ) {
   const [
     componentOrderResolvedBaseStyle,
@@ -84,7 +85,7 @@ export function injectComponentAndDescendantStyles(
   );
 
   if (platform === 'web') {
-    GluestackStyleSheet.inject(toBeInjected);
+    GluestackStyleSheet.inject(toBeInjected, inlineStyleMap);
   }
 
   return styleCSSIdsArr;

packages/react/src/style-sheet/index.ts

@@ -109,10 +109,15 @@ export class StyleInjector {
     return toBeInjected;
   }
 
-  inject(toBeInjected: any = {}) {
+  inject(toBeInjected: any = {}, inlineStyleMap: any) {
     Object.keys(toBeInjected).forEach((type) => {
       Object.keys(toBeInjected[type]).forEach((styleTag) => {
-        this.injectStyles(toBeInjected[type][styleTag], type, styleTag);
+        this.injectStyles(
+          toBeInjected[type][styleTag],
+          type,
+          styleTag,
+          inlineStyleMap
+        );
       });
     });
   }
@@ -162,9 +167,19 @@ export class StyleInjector {
     return this.#globalStyleMap;
   }
 
-  injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) {
+  injectStyles(
+    cssRuleset: any,
+    _wrapperType: any,
+    _styleTagId: any,
+    inlineStyleMap: any
+  ) {
     if (cssRuleset) {
-      inject(`@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId);
+      inject(
+        `@media screen {${cssRuleset}}`,
+        _wrapperType as any,
+        _styleTagId,
+        inlineStyleMap
+      );
     }
   }
 }

packages/react/src/styled.tsx

@@ -906,7 +906,7 @@ export function verboseStyled<P, Variants, ComCon>(
     styleIds = BUILD_TIME_PARAMS?.verbosedStyleIds;
   }
 
-  function injectSx(sx: any, type: any = 'inline') {
+  function injectSx(sx: any, type: any = 'inline', inlineStyleMap?: any) {
     const inlineSxTheme = {
       baseStyle: sx,
     };
@@ -965,7 +965,8 @@ export function verboseStyled<P, Variants, ComCon>(
       sxHash,
       type,
       GluestackStyleSheet,
-      Platform.OS
+      Platform.OS,
+      inlineStyleMap
     );
 
     return orderedSXResolved;
@@ -1030,7 +1031,9 @@ export function verboseStyled<P, Variants, ComCon>(
     const sxCompoundVariantFlatternStyleObject = React.useRef({});
     const sxDescendantFlattenStyles: any = React.useRef({});
 
-    const COLOR_MODE: any = get();
+    const COLOR_MODE: any = styledContext._experimentalNestedProvider
+      ? styledContext.colorMode
+      : get();
 
     if (!styleHashCreated) {
       CONFIG = {
@@ -1057,7 +1060,6 @@ export function verboseStyled<P, Variants, ComCon>(
         // const resolvedComponentExtendedTheme = EXTENDED_THEME;
 
         theme = deepMerge(theme, resolvedComponentExtendedTheme.theme);
-
         // @ts-ignore
         Object.assign(themeDefaultProps, theme?.baseStyle?.props);
         if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) {
@@ -1068,7 +1070,8 @@ export function verboseStyled<P, Variants, ComCon>(
             EXTENDED_THEME_BUILD_TIME_PARAMS?.verbosedStyleIds
           );
           GluestackStyleSheet.inject(
-            EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected
+            EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected,
+            styledContext.inlineStyleMap
           );
         } else {
           // Merge of Extended Config Style ID's with Component Style ID's
@@ -1082,7 +1085,10 @@ export function verboseStyled<P, Variants, ComCon>(
             CONFIG,
             componentExtendedConfig
           );
-          GluestackStyleSheet.inject(extendedStylesToBeInjected);
+          GluestackStyleSheet.inject(
+            extendedStylesToBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       }
 
@@ -1131,12 +1137,18 @@ export function verboseStyled<P, Variants, ComCon>(
           componentExtendedConfig
         );
         if (Platform.OS === 'web') {
-          GluestackStyleSheet.inject(toBeInjected);
+          GluestackStyleSheet.inject(
+            toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       } else {
         if (Platform.OS === 'web') {
           //@ts-ignore
-          GluestackStyleSheet.inject(BUILD_TIME_PARAMS.toBeInjected);
+          GluestackStyleSheet.inject(
+            BUILD_TIME_PARAMS.toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
       }
 
@@ -1227,7 +1239,10 @@ export function verboseStyled<P, Variants, ComCon>(
         );
 
         if (Platform.OS === 'web') {
-          GluestackStyleSheet.inject(toBeInjected);
+          GluestackStyleSheet.inject(
+            toBeInjected,
+            styledContext.inlineStyleMap
+          );
         }
         isInjected = true;
       }
@@ -1430,11 +1445,19 @@ export function verboseStyled<P, Variants, ComCon>(
 
     function injectAndUpdateSXProps(filteredPassingSx: any) {
       if (Object.keys(filteredComponentSx).length > 0) {
-        orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline');
+        orderedComponentSXResolved = injectSx(
+          filteredComponentSx,
+          'inline',
+          styledContext.inlineStyleMap
+        );
       }
 
       if (Object.keys(filteredPassingSx).length > 0) {
-        orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing');
+        orderedPassingSXResolved = injectSx(
+          filteredPassingSx,
+          'passing',
+          styledContext.inlineStyleMap
+        );
       }
 
       const orderedSXResolved = [

packages/react/src/utils/css-injector/utils/inject.ts

@@ -5,13 +5,16 @@ type IWrapperType =
   | 'boot-descendant'
   | 'inline-descendant';
 
+export const WRAPPER_BLOCK_PREFIX = 'gs-injected';
+
 export const hasCss = (_id: any, _text: any) => {};
 
 export const addCss = (_id: any, _text: any) => {};
 export const injectCss = (
   _css: any,
   _wrapperType: IWrapperType,
-  _styleTagId: string
+  _styleTagId: string,
+  _inlineStyleMap?: any
 ) => {};
 export const injectGlobalCss = (
   _css: any,