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 afd0108cc..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.17", + "version": "1.0.18", "keywords": [ "React Native", "Next.js", diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index b8a50b7a4..09a8695bc 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -88,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) { @@ -124,6 +121,7 @@ export const StyledProvider: React.FC<{ Object.keys(inlineStyleMap.current).forEach((key: any) => { if (key !== 'initialStyleInjected') { const styles = inlineStyleMap.current[key]; + if (!toBeInjectedStyles[key]) { toBeInjectedStyles[key] = document.createDocumentFragment(); } @@ -135,6 +133,7 @@ export const StyledProvider: React.FC<{ }); } }); + Object.keys(toBeInjectedStyles).forEach((key) => { let wrapperElement = document.querySelector('#' + key); if (wrapperElement) { @@ -142,6 +141,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..75878b463 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -10,9 +10,13 @@ import { inject } from '../utils/css-injector'; 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( @@ -28,8 +32,10 @@ export class StyleInjector { ...styledResolved, type: _wrapperElementId, componentHash: _styleTagId, + id: this.#idCounter, extendedConfig, }); + this.#idCounter++; styleIds.push(styledResolved.meta.cssId); } }); @@ -68,18 +74,28 @@ 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; - - // this.injectStyles( - // styledResolved.meta.cssRuleset, - // styledResolved?.type, - // styledResolved?.componentHash - // ); + 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, { + id: styledResolved.id, + cssRuleset: cssRuleset ?? '', + }); + } else { + toBeInjected[type].set(styleTag, { + id: cummialtiveCssRuleset?.id, + cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset, + }); + } + if (styledResolved) { this.#globalStyleMap.set(styledResolved.meta.cssId, { ...styledResolved, @@ -98,12 +114,29 @@ 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; + this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId); + + 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, { + id: styledResolved.id, + cssRuleset: cssRuleset ?? '', + }); + } else { + toBeInjected[type].set(styleTag, { + id: cummialtiveCssRuleset?.id, + cssRuleset: cummialtiveCssRuleset?.cssRuleset + cssRuleset, + }); + } }); return toBeInjected; @@ -111,13 +144,8 @@ export class StyleInjector { inject(toBeInjected: any = {}, inlineStyleMap: any) { Object.keys(toBeInjected).forEach((type) => { - Object.keys(toBeInjected[type]).forEach((styleTag) => { - this.injectStyles( - toBeInjected[type][styleTag], - type, - styleTag, - inlineStyleMap - ); + toBeInjected[type].forEach(({ id, cssRuleset }: any, styleTag: any) => { + this.injectStyles(cssRuleset, type, styleTag, inlineStyleMap, id); }); }); } @@ -171,14 +199,16 @@ export class StyleInjector { cssRuleset: any, _wrapperType: any, _styleTagId: any, - inlineStyleMap: any + inlineStyleMap: any, + id: any ) { if (cssRuleset) { inject( `@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId, - inlineStyleMap + inlineStyleMap, + id ); } } 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..29894ee3f 100644 --- a/packages/react/src/utils/css-injector/utils/inject.ts +++ b/packages/react/src/utils/css-injector/utils/inject.ts @@ -10,11 +10,13 @@ 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, - _inlineStyleMap?: any + _inlineStyleMap?: 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 443e50719..135ccbe7f 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -118,9 +118,9 @@ export const injectCss = ( css: any, wrapperType: IWrapperType, styleTagId: string, - inlineStyleMap?: any + inlineStyleMap?: any, + id?: any ) => { - // let modifiedStylesheet = {} as any; if (!toBeFlushedStyles[wrapperType]) { toBeFlushedStyles[wrapperType] = {}; } @@ -146,9 +146,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 {