fix: 修复部分样式解析错误

Author: arvinxx

example/components/Test.tsx

@@ -1,17 +1,38 @@
 import React, { FC } from 'react';
 import { Radio, Button, Tag, Space } from 'antd';
-import { UpCircleOutlined } from '@ant-design/icons';
-// import { WelcomeHeader } from '@alipay/tech-ui';
+import styles from './test.less';
 
 /**
  *
  */
 export const Test: FC = () => {
   return (
-    <div>
+    <div id={'x-tag'}>
       <Tag className="test" symbolName="1.Tag 标签/1.Default默认/1.Off关">
         内容
       </Tag>
+      <a>
+        展开
+        <span
+          role="img"
+          aria-label="down"
+          className="anticon anticon-down"
+          style={{ marginLeft: '0.5em', transform: 'rotate(0turn)' }}
+        >
+          <svg
+            viewBox="64 64 896 896"
+            focusable="false"
+            className=""
+            data-icon="down"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+          </svg>
+        </span>
+      </a>
       {/*<WelcomeHeader*/}
       {/*  className="test"*/}
       {/*  title="页面标题"*/}

example/components/test.less

@@ -0,0 +1,8 @@
+.label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}

example/pages/index.tsx

@@ -10,9 +10,9 @@ import {
 } from '../components';
 
 import copy from 'copy-to-clipboard';
-import styles from './style.less';
-import { nodeToSketchSymbol, svgNodeToSvg } from '../../lib';
+import { nodeToSketchSymbol, svgNodeToSvg, nodeToSketchGroup } from '../../lib';
 import { SMART_LAYOUT } from '../../lib/helpers/layout';
+import styles from './style.less';
 
 const { TabPane } = Tabs;
 export default () => {
@@ -27,7 +27,7 @@ export default () => {
     const els = document.getElementsByClassName(classname);
     const json: Object[] = [];
 
-    Array.from(els).forEach((el) => {
+    Array.from(els).forEach(el => {
       const smartLayout = el.getAttribute(
         'smartLayout',
       ) as keyof typeof SMART_LAYOUT;
@@ -46,12 +46,15 @@ export default () => {
     setJSON(json);
   };
 
+  /**
+   * 生成 Svg
+   */
   const generateSvg = () => {
     const els = document.getElementsByTagName('svg');
 
     const json: Object[] = [];
 
-    Array.from(els).map((el) => {
+    Array.from(els).map(el => {
       const svg = svgNodeToSvg(el).toSketchJSON();
       console.log(svg);
       json.push(svg);
@@ -61,14 +64,33 @@ export default () => {
 
     setJSON(json);
   };
+
+  /**
+   * 生成 Group
+   */
+  const generateGroup = () => {
+    try {
+      const el = document.getElementById('x-tag');
+      if (el) {
+        const group = nodeToSketchGroup(el);
+        console.log('-------转换结束--------');
+        console.log(group);
+
+        const data = group.toSketchJSON();
+        copy(JSON.stringify(data));
+      }
+    } catch (e) {
+      message.error('解析失败,配置项可能存在错误!');
+    }
+  };
   return (
     <div className={styles.container}>
       <Row gutter={[0, 24]}>
         <Col span={24}>
           <Card>
             <Tabs
               activeKey={activeKey}
-              onChange={(key) => {
+              onChange={key => {
                 setActiveKey(key);
               }}
               tabPosition={'left'}
@@ -104,6 +126,7 @@ export default () => {
               <Col>
                 <Space>
                   <Button onClick={() => generateSvg()}>解析 Svg</Button>
+                  <Button onClick={() => generateGroup()}>转换为 Group</Button>
                   <Button
                     type={'primary'}
                     onClick={() => generateSymbol(activeKey)}
@@ -122,7 +145,9 @@ export default () => {
               <ReactJson src={json || {}} />
             </Card>
           </Col>
-        ) : undefined}
+        ) : (
+          undefined
+        )}
       </Row>
     </div>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html2sketch",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": "arvinxx",
   "description": "parser html to sketch json",
   "repository": {
@@ -45,10 +45,11 @@
     "konva": "^7.0.3",
     "lint-staged": "^10.0.7",
     "prettier": "^1.18.2",
+    "puppeteer": "^5.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-json-view": "^1.19.1",
-    "react-konva": "^16.13.0-3",
+    "react-konva": "^16.13.0-5",
     "ts-jest": "^24.0.2",
     "tslint": "^5.18.0",
     "tslint-config-prettier": "^1.18.0",