Merge pull request #238 from oceanbase/dengfuping-dev

fix(codemod): includes => more match conditions for tokenParse
oceanbase · Oct 29, 2023 · 448edca · 448edca
2 parents d5be357 + 9ab9c58
commit 448edca
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Alert, Button } from '@oceanbase/design';
+import { Alert, Button, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   return (
     <div>
       <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', scrollbarColor: '#ffffff' }}></Button>
-      <div color="#fafafa" border="1px solid #fafafa" />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
 };

diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert, Button, theme } from '@oceanbase/design';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   const { token } = theme.useToken();
   return (
     (<div>
       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, scrollbarColor: token.colorBgContainer }}></Button>
-      <div color={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Tooltip color={token.colorBgContainer} backgroundColor="#fff1f0" borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>)
   );
 };

diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
@@ -14,7 +14,6 @@ const TOKEN_MAP = {
   '#bfbfbf': 'colorBorder',
   '#f0f2f5': 'colorBgLayout',
   '#fafafa': 'colorBgLayout',
-  // priority should be #ffffff > #fff to avoid bad case: '#ffffff' => `${token.colorBgContainer}fff`
   '#ffffff': 'colorBgContainer',
   '#fff': 'colorBgContainer',
   'rgba(0,0,0,0.85)': 'colorText',
@@ -36,7 +35,7 @@ const TOKEN_MAP = {
   '#F8FAFE': 'colorFillQuaternary',
 };
 
-const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP);
+const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP).map(item => formatValue(item));
 
 function customTrim(str) {
   return str?.replace(/(\s)*([,\(\)])(\s)*/g, '$2');
@@ -48,7 +47,13 @@ function formatValue(value) {
 
 function tokenParse(value) {
   const formattedValue = formatValue(value);
-  const key = TOKEN_MAP_KEYS.find(item => formattedValue.includes(item));
+  const key = TOKEN_MAP_KEYS.find(
+    item =>
+      formattedValue.endsWith(item) ||
+      formattedValue.includes(`${item} `) ||
+      formattedValue.includes(`${item}, `) ||
+      formattedValue.includes(`${item},`)
+  );
   return {
     key,
     token: TOKEN_MAP[key],