Merge pull request #479 from jpudysz/fix/ssr

fix: ssr issues
jpudysz · Jan 15, 2025 · 0f7e357 · 0f7e357
2 parents 526c75f + 5350990
commit 0f7e357
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -10,6 +10,7 @@ import type { UnistylesServices } from './types'
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 
 export class UnistylesState {
+    isInitialized = false
     themes = new Map<string, UnistylesTheme>()
     cssThemes = new Map<string, UnistylesTheme>()
     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)