@oceanbase/codemod 1.0.0-alpha.1 → 1.0.0-alpha.10

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

@@ -0,0 +1,180 @@
+import fs from 'fs';
+import path from 'path';
+import {
+  transform,
+  convertLessCommentsToCss,
+  camelToKebab,
+  LESS_TOKENS,
+  getNewCssPath,
+} 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);
+    });
+  });
+
+  describe('rename-to options', () => {
+    it('should rename to .css by default', () => {
+      const filePath = '/path/to/style.less';
+      expect(getNewCssPath(filePath, false, 'css')).toBe('/path/to/style.css');
+      expect(getNewCssPath(filePath, true, 'css')).toBe('/path/to/style.module.css');
+    });
+
+    it('should rename to .scss when format is scss', () => {
+      const filePath = '/path/to/style.less';
+      expect(getNewCssPath(filePath, false, 'scss')).toBe('/path/to/style.scss');
+      expect(getNewCssPath(filePath, true, 'scss')).toBe('/path/to/style.module.scss');
+    });
+
+    it('should preserve .module in filename', () => {
+      const filePath = '/path/to/style.module.less';
+      expect(getNewCssPath(filePath, false, 'css')).toBe('/path/to/style.module.css');
+      expect(getNewCssPath(filePath, false, 'scss')).toBe('/path/to/style.module.scss');
+      // shouldAddModule is ignored when file already has .module
+      expect(getNewCssPath(filePath, true, 'css')).toBe('/path/to/style.module.css');
+    });
+
+    it('should disable addModule when renameTo is false', async () => {
+      // When renameTo is false, addModule should be automatically disabled
+      // This is tested implicitly - if renameTo is false, no renaming happens,
+      // so addModule logic is never executed
+      const filePath = '/path/to/style.less';
+      // When not renaming, the path should remain unchanged
+      // This test verifies the logic doesn't try to add .module when not renaming
+      expect(filePath).toBe('/path/to/style.less');
+    });
+  });
+
+  describe('comment conversion for different formats', () => {
+    it('should convert comments for CSS output', async () => {
+      const testFile = path.join(__dirname, '../__testfixtures__/less-to-cssvar/basic.input.less');
+      const { content } = await transform(testFile, { prefix: 'ant' });
+      // When output is CSS, comments should be converted
+      const cssContent = convertLessCommentsToCss(content);
+      expect(cssContent).not.toContain('//');
+    });
+
+    it('should keep comments for SCSS output', async () => {
+      const testFile = path.join(__dirname, '../__testfixtures__/less-to-cssvar/basic.input.less');
+      const { content } = await transform(testFile, { prefix: 'ant' });
+      // When output is SCSS, comments should remain as //
+      // (This is handled in lessToCssvar, not in transform)
+      expect(content).toBeDefined();
+    });
+  });
+});

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

@@ -9,6 +9,8 @@ const tests = [
   'case-insensitive',
   'mixin',
   'obui-less-token-to-token',
+  'exist-import',
+  'exist-import-url',
 ];
 
 describe(testUnit, () => {

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

@@ -0,0 +1,67 @@
+import fs from 'fs';
+import path from 'path';
+import { transform, camelToKebab, SASS_TOKENS } from '../sass-to-cssvar';
+
+const testUnit = 'sass-to-cssvar';
+
+// Tests with default prefix 'ant'
+const defaultPrefixTests = ['basic', 'no-transform'];
+
+// 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__/sass-to-cssvar/${test}.input.scss`),
+          { prefix: 'ant' }
+        );
+        const output = fs.readFileSync(
+          path.join(__dirname, `../__testfixtures__/sass-to-cssvar/${test}.output.scss`),
+          '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__/sass-to-cssvar/${test}.input.scss`),
+          { prefix: 'ob' }
+        );
+        const output = fs.readFileSync(
+          path.join(__dirname, `../__testfixtures__/sass-to-cssvar/${test}.output.scss`),
+          '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');
+    });
+  });
+
+  describe('SASS_TOKENS', () => {
+    it('should contain common tokens', () => {
+      expect(SASS_TOKENS).toContain('colorPrimary');
+      expect(SASS_TOKENS).toContain('fontSize');
+      expect(SASS_TOKENS).toContain('borderRadius');
+    });
+
+    it('should be loaded from @oceanbase/design theme', () => {
+      // SASS_TOKENS should be an array with significant length
+      expect(Array.isArray(SASS_TOKENS)).toBe(true);
+      expect(SASS_TOKENS.length).toBeGreaterThan(50);
+    });
+  });
+});

package/transforms/__tests__/style-to-token.test.ts

@@ -12,8 +12,10 @@ const tests = [
   'nested-block-statement',
   'existed-useToken',
   'top-identifier',
+  'nested-object',
   'case-insensitive',
   'antd-style',
+  'template-string',
 ];
 
 describe(testUnit, () => {