fix(codemod): token priority should be #ffffff > #fff

oceanbase · Oct 29, 2023 · 097f35b · 097f35b
1 parent 2b5e2cf
commit 097f35b
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 3 deletions.
diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less
@@ -3,6 +3,7 @@
   background: #52c41a;
   background-color: #faad14;
   border-color: #ff4D4F;
+  scrollbar-color: #ffffff;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);

diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less
@@ -4,6 +4,7 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  scrollbar-color: @colorBgContainer;
   .content {
     color: @colorText;
     background: @colorTextSecondary;

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
@@ -5,7 +5,7 @@ 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' }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', scrollbarColor: '#ffffff' }}></Button>
     </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
@@ -6,7 +6,7 @@ const Demo = () => {
   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 }}></Button>
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, scrollbarColor: token.colorBgContainer }}></Button>
     </div>)
   );
 };

diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
@@ -14,8 +14,9 @@ const TOKEN_MAP = {
   '#bfbfbf': 'colorBorder',
   '#f0f2f5': 'colorBgLayout',
   '#fafafa': 'colorBgLayout',
-  '#fff': 'colorBgContainer',
+  // priority should be #ffffff > #fff to avoid bad case: '#ffffff' => `${token.colorBgContainer}fff`
   '#ffffff': 'colorBgContainer',
+  '#fff': 'colorBgContainer',
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',