diff --git a/src/server/useServerUnistyles.tsx b/src/server/useServerUnistyles.tsx index 389e27ad..407b5d56 100644 --- a/src/server/useServerUnistyles.tsx +++ b/src/server/useServerUnistyles.tsx @@ -37,5 +37,6 @@ export const useServerUnistyles = () => { if (typeof window !== 'undefined') { UnistylesWeb.registry.css.hydrate(window.__UNISTYLES_STATE__) + document.querySelector('#unistyles-script')?.remove() } } diff --git a/src/web/convert/style.ts b/src/web/convert/style.ts index eb6f8f9a..392678f1 100644 --- a/src/web/convert/style.ts +++ b/src/web/convert/style.ts @@ -53,7 +53,8 @@ const CSS_NUMBER_KEYS = new Set([ 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', - 'strokeWidth' + 'strokeWidth', + 'aspectRatio' ]) const convertMap = { diff --git a/src/web/css/state.ts b/src/web/css/state.ts index b1f7d057..393a444e 100644 --- a/src/web/css/state.ts +++ b/src/web/css/state.ts @@ -93,6 +93,9 @@ export class CSSState { this.mainMap.forEach(styles => { styles.delete(hash) }) + this.mqMap.forEach(styles => { + styles.delete(hash) + }) if (this.styleTag) { this.styleTag.innerText = this.getStyles() diff --git a/src/web/registry.ts b/src/web/registry.ts index efe59aca..954b3047 100644 --- a/src/web/registry.ts +++ b/src/web/registry.ts @@ -75,9 +75,16 @@ export class UnistylesRegistry { stylesCounter.delete(ref) - if (stylesCounter.size === 0 && !document.querySelector(`.${hash}`)) { - this.css.remove(hash) - this.stylesCache.delete(hash) + if (stylesCounter.size === 0) { + // Move this to the end of the event loop so the element is removed from the DOM + Promise.resolve().then(() => { + if (document.querySelector(`.${hash}`)) { + return + } + + this.css.remove(hash) + this.stylesCache.delete(hash) + }) return true } diff --git a/src/web/state.ts b/src/web/state.ts index cfbf4dd5..12f0f044 100644 --- a/src/web/state.ts +++ b/src/web/state.ts @@ -10,6 +10,7 @@ import type { UnistylesServices } from './types' type UnistylesSettings = Partial['settings']>> export class UnistylesState { + isInitialized = false themes = new Map() cssThemes = new Map() themeName?: AppThemeName @@ -32,6 +33,11 @@ export class UnistylesState { constructor(private services: UnistylesServices) {} init = (config: UnistylesConfig) => { + if (this.isInitialized) { + return + } + + this.isInitialized = true this.initThemes(config.themes, config.settings?.CSSVars) this.initBreakpoints(config.breakpoints)