From c28e1cfa429bae03c457de53c8e2abf8b45360ea Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Thu, 28 Jul 2022 22:01:22 +0800
Subject: [PATCH] fix(hooks): [use-namespace] exclude invalid CSS variables
 (#8905)

* fix(hooks): [use-namespace] exclude invalid CSS variables

* test(hooks): [use-namespace] add test
---
 packages/hooks/__tests__/use-namespace.test.tsx | 15 +++++++++++++++
 packages/hooks/use-namespace/index.ts           |  8 ++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/hooks/__tests__/use-namespace.test.tsx b/packages/hooks/__tests__/use-namespace.test.tsx
index 2a6094e506..b1333700e4 100644
--- a/packages/hooks/__tests__/use-namespace.test.tsx
+++ b/packages/hooks/__tests__/use-namespace.test.tsx
@@ -7,6 +7,14 @@ import type { VueWrapper } from '@vue/test-utils'
 const TestComp = defineComponent({
   setup() {
     const ns = useNamespace('table')
+    const cssVar = ns.cssVar({
+      'border-style': 'solid',
+      'border-width': '',
+    })
+    const cssVarBlock = ns.cssVarBlock({
+      'text-color': '#409eff',
+      'active-color': '',
+    })
     return () => (
       <div
         id="testId"
@@ -27,6 +35,7 @@ const TestComp = defineComponent({
           ns.is('hover', undefined), // return empty string
           ns.is('clicked', false), // return empty string
         ]}
+        style={{ ...cssVar, ...cssVarBlock }}
       >
         text
       </div>
@@ -64,5 +73,11 @@ describe('use-locale', () => {
       'ep-table-body__content--active', // bem('body', 'content', 'active')
       'is-focus', // is('focus')
     ])
+
+    const style = wrapper.find('#testId').attributes('style')
+    expect(style).toMatch('--ep-border-style: solid;')
+    expect(style).not.toMatch('--ep-border-width:')
+    expect(style).toMatch('--ep-table-text-color: #409eff;')
+    expect(style).not.toMatch('--ep-table-active-color:')
   })
 })
diff --git a/packages/hooks/use-namespace/index.ts b/packages/hooks/use-namespace/index.ts
index c3f07ec338..fe703e6e6c 100644
--- a/packages/hooks/use-namespace/index.ts
+++ b/packages/hooks/use-namespace/index.ts
@@ -62,7 +62,9 @@ export const useNamespace = (block: string) => {
   const cssVar = (object: Record<string, string>) => {
     const styles: Record<string, string> = {}
     for (const key in object) {
-      styles[`--${namespace.value}-${key}`] = object[key]
+      if (object[key]) {
+        styles[`--${namespace.value}-${key}`] = object[key]
+      }
     }
     return styles
   }
@@ -70,7 +72,9 @@ export const useNamespace = (block: string) => {
   const cssVarBlock = (object: Record<string, string>) => {
     const styles: Record<string, string> = {}
     for (const key in object) {
-      styles[`--${namespace.value}-${block}-${key}`] = object[key]
+      if (object[key]) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key]
+      }
     }
     return styles
   }