fix: 修复内联样式 vendor prefix 解析错误的问题

fix #259
remaxjs · Sep 30, 2019 · 1e7997d · 1e7997d
1 parent fbeab45
commit 1e7997d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap b/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap
@@ -231,6 +231,31 @@ Object {
 }
 `;
 
+exports[`remax render renders vendor prefix style 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "text": "hello",
+          "type": "plain-text",
+        },
+      ],
+      "id": 2,
+      "props": Object {
+        "style": "-webkit-line-clamp:2;height:100px;",
+      },
+      "text": undefined,
+      "type": "view",
+    },
+  ],
+  "id": 0,
+  "props": undefined,
+  "text": undefined,
+  "type": "root",
+}
+`;
+
 exports[`remax render umount component 1`] = `
 Object {
   "children": Array [

diff --git a/packages/remax/src/__tests__/alipay/index.test.tsx b/packages/remax/src/__tests__/alipay/index.test.tsx
@@ -86,6 +86,15 @@ describe('remax render', () => {
     expect(container.root).toMatchSnapshot();
   });
 
+  it('renders vendor prefix style', () => {
+    const Page = () => (
+      <View style={{ WebkitLineClamp: 2, height: '100px' }}>hello</View>
+    );
+    const container = new Container(p);
+    render(<Page />, container);
+    expect(container.root).toMatchSnapshot();
+  });
+
   it('renders empty style', () => {
     const Page = () => <View style={undefined}>hello</View>;
     const container = new Container(p);

diff --git a/packages/remax/src/utils/plainStyle.ts b/packages/remax/src/utils/plainStyle.ts
@@ -1,11 +1,21 @@
 import { CSSProperties } from 'react';
 
-const transformReactStyleKey = (key: string) =>
-  key
-    .replace(/\.?([A-Z]+)/g, function(_x: any, y: string) {
-      return '-' + y.toLowerCase();
-    })
-    .replace(/^-/, '');
+const vendorPrefixes = ['webkit', 'moz', 'ms', 'o'];
+
+const transformReactStyleKey = (key: string) => {
+  let styleValue = key.replace(/\.?([A-Z]+)/g, function(_x: any, y: string) {
+    return '-' + y.toLowerCase();
+  });
+
+  const firstWord = styleValue.split('-').filter(s => s)[0];
+  styleValue = styleValue.replace(/^-/, '');
+
+  if (vendorPrefixes.find(prefix => prefix === firstWord)) {
+    styleValue = '-' + styleValue;
+  }
+
+  return styleValue;
+};
 
 const plainStyle = (style: CSSProperties | null | undefined) => {
   if (!style) {