From 101abeafa176bf92e0cb5d1528d2ccbcf2a3d9e8 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 6 Apr 2022 15:02:13 +0800
Subject: [PATCH] feat: skip style check (#14)

* feat: skip style check

* chore: code style

* chore: code style
---
 src/useStyleRegister.tsx | 28 +++++++++++++++++++++++-----
 tests/style.spec.tsx     | 13 +++++++++++++
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/useStyleRegister.tsx b/src/useStyleRegister.tsx
index c1a2ca07..ef385d3a 100644
--- a/src/useStyleRegister.tsx
+++ b/src/useStyleRegister.tsx
@@ -15,11 +15,17 @@ import { styleValidate } from './util';
 
 const isClientSide = canUseDom();
 
+const SKIP_CHECK = '_skip_check_';
+
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 export type CSSPropertiesWithMultiValues = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | Extract<CSSProperties[K], string>[];
+    | Extract<CSSProperties[K], string>[]
+    | {
+        [SKIP_CHECK]: boolean;
+        value: CSSProperties[K] | Extract<CSSProperties[K], string>[];
+      };
 };
 
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
@@ -54,6 +60,10 @@ function normalizeStyle(styleStr: string) {
   return serialize(compile(styleStr), stringify);
 }
 
+function isCompoundCSSProperty(value: CSSObject[string]) {
+  return typeof value === 'object' && value && SKIP_CHECK in value;
+}
+
 // Parse CSSObject to style content
 export const parseStyle = (
   interpolation: CSSInterpolation,
@@ -96,7 +106,11 @@ export const parseStyle = (
       Object.keys(style).forEach((key) => {
         const value = style[key];
 
-        if (typeof value === 'object' && value) {
+        if (
+          typeof value === 'object' &&
+          value &&
+          !isCompoundCSSProperty(value)
+        ) {
           let subInjectHash = false;
 
           // 当成嵌套对象来处理
@@ -121,8 +135,12 @@ export const parseStyle = (
             subInjectHash,
           )}`;
         } else {
-          if (process.env.NODE_ENV !== 'production') {
-            styleValidate(key, value);
+          const actualValue = (value as any)?.value ?? value;
+          if (
+            process.env.NODE_ENV !== 'production' &&
+            (typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
+          ) {
+            styleValidate(key, actualValue);
           }
 
           // 如果是样式则直接插入
@@ -132,7 +150,7 @@ export const parseStyle = (
           );
 
           // Auto suffix with px
-          let formatValue = value;
+          let formatValue = actualValue;
           if (
             !unitless[key] &&
             typeof formatValue === 'number' &&
diff --git a/tests/style.spec.tsx b/tests/style.spec.tsx
index f163053e..8f91ebed 100644
--- a/tests/style.spec.tsx
+++ b/tests/style.spec.tsx
@@ -154,4 +154,17 @@ describe('style warning', () => {
       );
     });
   });
+
+  it('skip check should work', () => {
+    const genStyle = (): CSSObject => ({
+      content: { _skip_check_: true, value: 'content' },
+    });
+    const Demo = () => {
+      const [token] = useCacheToken<DerivativeToken>(theme, []);
+      useStyleRegister({ theme, token, path: ['content'] }, () => [genStyle()]);
+      return <div />;
+    };
+    mount(<Demo />);
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
 });