fix(skeleton, gradient-text): causing page error in some old browsers, …

…closes #1867
tusen-ai · Dec 19, 2021 · 6651d31 · 6651d31
1 parent da35e10
commit 6651d31
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - Fix `n-transfer` list doesn't follow container height when style.height is set, closes [#1879](https://github.com/TuSimple/naive-ui/issues/1879).
+- Fix `n-skeleton` & `n-gradient-text` cause runtime error in some old browsers, closes [#1867](https://github.com/TuSimple/naive-ui/issues/1867).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - 修复 `n-transfer` 在自定义高度后内部列表和容器高度不一致，关闭 [#1879](https://github.com/TuSimple/naive-ui/issues/1879)
+- 修复 `n-skeleton` 和 `n-gradient-text` 在某些较老的浏览器导致运行错误，关闭 [#1867](https://github.com/TuSimple/naive-ui/issues/1867)
 
 ### Feats
 

diff --git a/src/_utils/composable/use-houdini.ts b/src/_utils/composable/use-houdini.ts
@@ -1,12 +1,11 @@
-import { onBeforeMount } from 'vue'
-
 let houdiniRegistered = false
 
 export function useHoudini (): void {
-  onBeforeMount(() => {
-    if (!houdiniRegistered) {
-      houdiniRegistered = true
-      if ((window?.CSS as any)?.registerProperty) {
+  if (typeof window === 'undefined') return
+  if (!houdiniRegistered) {
+    houdiniRegistered = true
+    if ('registerProperty' in window?.CSS) {
+      try {
         ;(CSS as any).registerProperty({
           name: '--color-start',
           syntax: '<color>',
@@ -19,7 +18,7 @@ export function useHoudini (): void {
           inherits: false,
           initialValue: '#0000'
         })
-      }
+      } catch (e) {}
     }
-  })
+  }
 }