diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 578314780..420fc5d73 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-style/react +## 0.2.3 + +### Patch Changes + +- Reduced DOM size for injected style tags [PR](https://github.com/gluestack/gluestack-style/pull/323) + ## 0.2.1 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index b48257d7f..0815c9b3f 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.1", + "version": "0.2.3", "keywords": [ "React Native", "Next.js", diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index c0107197c..91fd4d689 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,10 +6,8 @@ import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; import { createGlobalStyles } from './createGlobalStyles'; -import { GluestackStyleSheet } from './style-sheet'; type Config = any; let colorModeSet = false; -let styleInjected = false; export const defaultConfig: { config: Config; colorMode: COLORMODES } = { config: {}, @@ -50,23 +48,6 @@ export const StyledProvider: React.FC<{ globalStyleInjector({ ...currentConfig, propertyTokenMap }); } - if (!styleInjected) { - // setTimeout(() => { - GluestackStyleSheet.resolve({ ...config, propertyTokenMap }); - GluestackStyleSheet.injectInStyle(); - styleInjected = true; - // }, 1000); - } - const [styleInjectedOnMount, setState] = React.useState(false); - - React.useEffect(() => { - if (!styleInjectedOnMount) { - GluestackStyleSheet.resolve({ ...config, propertyTokenMap }); - GluestackStyleSheet.injectInStyle(); - setState(true); - } - }, []); - const currentColorMode = React.useMemo(() => { return colorMode ?? get() ?? 'light'; }, [colorMode]); diff --git a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts index 0e70eadc7..a232b06a0 100644 --- a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts +++ b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts @@ -25,34 +25,38 @@ export function injectComponentAndDescendantStyles( const descendantOrderResolvedVariantStyle = getDescendantResolvedVariantStyle(orderedResolved); - GluestackStyleSheet.declare( + GluestackStyleSheet.resolveByOrderResolved( componentOrderResolvedBaseStyle, type + '-base', styleTagId ? styleTagId : 'css-injected-boot-time', {}, - true + {}, + false ); - GluestackStyleSheet.declare( + GluestackStyleSheet.resolveByOrderResolved( descendantOrderResolvedBaseStyle, type + '-descendant-base', styleTagId ? styleTagId : 'css-injected-boot-time-descendant', {}, - true + {}, + false ); - GluestackStyleSheet.declare( + GluestackStyleSheet.resolveByOrderResolved( componentOrderResolvedVariantStyle, type + '-variant', styleTagId ? styleTagId : 'css-injected-boot-time', {}, - true + {}, + false ); - GluestackStyleSheet.declare( + GluestackStyleSheet.resolveByOrderResolved( descendantOrderResolvedVariantStyle, type + '-descendant-variant', styleTagId ? styleTagId : 'css-injected-boot-time-descendant', {}, - true + {}, + false ); - GluestackStyleSheet.injectInStyle(); + // GluestackStyleSheet.injectInStyle(); } diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts index f44b16058..f123956f5 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -60,15 +60,109 @@ export class StyleInjector { // } } - resolve(CONFIG: any) { - // console.log('\n>>>>> resolve >>>>>', this.#globalStyleMap); + resolveByOrderResolved( + orderResolved: any, + _wrapperElementType: any, + _wrapperElementId: any, + ExtendedConfig: any, + CONFIG: any, + shouldResolve: any = true + ) { + let toBeInjectedCssRules = ''; + let componentExtendedConfig = CONFIG; + + if (shouldResolve && ExtendedConfig) { + componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig); + } + + orderResolved.forEach((styledResolved: any) => { + if (shouldResolve) { + const theme = styledResolved?.original; + this.resolveComponentTheme( + styledResolved, + theme, + componentExtendedConfig, + _wrapperElementId, + CONFIG + ); + delete styledResolved.original; + } + this.#stylesMap.set(styledResolved.meta.cssId, { + meta: { + queryCondition: styledResolved?.meta?.queryCondition, + }, + value: styledResolved?.resolved, + }); + this.updateMap(_wrapperElementType, _wrapperElementId, styledResolved); + toBeInjectedCssRules += styledResolved.meta.cssRuleset; + }); + + this.injectStyles( + toBeInjectedCssRules, + _wrapperElementType, + _wrapperElementId + ); + } + + updateMap( + _wrapperElementType: any, + _wrapperElementId: any, + styleResolved: any + ) { + let previousStyleMap: any = new Map(); + let themeMap = new Map(); + + if (this.#globalStyleMap.get(_wrapperElementType)) { + previousStyleMap = this.#globalStyleMap.get(_wrapperElementType); + } + + if (previousStyleMap) { + if (themeMap.get(_wrapperElementId)) + themeMap = previousStyleMap.get(_wrapperElementId); + } + + themeMap.delete(styleResolved.meta.cssId); + themeMap.set(styleResolved.meta.cssId, styleResolved); + + if (themeMap.size > 0) previousStyleMap.set(_wrapperElementId, themeMap); + + if (previousStyleMap.size > 0) + this.#globalStyleMap.set(_wrapperElementType, previousStyleMap); + } + + resolveComponentTheme( + componentTheme: any, + theme: any, + componentExtendedConfig: any, + componentHashKey: any, + CONFIG: any + ) { + componentTheme.resolved = StyledValueToCSSObject( + theme, + componentExtendedConfig + ); + + delete componentTheme.meta.cssRuleset; + + if (componentTheme.meta && componentTheme.meta.queryCondition) { + const queryCondition = resolveTokensFromConfig(CONFIG, { + condition: componentTheme.meta.queryCondition, + })?.condition; + + componentTheme.meta.queryCondition = queryCondition; + } + + const cssData: any = getCSSIdAndRuleset(componentTheme, componentHashKey); + + componentTheme.meta.cssRuleset = cssData.rules.style; + } + resolve(CONFIG: any) { if (this.#globalStyleMap) { this.#globalStyleMap.forEach( (componentThemeHash: any, _wrapperElementType: any) => { componentThemeHash.forEach( (componentThemes: any, componentHashKey: any) => { - // let toBeInjectedCssRules = ''; componentThemes.forEach((componentTheme: any) => { const theme = componentTheme?.original; const ExtendedConfig = componentTheme?.extendedConfig; @@ -79,28 +173,14 @@ export class StyleInjector { componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig); } - componentTheme.resolved = StyledValueToCSSObject( - theme, - componentExtendedConfig - ); - - delete componentTheme.meta.cssRuleset; - - if (componentTheme?.meta?.queryCondition) { - const queryCondition = resolveTokensFromConfig(CONFIG, { - condition: componentTheme?.meta?.queryCondition, - }).condition; - - componentTheme.meta.queryCondition = queryCondition; - } - - const cssData: any = getCSSIdAndRuleset( + this.resolveComponentTheme( componentTheme, - componentHashKey + theme, + componentExtendedConfig, + componentHashKey, + CONFIG ); - componentTheme.meta.cssRuleset = cssData.rules.style; - this.#stylesMap.set(componentTheme.meta.cssId, { meta: { queryCondition: componentTheme?.meta?.queryCondition, @@ -127,7 +207,7 @@ export class StyleInjector { return this.#stylesMap; } - inject(cssRuleset: any, _wrapperType: any, _styleTagId: any) { + injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) { if (cssRuleset) { inject(`@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId); } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index d87956e81..7e7d6ec0e 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable no-console */ import React, { @@ -813,7 +814,13 @@ function updateOrderUnResolvedMap( ExtendedConfig ); - return orderedUnResolvedTheme; + return { + orderedUnResolvedTheme, + componentOrderResolvedBaseStyle, + componentOrderResolvedVariantStyle, + descendantOrderResolvedBaseStyle, + descendantOrderResolvedVariantStyle, + }; } const getStyleIdsFromMap = ( @@ -935,6 +942,10 @@ export function verboseStyled( component: StyleIds; descendant: StyleIds; }; + let componentOrderResolvedBaseStyle: any = {}; + let componentOrderResolvedVariantStyle: any = {}; + let descendantOrderResolvedBaseStyle: any = {}; + let descendantOrderResolvedVariantStyle: any = {}; // const orderedUnResolvedTheme = updateOrderUnResolvedMap( // theme, // componentHash, @@ -956,14 +967,25 @@ export function verboseStyled( ); } } else { - const orderedUnResolvedTheme = updateOrderUnResolvedMap( + const { + orderedUnResolvedTheme: a, + componentOrderResolvedBaseStyle: b, + componentOrderResolvedVariantStyle: c, + descendantOrderResolvedBaseStyle: d, + descendantOrderResolvedVariantStyle: f, + } = updateOrderUnResolvedMap( theme, componentHash, declarationType, ExtendedConfig ); - styleIds = getStyleIds(orderedUnResolvedTheme, componentStyleConfig); + componentOrderResolvedBaseStyle = b; + componentOrderResolvedVariantStyle = c; + descendantOrderResolvedBaseStyle = d; + descendantOrderResolvedVariantStyle = f; + + styleIds = getStyleIds(a, componentStyleConfig); } if (BUILD_TIME_PARAMS?.styleIds) { @@ -1068,8 +1090,37 @@ export function verboseStyled( propertyTokenMap, }; - GluestackStyleSheet.resolve(CONFIG); - GluestackStyleSheet.injectInStyle(); + // GluestackStyleSheet.resolve(CONFIG); + // GluestackStyleSheet.injectInStyle(); + + GluestackStyleSheet.resolveByOrderResolved( + componentOrderResolvedBaseStyle, + 'boot-base', + componentHash, + componentExtendedConfig, + CONFIG + ); + GluestackStyleSheet.resolveByOrderResolved( + componentOrderResolvedVariantStyle, + 'boot-variant', + componentHash, + componentExtendedConfig, + CONFIG + ); + GluestackStyleSheet.resolveByOrderResolved( + descendantOrderResolvedBaseStyle, + 'boot-descendant-base', + componentHash, + componentExtendedConfig, + CONFIG + ); + GluestackStyleSheet.resolveByOrderResolved( + descendantOrderResolvedVariantStyle, + 'boot-descendant-variant', + componentHash, + componentExtendedConfig, + CONFIG + ); Object.assign(styledSystemProps, CONFIG?.aliases); //@ts-ignore @@ -1376,8 +1427,8 @@ export function verboseStyled( mergedSXVariantStyleCSSIds = e; mergedSxStateProps = f; mergedSxDescendantsStyle = g; - setComponentStatePassingProps(stateProps); - setSxStatePassingProps(mergedSxStateProps); + // setComponentStatePassingProps(stateProps); + // setSxStatePassingProps(mergedSxStateProps); mergedDescendantsStyle = h; }