fix: should skip appendStyle when value is null or undefined (#242)

* fix: should convert undefined value to 0

* update

* update

* update

* update test case

Author: li-jia-nan

.gitignore

@@ -29,6 +29,7 @@ es
 dist
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 
@@ -43,4 +44,4 @@ coverage/
 .dumi/tmp-production
 .dumi/tmp-test
 
-bun.lockb
+bun.lockb

src/hooks/useStyleRegister.tsx

@@ -15,7 +15,7 @@ import StyleContext, {
   ATTR_MARK,
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
-import { isClientSide, toStyleStr, where } from '../util';
+import { isClientSide, isNonNullable, toStyleStr, where } from '../util';
 import {
   CSS_FILE_STYLE,
   existPath,
@@ -323,7 +323,9 @@ export const parseStyle = (
               appendStyle(key, item);
             });
           } else {
-            appendStyle(key, actualValue);
+            if (isNonNullable(actualValue)) {
+              appendStyle(key, actualValue);
+            }
           }
         }
       });

src/index.ts

@@ -51,6 +51,7 @@ export {
   unit,
   genCalc,
 };
+
 export type {
   TokenType,
   CSSObject,

src/util/index.ts

@@ -200,3 +200,7 @@ export function where(options?: {
   const hashSelector = `.${hashCls}`;
   return hashPriority === 'low' ? `:where(${hashSelector})` : hashSelector;
 }
+
+export const isNonNullable = <T>(val: T): val is NonNullable<T> => {
+  return val !== undefined && val !== null;
+};

tests/index.spec.tsx

@@ -948,4 +948,36 @@ describe('csssinjs', () => {
     );
     expect(styles3[2].innerHTML).not.toEqual(style);
   });
+
+  it('should skip appendStyle when value is null or undefined', () => {
+    const genStyle = (): CSSInterpolation => ({
+      '.undefined-test': {
+        padding: undefined,
+      },
+    });
+
+    const Demo: React.FC = () => {
+      const [token, hashId] = useCacheToken<DerivativeToken>(theme, [], {
+        salt: 'test',
+        cssVar: { key: 'css-var-test' },
+      });
+
+      useStyleRegister(
+        { theme, token, hashId, path: ['cssinjs-undefined-to-zero'] },
+        genStyle,
+      );
+
+      const className = clsx('undefined-test', hashId);
+
+      return <div className={className}>test</div>;
+    };
+
+    render(<Demo />);
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+
+    const styleContent = styles[styles.length - 1];
+
+    expect(styleContent.innerHTML).not.toContain('padding');
+  });
 });