diff --git a/packages/remax-runtime/src/__tests__/utils/plainStyle.test.ts b/packages/remax-runtime/src/__tests__/utils/plainStyle.test.ts index 95a5bde2c..fcfadd53f 100644 --- 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 index e037be5dd..aca558b9b 100644 --- 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) => { 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'; }