fix: 修复 CSS 变量的数字会被加上单位的问题 (#1870)

fix #1869
remaxjs · Mar 29, 2022 · 0df4c76 · 0df4c76
1 parent 7d2e826
commit 0df4c76
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/remax-runtime/src/__tests__/utils/plainStyle.test.ts b/packages/remax-runtime/src/__tests__/utils/plainStyle.test.ts
@@ -8,4 +8,9 @@ describe('plainStyle pxToRpx', () => {
     style = plainStyle({ width: '100.55555px' });
     expect(style.indexOf('100.56rpx') > -1).toBeTruthy();
   });
+
+  it('does not transform css variable', () => {
+    const style = plainStyle({ '--column': 1 });
+    expect(style).toMatchInlineSnapshot(`"--column:1;"`);
+  });
 });
diff --git a/packages/remax-runtime/src/utils/plainStyle/index.ts b/packages/remax-runtime/src/utils/plainStyle/index.ts
@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react';
 import { isUnitlessNumber } from './CSSProperty';
 import { find, RuntimeOptions } from '@remax/framework-shared';
 
@@ -39,12 +38,12 @@ const transformPx = (value: string) => {
   });
 };
 
-const plainStyle = (style: CSSProperties) => {
+const plainStyle = (style: Record<string, string | number>) => {
   return Object.keys(style)
     .reduce((acc: string[], key) => {
       let value = (style as any)[key];
 
-      if (!Number.isNaN(Number(value)) && !isUnitlessNumber[key]) {
+      if (!Number.isNaN(Number(value)) && !isUnitlessNumber[key] && !key?.startsWith('--')) {
         value = value + 'rpx';
       }