From 7220c1c4068e1b366c146d5c293ecfc986de2d27 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 27 Nov 2023 12:27:00 +0530 Subject: [PATCH 01/18] fix: injection order --- packages/react/src/StyledProvider.tsx | 6 + packages/react/src/style-sheet/index.ts | 112 +++++++++++++++--- packages/react/src/styled.tsx | 11 +- .../src/utils/css-injector/utils/inject.ts | 3 +- .../utils/css-injector/utils/inject.web.ts | 5 +- 5 files changed, 113 insertions(+), 24 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index b8a50b7a4..90be401c5 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,6 +6,7 @@ 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; @@ -121,9 +122,12 @@ export const StyledProvider: React.FC<{ return; } + GluestackStyleSheet.injectAllCss(inlineStyleMap.current); + Object.keys(inlineStyleMap.current).forEach((key: any) => { if (key !== 'initialStyleInjected') { const styles = inlineStyleMap.current[key]; + if (!toBeInjectedStyles[key]) { toBeInjectedStyles[key] = document.createDocumentFragment(); } @@ -135,6 +139,7 @@ export const StyledProvider: React.FC<{ }); } }); + Object.keys(toBeInjectedStyles).forEach((key) => { let wrapperElement = document.querySelector('#' + key); if (wrapperElement) { @@ -142,6 +147,7 @@ export const StyledProvider: React.FC<{ } // delete inlineStyleMap.current[key]; }); + inlineStyleMap.current.initialStyleInjected = true; } }); diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts index d3d82f311..3b84d3e88 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -10,9 +10,11 @@ import { inject } from '../utils/css-injector'; export type DeclarationType = 'boot' | 'forwarded'; export class StyleInjector { #globalStyleMap: any; + #toBeInjectedIdsArray: Array; constructor() { this.#globalStyleMap = new Map(); + this.#toBeInjectedIdsArray = []; } declare( @@ -68,12 +70,31 @@ export class StyleInjector { ); } - if (!toBeInjected[styledResolved.type]) - toBeInjected[styledResolved.type] = {}; - if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) - toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; - toBeInjected[styledResolved.type][styledResolved.componentHash] += - styledResolved.meta.cssRuleset; + // if (!toBeInjected[styledResolved.type]) + // toBeInjected[styledResolved.type] = {}; + // if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) + // toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; + // toBeInjected[styledResolved.type][styledResolved.componentHash] += + // styledResolved.meta.cssRuleset; + + const type = styledResolved?.type; + const styleTag = styledResolved?.componentHash; + const cssRuleset = styledResolved?.meta?.cssRuleset; + + if (!toBeInjected[type]) { + toBeInjected[type] = new Map(); + } + + const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); + + if (!cummialtiveCssRuleset) { + toBeInjected[type].set(styleTag, ''); + toBeInjected[type].set(styleTag, cssRuleset); + } else { + toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); + } + + this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); // this.injectStyles( // styledResolved.meta.cssRuleset, @@ -98,30 +119,83 @@ export class StyleInjector { orderResolvedStyleMap.forEach((styledResolved: any) => { this.#globalStyleMap.set(styledResolved.meta.cssId, styledResolved); - if (!toBeInjected[styledResolved.type]) - toBeInjected[styledResolved.type] = {}; - if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) - toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; - toBeInjected[styledResolved.type][styledResolved.componentHash] += - styledResolved.meta.cssRuleset; + // if (!toBeInjected[styledResolved.type]) + // toBeInjected[styledResolved.type] = {}; + // if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) + // toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; + // toBeInjected[styledResolved.type][styledResolved.componentHash] += + // styledResolved.meta.cssRuleset; + + const type = styledResolved?.type; + const styleTag = styledResolved?.componentHash; + const cssRuleset = styledResolved?.meta?.cssRuleset; + + if (!toBeInjected[type]) { + toBeInjected[type] = new Map(); + } + + const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); + + if (!cummialtiveCssRuleset) { + toBeInjected[type].set(styleTag, ''); + toBeInjected[type].set(styleTag, cssRuleset); + } else { + toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); + } }); return toBeInjected; } - inject(toBeInjected: any = {}, inlineStyleMap: any) { + inject( + toBeInjected: any = {}, + inlineStyleMap: any, + dontInject: boolean = false + ) { Object.keys(toBeInjected).forEach((type) => { - Object.keys(toBeInjected[type]).forEach((styleTag) => { + toBeInjected[type].forEach((cssRuleset: any, styleTag: any) => { this.injectStyles( - toBeInjected[type][styleTag], + cssRuleset, type, styleTag, - inlineStyleMap + inlineStyleMap, + dontInject ); }); }); } + injectAllCss(inlineStyleMap: any) { + const toBeInjectedStylesMap: any = {}; + const globalStyleMap = this.#globalStyleMap; + + globalStyleMap.forEach((styledResolved: any, styleTagId: any) => { + const type = styledResolved?.type; + const styleTag = styledResolved?.componentHash; + const cssRuleset = styledResolved?.meta?.cssRuleset; + + if (this.#toBeInjectedIdsArray.includes(styleTagId)) { + if (!toBeInjectedStylesMap[type]) { + toBeInjectedStylesMap[type] = new Map(); + } + + const cummilativeCssRuleset = toBeInjectedStylesMap[type].get(styleTag); + + if (!cummilativeCssRuleset) { + toBeInjectedStylesMap[type].set(styleTag, ''); + toBeInjectedStylesMap[type].set(styleTag, cssRuleset); + } else { + toBeInjectedStylesMap[type].set( + styleTag, + cummilativeCssRuleset + cssRuleset + ); + } + } + }); + + this.inject(toBeInjectedStylesMap, inlineStyleMap, true); + } + resolveComponentTheme( componentTheme: any, theme: any, @@ -171,14 +245,16 @@ export class StyleInjector { cssRuleset: any, _wrapperType: any, _styleTagId: any, - inlineStyleMap: any + inlineStyleMap: any, + dontInject: boolean ) { if (cssRuleset) { inject( `@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId, - inlineStyleMap + inlineStyleMap, + dontInject ); } } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 1f2a87ce7..f83ad31e6 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1070,6 +1070,8 @@ export function verboseStyled( // middleware logic + let componentExtendedTheme = {}; + // Injecting style if (EXTENDED_THEME) { // RUN Middlewares @@ -1081,11 +1083,10 @@ export function verboseStyled( EXTENDED_THEME ); + componentExtendedTheme = resolvedComponentExtendedTheme.theme; + // 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) { const EXTENDED_THEME_BUILD_TIME_PARAMS = EXTENDED_THEME?.BUILD_TIME_PARAMS; @@ -1181,6 +1182,10 @@ export function verboseStyled( } } + theme = deepMerge(theme, componentExtendedTheme); + // @ts-ignore + Object.assign(themeDefaultProps, theme?.baseStyle?.props); + Object.assign(styledSystemProps, CONFIG?.aliases); const { diff --git a/packages/react/src/utils/css-injector/utils/inject.ts b/packages/react/src/utils/css-injector/utils/inject.ts index bba2b8ed5..edaa4eced 100644 --- a/packages/react/src/utils/css-injector/utils/inject.ts +++ b/packages/react/src/utils/css-injector/utils/inject.ts @@ -14,7 +14,8 @@ export const injectCss = ( _css: any, _wrapperType: IWrapperType, _styleTagId: string, - _inlineStyleMap?: any + _inlineStyleMap?: any, + _dontInject?: any ) => {}; export const injectGlobalCss = ( _css: any, diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 443e50719..13b1a9b07 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -118,7 +118,8 @@ export const injectCss = ( css: any, wrapperType: IWrapperType, styleTagId: string, - inlineStyleMap?: any + inlineStyleMap?: any, + dontInject: boolean = true ) => { // let modifiedStylesheet = {} as any; if (!toBeFlushedStyles[wrapperType]) { @@ -130,7 +131,7 @@ export const injectCss = ( toBeFlushedStyles[wrapperType][styleTagId] = [css]; } - if (typeof window !== 'undefined') { + if (typeof window !== 'undefined' && dontInject) { let wrapperElement = document.querySelector( '#' + `${WRAPPER_BLOCK_PREFIX}-${wrapperType}` ); From 6e21e61d4d82c5e38beba9ca3991c099b1e2c0b4 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 27 Nov 2023 18:05:01 +0530 Subject: [PATCH 02/18] v1.0.18-alpha.3 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index afd0108cc..efe36aec0 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": "1.0.17", + "version": "1.0.18-alpha.3", "keywords": [ "React Native", "Next.js", From e99dfab5469283b83eb93f8eb34d50f4ce591629 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 13:41:55 +0530 Subject: [PATCH 03/18] v1.0.18-alpha.4 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index efe36aec0..4cb35c1b9 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": "1.0.18-alpha.3", + "version": "1.0.18-alpha.4", "keywords": [ "React Native", "Next.js", From cfb0181f05b9ddc9316d3fd4493adb78708cbf4a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 16:23:39 +0530 Subject: [PATCH 04/18] v1.0.18-alpha.5 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 4cb35c1b9..39ea25ffa 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": "1.0.18-alpha.4", + "version": "1.0.18-alpha.5", "keywords": [ "React Native", "Next.js", From 6d492a3d5cc9839acc1a1e142d02a0aeba487a5a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 17:27:48 +0530 Subject: [PATCH 05/18] v1.0.18-alpha.6 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 39ea25ffa..59f260609 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": "1.0.18-alpha.5", + "version": "1.0.18-alpha.6", "keywords": [ "React Native", "Next.js", From eb457e7cc47a82bc6f98b9d085b2a5c57bd30733 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 17:36:16 +0530 Subject: [PATCH 06/18] v1.0.18-alpha.7 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 59f260609..0ea5fc153 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": "1.0.18-alpha.6", + "version": "1.0.18-alpha.7", "keywords": [ "React Native", "Next.js", From 434c265220d9299fd3752d040c1fc80db688efeb Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 18:21:02 +0530 Subject: [PATCH 07/18] v1.0.18-alpha.10 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 0ea5fc153..9e26bb1f5 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": "1.0.18-alpha.7", + "version": "1.0.18-alpha.10", "keywords": [ "React Native", "Next.js", From 0f09fdaa7273010d44f84b7ab1416c5a8795a45c Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 18:44:03 +0530 Subject: [PATCH 08/18] v1.0.18-alpha.11 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 9e26bb1f5..fffc63ba2 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": "1.0.18-alpha.10", + "version": "1.0.18-alpha.11", "keywords": [ "React Native", "Next.js", From 5dcf2f069884244eba818bc3f64b9139b678e9ca Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 18:49:41 +0530 Subject: [PATCH 09/18] v1.0.18-alpha.12 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index fffc63ba2..1d3d15c4f 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": "1.0.18-alpha.11", + "version": "1.0.18-alpha.12", "keywords": [ "React Native", "Next.js", From fa187eb73c313d4768f321fce3fb9a61e97121d8 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 28 Nov 2023 23:20:51 +0530 Subject: [PATCH 10/18] v1.0.18-alpha.13 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 1d3d15c4f..a71da18a4 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": "1.0.18-alpha.12", + "version": "1.0.18-alpha.13", "keywords": [ "React Native", "Next.js", From f233bcb617ecb68823eb68a844c50f17684c683a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 12:26:02 +0530 Subject: [PATCH 11/18] v1.0.18-alpha.14 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index a71da18a4..6b2668a0a 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": "1.0.18-alpha.13", + "version": "1.0.18-alpha.14", "keywords": [ "React Native", "Next.js", From a0a6749d4a2c7b408ceee76e2ec521544f1bc73c Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 12:30:43 +0530 Subject: [PATCH 12/18] v1.0.18-alpha.15 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 6b2668a0a..60e7573b0 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": "1.0.18-alpha.14", + "version": "1.0.18-alpha.15", "keywords": [ "React Native", "Next.js", From d91b435fb7d20472e77e44962329ca158a1cb1a0 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 12:32:38 +0530 Subject: [PATCH 13/18] v1.0.18-alpha.16 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 60e7573b0..a9901f23b 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": "1.0.18-alpha.15", + "version": "1.0.18-alpha.16", "keywords": [ "React Native", "Next.js", From 26479616362b3c0f3258c0245c51cc94401851c1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 12:47:28 +0530 Subject: [PATCH 14/18] fix: injection order --- packages/react/src/StyledProvider.tsx | 8 +- .../injectComponentAndDescendantStyles.ts | 1 + packages/react/src/style-sheet/index.ts | 107 +++++++++++++----- .../src/utils/css-injector/utils/inject.ts | 9 +- .../utils/css-injector/utils/inject.web.ts | 25 +++- 5 files changed, 111 insertions(+), 39 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 90be401c5..c2232a0a1 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,7 +6,7 @@ import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; import { createGlobalStyles } from './createGlobalStyles'; -import { GluestackStyleSheet } from './style-sheet'; +// import { GluestackStyleSheet } from './style-sheet'; type Config = any; let colorModeSet = false; @@ -67,6 +67,10 @@ export const StyledProvider: React.FC<{ globalStyleInjector({ ...currentConfig, propertyTokenMap }); } + // if (Platform.OS === 'web' && !inlineStyleMap.current.initialStyleInjected) { + // GluestackStyleSheet.generateFlush(); + // } + const currentColorMode = React.useMemo(() => { return colorMode ?? get() ?? 'light'; }, [colorMode]); @@ -122,7 +126,7 @@ export const StyledProvider: React.FC<{ return; } - GluestackStyleSheet.injectAllCss(inlineStyleMap.current); + // GluestackStyleSheet.injectAllCss(inlineStyleMap.current); Object.keys(inlineStyleMap.current).forEach((key: any) => { if (key !== 'initialStyleInjected') { diff --git a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts index b3a37804b..474fb99a3 100644 --- a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts +++ b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts @@ -85,6 +85,7 @@ export function injectComponentAndDescendantStyles( ); if (platform === 'web') { + // GluestackStyleSheet.flushStyle(toBeInjected); GluestackStyleSheet.inject(toBeInjected, inlineStyleMap); } diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts index 3b84d3e88..1afd70d0b 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -7,14 +7,17 @@ import { addThemeConditionInMeta, } from '../utils'; import { inject } from '../utils/css-injector'; +import { updateFlush } from '../utils/css-injector/utils/inject'; export type DeclarationType = 'boot' | 'forwarded'; export class StyleInjector { #globalStyleMap: any; #toBeInjectedIdsArray: Array; + #idCounter: number; constructor() { this.#globalStyleMap = new Map(); this.#toBeInjectedIdsArray = []; + this.#idCounter = 0; } declare( @@ -30,8 +33,10 @@ export class StyleInjector { ...styledResolved, type: _wrapperElementId, componentHash: _styleTagId, + id: this.#idCounter, extendedConfig, }); + this.#idCounter++; styleIds.push(styledResolved.meta.cssId); } }); @@ -88,10 +93,15 @@ export class StyleInjector { const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); if (!cummialtiveCssRuleset) { - toBeInjected[type].set(styleTag, ''); - toBeInjected[type].set(styleTag, cssRuleset); + toBeInjected[type].set(styleTag, { + id: styledResolved.id, + cssRuleset: cssRuleset ?? '', + }); } else { - toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); + toBeInjected[type].set(styleTag, { + id: cummialtiveCssRuleset?.id, + cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset, + }); } this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); @@ -119,6 +129,8 @@ export class StyleInjector { orderResolvedStyleMap.forEach((styledResolved: any) => { this.#globalStyleMap.set(styledResolved.meta.cssId, styledResolved); + this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); + // if (!toBeInjected[styledResolved.type]) // toBeInjected[styledResolved.type] = {}; // if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) @@ -126,41 +138,39 @@ export class StyleInjector { // toBeInjected[styledResolved.type][styledResolved.componentHash] += // styledResolved.meta.cssRuleset; - const type = styledResolved?.type; - const styleTag = styledResolved?.componentHash; - const cssRuleset = styledResolved?.meta?.cssRuleset; + // const type = styledResolved?.type; + // const styleTag = styledResolved?.componentHash; + // const cssRuleset = styledResolved?.meta?.cssRuleset; - if (!toBeInjected[type]) { - toBeInjected[type] = new Map(); - } + // if (!toBeInjected[type]) { + // toBeInjected[type] = new Map(); + // } - const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); + // const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); - if (!cummialtiveCssRuleset) { - toBeInjected[type].set(styleTag, ''); - toBeInjected[type].set(styleTag, cssRuleset); - } else { - toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); - } + // if (!cummialtiveCssRuleset) { + // toBeInjected[type].set(styleTag, ''); + // toBeInjected[type].set(styleTag, cssRuleset); + // } else { + // toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); + // } }); return toBeInjected; } - inject( - toBeInjected: any = {}, - inlineStyleMap: any, - dontInject: boolean = false - ) { + inject(toBeInjected: any = {}, inlineStyleMap: any) { + Object.keys(toBeInjected).forEach((type) => { + toBeInjected[type].forEach(({ id, cssRuleset }: any, styleTag: any) => { + this.injectStyles(cssRuleset, type, styleTag, inlineStyleMap, id); + }); + }); + } + + flushStyle(toBeInjected: any = {}) { Object.keys(toBeInjected).forEach((type) => { toBeInjected[type].forEach((cssRuleset: any, styleTag: any) => { - this.injectStyles( - cssRuleset, - type, - styleTag, - inlineStyleMap, - dontInject - ); + updateFlush(cssRuleset, type as any, styleTag); }); }); } @@ -193,7 +203,42 @@ export class StyleInjector { } }); - this.inject(toBeInjectedStylesMap, inlineStyleMap, true); + this.inject(toBeInjectedStylesMap, inlineStyleMap); + } + + generateFlush() { + const toBeInjectedStylesMap: any = {}; + const globalStyleMap = this.#globalStyleMap; + + globalStyleMap.forEach((styledResolved: any, styleTagId: any) => { + const type = styledResolved?.type; + const styleTag = styledResolved?.componentHash; + const cssRuleset = styledResolved?.meta?.cssRuleset; + + if (this.#toBeInjectedIdsArray.includes(styleTagId)) { + if (!toBeInjectedStylesMap[type]) { + toBeInjectedStylesMap[type] = new Map(); + } + + const cummilativeCssRuleset = toBeInjectedStylesMap[type].get(styleTag); + + if (!cummilativeCssRuleset) { + toBeInjectedStylesMap[type].set(styleTag, ''); + toBeInjectedStylesMap[type].set(styleTag, cssRuleset); + } else { + toBeInjectedStylesMap[type].set( + styleTag, + cummilativeCssRuleset + cssRuleset + ); + } + } + }); + + Object.keys(toBeInjectedStylesMap).forEach((type) => { + toBeInjectedStylesMap[type].forEach((cssRuleset: any, styleTag: any) => { + updateFlush(`@media screen {${cssRuleset}}`, type as any, styleTag); + }); + }); } resolveComponentTheme( @@ -246,7 +291,7 @@ export class StyleInjector { _wrapperType: any, _styleTagId: any, inlineStyleMap: any, - dontInject: boolean + id: any ) { if (cssRuleset) { inject( @@ -254,7 +299,7 @@ export class StyleInjector { _wrapperType as any, _styleTagId, inlineStyleMap, - dontInject + id ); } } diff --git a/packages/react/src/utils/css-injector/utils/inject.ts b/packages/react/src/utils/css-injector/utils/inject.ts index edaa4eced..8b57d67f2 100644 --- a/packages/react/src/utils/css-injector/utils/inject.ts +++ b/packages/react/src/utils/css-injector/utils/inject.ts @@ -10,12 +10,19 @@ export const WRAPPER_BLOCK_PREFIX = 'gs-injected'; export const hasCss = (_id: any, _text: any) => {}; export const addCss = (_id: any, _text: any) => {}; + +export const updateFlush = ( + _css: any, + _wrapperType: IWrapperType, + _styleTagId: string +) => {}; + export const injectCss = ( _css: any, _wrapperType: IWrapperType, _styleTagId: string, _inlineStyleMap?: any, - _dontInject?: any + _id?: any ) => {}; export const injectGlobalCss = ( _css: any, diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 13b1a9b07..280471478 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -114,14 +114,28 @@ const createStyle = (styleTagId: any, css: any) => { return style; }; +export const updateFlush = ( + _css: any, + _wrapperType: IWrapperType, + _styleTagId: string +) => { + // if (!toBeFlushedStyles[wrapperType]) { + // toBeFlushedStyles[wrapperType] = {}; + // } + // if (toBeFlushedStyles[wrapperType][styleTagId]) { + // toBeFlushedStyles[wrapperType][styleTagId].push(css); + // } else { + // toBeFlushedStyles[wrapperType][styleTagId] = [css]; + // } +}; + export const injectCss = ( css: any, wrapperType: IWrapperType, styleTagId: string, inlineStyleMap?: any, - dontInject: boolean = true + id?: any ) => { - // let modifiedStylesheet = {} as any; if (!toBeFlushedStyles[wrapperType]) { toBeFlushedStyles[wrapperType] = {}; } @@ -131,7 +145,7 @@ export const injectCss = ( toBeFlushedStyles[wrapperType][styleTagId] = [css]; } - if (typeof window !== 'undefined' && dontInject) { + if (typeof window !== 'undefined') { let wrapperElement = document.querySelector( '#' + `${WRAPPER_BLOCK_PREFIX}-${wrapperType}` ); @@ -147,9 +161,10 @@ export const injectCss = ( const inlineMapStyles = inlineStyleMap[styleMapId]; if (inlineMapStyles) { - inlineMapStyles.push(style); + inlineMapStyles[id] = style; } else { - inlineStyleMap[styleMapId] = [style]; + inlineStyleMap[styleMapId] = []; + inlineStyleMap[styleMapId][id] = style; } // console.log('hello here >>>> there'); } else { From 5777cab2d51260b02c0dad1f4248d8007bdb831f Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 12:55:21 +0530 Subject: [PATCH 15/18] v1.0.18-alpha.17 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index a9901f23b..1d93150e1 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": "1.0.18-alpha.16", + "version": "1.0.18-alpha.17", "keywords": [ "React Native", "Next.js", From 4d48efa1b09d8eae913bf4a31dc572d7dec6b1ea Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 13:04:10 +0530 Subject: [PATCH 16/18] fix: cleanup --- packages/react/src/StyledProvider.tsx | 10 -- .../injectComponentAndDescendantStyles.ts | 1 - packages/react/src/style-sheet/index.ts | 129 +++--------------- .../src/utils/css-injector/utils/inject.ts | 6 - .../utils/css-injector/utils/inject.web.ts | 15 -- 5 files changed, 19 insertions(+), 142 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index c2232a0a1..09a8695bc 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,7 +6,6 @@ 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; @@ -67,10 +66,6 @@ export const StyledProvider: React.FC<{ globalStyleInjector({ ...currentConfig, propertyTokenMap }); } - // if (Platform.OS === 'web' && !inlineStyleMap.current.initialStyleInjected) { - // GluestackStyleSheet.generateFlush(); - // } - const currentColorMode = React.useMemo(() => { return colorMode ?? get() ?? 'light'; }, [colorMode]); @@ -93,9 +88,6 @@ export const StyledProvider: React.FC<{ documentElement.classList.add(`gs-${currentColorMode}`); } - // GluestackStyleSheet.resolve({ ...config, propertyTokenMap }); - // GluestackStyleSheet.injectInStyle(); - onChange((currentColor: string) => { // only for web if (Platform.OS === 'web' && !_experimentalNestedProvider) { @@ -126,8 +118,6 @@ export const StyledProvider: React.FC<{ return; } - // GluestackStyleSheet.injectAllCss(inlineStyleMap.current); - Object.keys(inlineStyleMap.current).forEach((key: any) => { if (key !== 'initialStyleInjected') { const styles = inlineStyleMap.current[key]; diff --git a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts index 474fb99a3..b3a37804b 100644 --- a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts +++ b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts @@ -85,7 +85,6 @@ export function injectComponentAndDescendantStyles( ); if (platform === 'web') { - // GluestackStyleSheet.flushStyle(toBeInjected); GluestackStyleSheet.inject(toBeInjected, inlineStyleMap); } diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts index 1afd70d0b..75878b463 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -7,7 +7,6 @@ import { addThemeConditionInMeta, } from '../utils'; import { inject } from '../utils/css-injector'; -import { updateFlush } from '../utils/css-injector/utils/inject'; export type DeclarationType = 'boot' | 'forwarded'; export class StyleInjector { #globalStyleMap: any; @@ -75,13 +74,6 @@ export class StyleInjector { ); } - // if (!toBeInjected[styledResolved.type]) - // toBeInjected[styledResolved.type] = {}; - // if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) - // toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; - // toBeInjected[styledResolved.type][styledResolved.componentHash] += - // styledResolved.meta.cssRuleset; - const type = styledResolved?.type; const styleTag = styledResolved?.componentHash; const cssRuleset = styledResolved?.meta?.cssRuleset; @@ -104,13 +96,6 @@ export class StyleInjector { }); } - this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); - - // this.injectStyles( - // styledResolved.meta.cssRuleset, - // styledResolved?.type, - // styledResolved?.componentHash - // ); if (styledResolved) { this.#globalStyleMap.set(styledResolved.meta.cssId, { ...styledResolved, @@ -131,112 +116,36 @@ export class StyleInjector { this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); - // if (!toBeInjected[styledResolved.type]) - // toBeInjected[styledResolved.type] = {}; - // if (!toBeInjected[styledResolved.type][styledResolved.componentHash]) - // toBeInjected[styledResolved.type][styledResolved.componentHash] = ''; - // toBeInjected[styledResolved.type][styledResolved.componentHash] += - // styledResolved.meta.cssRuleset; - - // const type = styledResolved?.type; - // const styleTag = styledResolved?.componentHash; - // const cssRuleset = styledResolved?.meta?.cssRuleset; - - // if (!toBeInjected[type]) { - // toBeInjected[type] = new Map(); - // } - - // const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); - - // if (!cummialtiveCssRuleset) { - // toBeInjected[type].set(styleTag, ''); - // toBeInjected[type].set(styleTag, cssRuleset); - // } else { - // toBeInjected[type].set(styleTag, cummialtiveCssRuleset + cssRuleset); - // } - }); - - return toBeInjected; - } - - inject(toBeInjected: any = {}, inlineStyleMap: any) { - Object.keys(toBeInjected).forEach((type) => { - toBeInjected[type].forEach(({ id, cssRuleset }: any, styleTag: any) => { - this.injectStyles(cssRuleset, type, styleTag, inlineStyleMap, id); - }); - }); - } - - flushStyle(toBeInjected: any = {}) { - Object.keys(toBeInjected).forEach((type) => { - toBeInjected[type].forEach((cssRuleset: any, styleTag: any) => { - updateFlush(cssRuleset, type as any, styleTag); - }); - }); - } - - injectAllCss(inlineStyleMap: any) { - const toBeInjectedStylesMap: any = {}; - const globalStyleMap = this.#globalStyleMap; - - globalStyleMap.forEach((styledResolved: any, styleTagId: any) => { const type = styledResolved?.type; const styleTag = styledResolved?.componentHash; const cssRuleset = styledResolved?.meta?.cssRuleset; - if (this.#toBeInjectedIdsArray.includes(styleTagId)) { - if (!toBeInjectedStylesMap[type]) { - toBeInjectedStylesMap[type] = new Map(); - } + if (!toBeInjected[type]) { + toBeInjected[type] = new Map(); + } - const cummilativeCssRuleset = toBeInjectedStylesMap[type].get(styleTag); + const cummialtiveCssRuleset = toBeInjected[type].get(styleTag); - if (!cummilativeCssRuleset) { - toBeInjectedStylesMap[type].set(styleTag, ''); - toBeInjectedStylesMap[type].set(styleTag, cssRuleset); - } else { - toBeInjectedStylesMap[type].set( - styleTag, - cummilativeCssRuleset + cssRuleset - ); - } + if (!cummialtiveCssRuleset) { + toBeInjected[type].set(styleTag, { + id: styledResolved.id, + cssRuleset: cssRuleset ?? '', + }); + } else { + toBeInjected[type].set(styleTag, { + id: cummialtiveCssRuleset?.id, + cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset, + }); } }); - this.inject(toBeInjectedStylesMap, inlineStyleMap); + return toBeInjected; } - generateFlush() { - const toBeInjectedStylesMap: any = {}; - const globalStyleMap = this.#globalStyleMap; - - globalStyleMap.forEach((styledResolved: any, styleTagId: any) => { - const type = styledResolved?.type; - const styleTag = styledResolved?.componentHash; - const cssRuleset = styledResolved?.meta?.cssRuleset; - - if (this.#toBeInjectedIdsArray.includes(styleTagId)) { - if (!toBeInjectedStylesMap[type]) { - toBeInjectedStylesMap[type] = new Map(); - } - - const cummilativeCssRuleset = toBeInjectedStylesMap[type].get(styleTag); - - if (!cummilativeCssRuleset) { - toBeInjectedStylesMap[type].set(styleTag, ''); - toBeInjectedStylesMap[type].set(styleTag, cssRuleset); - } else { - toBeInjectedStylesMap[type].set( - styleTag, - cummilativeCssRuleset + cssRuleset - ); - } - } - }); - - Object.keys(toBeInjectedStylesMap).forEach((type) => { - toBeInjectedStylesMap[type].forEach((cssRuleset: any, styleTag: any) => { - updateFlush(`@media screen {${cssRuleset}}`, type as any, styleTag); + inject(toBeInjected: any = {}, inlineStyleMap: any) { + Object.keys(toBeInjected).forEach((type) => { + toBeInjected[type].forEach(({ id, cssRuleset }: any, styleTag: any) => { + this.injectStyles(cssRuleset, type, styleTag, inlineStyleMap, id); }); }); } diff --git a/packages/react/src/utils/css-injector/utils/inject.ts b/packages/react/src/utils/css-injector/utils/inject.ts index 8b57d67f2..29894ee3f 100644 --- a/packages/react/src/utils/css-injector/utils/inject.ts +++ b/packages/react/src/utils/css-injector/utils/inject.ts @@ -11,12 +11,6 @@ export const hasCss = (_id: any, _text: any) => {}; export const addCss = (_id: any, _text: any) => {}; -export const updateFlush = ( - _css: any, - _wrapperType: IWrapperType, - _styleTagId: string -) => {}; - export const injectCss = ( _css: any, _wrapperType: IWrapperType, diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 280471478..135ccbe7f 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -114,21 +114,6 @@ const createStyle = (styleTagId: any, css: any) => { return style; }; -export const updateFlush = ( - _css: any, - _wrapperType: IWrapperType, - _styleTagId: string -) => { - // if (!toBeFlushedStyles[wrapperType]) { - // toBeFlushedStyles[wrapperType] = {}; - // } - // if (toBeFlushedStyles[wrapperType][styleTagId]) { - // toBeFlushedStyles[wrapperType][styleTagId].push(css); - // } else { - // toBeFlushedStyles[wrapperType][styleTagId] = [css]; - // } -}; - export const injectCss = ( css: any, wrapperType: IWrapperType, From fc58313a83b92dc055f12ad4c2f9c4c31b41f3f8 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 13:05:05 +0530 Subject: [PATCH 17/18] v1.0.18-alpha.18 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 1d93150e1..489963db8 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": "1.0.18-alpha.17", + "version": "1.0.18-alpha.18", "keywords": [ "React Native", "Next.js", From 7e25d86161f69c5e3e6241a4b79c9bab1ed1a270 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 13:21:48 +0530 Subject: [PATCH 18/18] v1.0.18 --- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d98ef13ce..b8421291e 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-style/react +## 1.0.18 + +### Patch Changes + +- Fixed style injection order incase of composed styled component [PR](https://github.com/gluestack/gluestack-style/pull/544) + ## 1.0.17 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 489963db8..b35587259 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": "1.0.18-alpha.18", + "version": "1.0.18", "keywords": [ "React Native", "Next.js",