@oceanbase/codemod 1.0.0-alpha.8 → 1.0.0-alpha.9

package/transforms/__testfixtures__/less-to-cssvar/status-colors.input.less

@@ -0,0 +1,25 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.status {
+  &.success {
+    color: @colorSuccess;
+    background: @colorSuccessBg;
+    border-color: @colorSuccessBorder;
+  }
+  &.warning {
+    color: @colorWarning;
+    background: @colorWarningBg;
+    border-color: @colorWarningBorder;
+  }
+  &.error {
+    color: @colorError;
+    background: @colorErrorBg;
+    border-color: @colorErrorBorder;
+  }
+  &.info {
+    color: @colorInfo;
+    background: @colorInfoBg;
+    border-color: @colorInfoBorder;
+  }
+}
+

package/transforms/__testfixtures__/less-to-cssvar/status-colors.output.less

@@ -0,0 +1,23 @@
+.status {
+  &.success {
+    color: var(--ant-color-success);
+    background: var(--ant-color-success-bg);
+    border-color: var(--ant-color-success-border);
+  }
+  &.warning {
+    color: var(--ant-color-warning);
+    background: var(--ant-color-warning-bg);
+    border-color: var(--ant-color-warning-border);
+  }
+  &.error {
+    color: var(--ant-color-error);
+    background: var(--ant-color-error-bg);
+    border-color: var(--ant-color-error-border);
+  }
+  &.info {
+    color: var(--ant-color-info);
+    background: var(--ant-color-info-bg);
+    border-color: var(--ant-color-info-border);
+  }
+}
+

package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less

@@ -5,11 +5,15 @@
   border-color: #FF4D4F;
   scrollbar-color: #FFFFFF;
   font-size: 14px;
+  font-weight: 400;
+  border-radius: 4px;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);
     background-color: rgba(0,0,0,0.45);
     border: 1px solid #D9D9D9;
     font-size: 12px;
+    font-weight: 500;
+    border-radius: 6px;
   }
 }

package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less

@@ -6,11 +6,15 @@
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
   font-size: @fontSize;
+  font-weight: @fontWeight;
+  border-radius: @borderRadius;
   .content {
     color: @colorText;
     background: @colorTextSecondary;
     background-color: @colorTextTertiary;
     border: 1px solid @colorBorder;
     font-size: @fontSizeSM;
+    font-weight: @fontWeightStrong;
+    border-radius: @borderRadiusMD;
   }
 }

package/transforms/__testfixtures__/style-to-token/function-component.input.js

@@ -5,8 +5,8 @@ function Demo1() {
   const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
+      <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', fontSize: 14, fontWeight: 400, borderRadius: 4 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px', fontWeight: 500, borderRadius: 6 }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

package/transforms/__testfixtures__/style-to-token/function-component.output.js

@@ -6,8 +6,8 @@ function Demo1() {
   const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize, fontWeight: token.fontWeight, borderRadius: token.borderRadius }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM, fontWeight: token.fontWeightStrong, borderRadius: token.borderRadiusMD }}></Button>
       <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
     </div>
   );

package/transforms/__tests__/less-to-cssvar.test.ts

@@ -0,0 +1,124 @@
+import fs from 'fs';
+import path from 'path';
+import { transform, convertLessCommentsToCss, camelToKebab, LESS_TOKENS } from '../less-to-cssvar';
+
+const testUnit = 'less-to-cssvar';
+
+// Tests with default prefix 'ant'
+const defaultPrefixTests = [
+  'basic',
+  'status-colors',
+  'complex-values',
+  'obui-import',
+  'no-transform',
+  'nested-selectors',
+  'css-modules-global',
+  'control-tokens',
+  'color-scales',
+  'mixed-values',
+  'multiple-imports',
+  'fill-tokens',
+];
+
+// Tests with custom prefix
+const customPrefixTests = ['custom-prefix'];
+
+describe(testUnit, () => {
+  describe('with default prefix (ant)', () => {
+    defaultPrefixTests.forEach(test => {
+      it(test, async () => {
+        const { content: result } = await transform(
+          path.join(__dirname, `../__testfixtures__/less-to-cssvar/${test}.input.less`),
+          { prefix: 'ant' }
+        );
+        const output = fs.readFileSync(
+          path.join(__dirname, `../__testfixtures__/less-to-cssvar/${test}.output.less`),
+          'utf-8'
+        );
+        expect(result).toEqual(output);
+      });
+    });
+  });
+
+  describe('with custom prefix (ob)', () => {
+    customPrefixTests.forEach(test => {
+      it(test, async () => {
+        const { content: result } = await transform(
+          path.join(__dirname, `../__testfixtures__/less-to-cssvar/${test}.input.less`),
+          { prefix: 'ob' }
+        );
+        const output = fs.readFileSync(
+          path.join(__dirname, `../__testfixtures__/less-to-cssvar/${test}.output.less`),
+          'utf-8'
+        );
+        expect(result).toEqual(output);
+      });
+    });
+  });
+
+  describe('camelToKebab', () => {
+    it('should convert camelCase to kebab-case', () => {
+      expect(camelToKebab('colorPrimary')).toBe('color-primary');
+      expect(camelToKebab('colorBgContainer')).toBe('color-bg-container');
+      expect(camelToKebab('fontSizeLG')).toBe('font-size-lg');
+      expect(camelToKebab('borderRadiusSM')).toBe('border-radius-sm');
+      expect(camelToKebab('controlItemBgHover')).toBe('control-item-bg-hover');
+    });
+
+    it('should handle consecutive uppercase letters', () => {
+      expect(camelToKebab('colorBgTextHover')).toBe('color-bg-text-hover');
+      expect(camelToKebab('marginXXL')).toBe('margin-xxl');
+    });
+  });
+
+  describe('convertLessCommentsToCss', () => {
+    it('should convert single-line Less comments to CSS comments', () => {
+      const input = '// This is a comment\n.class { color: red; }';
+      const output = '/*  This is a comment */\n.class { color: red; }';
+      expect(convertLessCommentsToCss(input)).toBe(output);
+    });
+
+    it('should convert inline Less comments', () => {
+      const input = '.class { color: red; // inline comment\n}';
+      const output = '.class { color: red; /*  inline comment */\n}';
+      expect(convertLessCommentsToCss(input)).toBe(output);
+    });
+
+    it('should not convert URLs with //', () => {
+      const input = 'background: url(https://example.com/image.png);';
+      expect(convertLessCommentsToCss(input)).toBe(input);
+    });
+
+    it('should handle multiple comments', () => {
+      const input = '// Comment 1\n.a { }\n// Comment 2\n.b { }';
+      const output = '/*  Comment 1 */\n.a { }\n/*  Comment 2 */\n.b { }';
+      expect(convertLessCommentsToCss(input)).toBe(output);
+    });
+  });
+
+  describe('LESS_TOKENS', () => {
+    it('should contain common tokens', () => {
+      expect(LESS_TOKENS).toContain('colorPrimary');
+      expect(LESS_TOKENS).toContain('fontSize');
+      expect(LESS_TOKENS).toContain('borderRadius');
+      expect(LESS_TOKENS).toContain('padding');
+    });
+
+    it('should contain control tokens', () => {
+      expect(LESS_TOKENS).toContain('controlHeight');
+      expect(LESS_TOKENS).toContain('controlItemBgHover');
+    });
+
+    it('should contain color scale tokens', () => {
+      expect(LESS_TOKENS).toContain('gray1');
+      expect(LESS_TOKENS).toContain('blue4');
+      expect(LESS_TOKENS).toContain('green4');
+    });
+
+    it('should be loaded from @oceanbase/design theme', () => {
+      // LESS_TOKENS should be an array with significant length
+      expect(Array.isArray(LESS_TOKENS)).toBe(true);
+      expect(LESS_TOKENS.length).toBeGreaterThan(50);
+    });
+  });
+});