@bookklik/senangstart-css 0.2.8 → 0.2.9

package/tests/unit/compiler/generators/preflight.test.js

@@ -0,0 +1,31 @@
+
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { generatePreflight } from '../../../../src/compiler/generators/preflight.js';
+
+test('generatePreflight', async (t) => {
+  await t.test('should generate preflight css', () => {
+    const css = generatePreflight({});
+    
+    // Basic assertions to ensure content is generated
+    assert.ok(css.includes('SenangStart Preflight'), 'Should include header');
+    assert.ok(css.includes('box-sizing: border-box'), 'Should include box-sizing reset');
+    assert.ok(css.includes('html'), 'Should include html selector');
+    assert.ok(css.includes('body'), 'Should include body selector');
+  });
+
+  await t.test('should include opinionated defaults', () => {
+    const css = generatePreflight({});
+    
+    // Check for specific opinionated keys
+    assert.ok(css.includes('line-height: 1.5'), 'Should set default line-height');
+    assert.ok(css.includes('tab-size: 4'), 'Should set tab-size');
+    assert.ok(css.includes('font-family: ui-sans-serif'), 'Should set default font stack');
+  });
+  
+  await t.test('should handle modern-normalize styles', () => {
+      const css = generatePreflight({});
+      assert.ok(css.includes('abbr:where([title])'), 'Should include abbr styles');
+      assert.ok(css.includes('::-webkit-search-decoration'), 'Should include search decoration reset');
+  });
+});

package/tests/unit/compiler/parser.test.js

@@ -188,6 +188,32 @@ describe('Parser', () => {
       assert.ok(result.visual.has('hover:text:secondary'));
     });
 
+    it('extracts interact and listens attributes', () => {
+      const html = '<div interact="click:toggle" listens="auth:update">Test</div>';
+      const result = parseSource(html);
+      
+      assert.ok(result.interact.has('click:toggle'));
+      assert.ok(result.listens.has('auth:update'));
+    });
+
+    it('handles extremely long attribute values by skipping them', () => {
+      const longValue = 'a'.repeat(10001);
+      const html = `<div layout="${longValue}">Test</div>`;
+      const result = parseSource(html);
+      
+      assert.strictEqual(result.layout.size, 0);
+    });
+
+    it('handles long tokens by skipping them', () => {
+      const longToken = 'a'.repeat(501);
+      const html = `<div layout="${longToken} valid-token">Test</div>`;
+      const result = parseSource(html);
+      
+      assert.strictEqual(result.layout.size, 1);
+      assert.ok(result.layout.has('valid-token'));
+      assert.ok(!result.layout.has(longToken));
+    });
+
   });
 
   describe('parseMultipleSources', () => {

package/tests/unit/config/defaults.test.js

@@ -67,7 +67,7 @@ describe('Config', () => {
       const userConfig = {
         theme: {
           colors: {
-            'brand': '#8B5CF6'
+            'brand': '#38BDF8'
           }
         }
       };
@@ -75,7 +75,7 @@ describe('Config', () => {
       const result = mergeConfig(userConfig);
       
       // Custom color should be added
-      assert.strictEqual(result.theme.colors.brand, '#8B5CF6');
+      assert.strictEqual(result.theme.colors.brand, '#38BDF8');
       // Default colors should still exist
       assert.strictEqual(result.theme.colors.primary, defaultConfig.theme.colors.primary);
     });

package/tests/unit/convert-tailwind.cli.test.js

@@ -0,0 +1,95 @@
+/**
+ * Tests for convert-tailwind.js CLI
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { execSync } from 'node:child_process';
+import path from 'node:path';
+import fs from 'node:fs';
+
+const SCRIPT_PATH = path.join(process.cwd(), 'scripts', 'convert-tailwind.js');
+
+describe('convert-tailwind CLI', () => {
+  it('should show help message', () => {
+    const output = execSync(`node "${SCRIPT_PATH}" --help`).toString();
+    assert.match(output, /Usage:/);
+    assert.match(output, /Options:/);
+  });
+
+  it('should convert string input', () => {
+    const input = '"<div class=\'p-4\'></div>"';
+    const output = execSync(`node "${SCRIPT_PATH}" --string ${input}`).toString();
+    // Check output contains expected attributes (ignoring order/formatting)
+    assert.match(output, /space="p:medium"/);
+    assert.doesNotMatch(output, /class=/);
+  });
+
+  it('should support exact mode', () => {
+    const input = '"<div class=\'p-4\'></div>"';
+    const output = execSync(`node "${SCRIPT_PATH}" --string ${input} --exact`).toString();
+    assert.match(output, /space="p:tw-4"/);
+  });
+
+  it('should fail without input file', () => {
+    try {
+      // Provide an argument so it doesn't just show help
+      execSync(`node "${SCRIPT_PATH}" --exact`);
+      assert.fail('Should have failed');
+    } catch (error) {
+      assert.strictEqual(error.status, 1);
+      assert.match(error.stderr.toString(), /Error: Input file required/);
+    }
+  });
+
+  it('should fail with missing string argument', () => {
+    try {
+      execSync(`node "${SCRIPT_PATH}" --string`);
+      assert.fail('Should have failed');
+    } catch (error) {
+      assert.strictEqual(error.status, 1);
+      assert.match(error.stderr.toString(), /Error: --string requires an HTML string argument/);
+    }
+  });
+
+  it('should handle file input/output', () => {
+    const inputFile = path.join(process.cwd(), 'tests', 'fixtures', 'test-input.html');
+    const outputFile = path.join(process.cwd(), 'tests', 'fixtures', 'test-output.html');
+    
+    // Ensure fixture dir exists
+    fs.mkdirSync(path.dirname(inputFile), { recursive: true });
+    
+    const content = '<div class="p-4 flex"></div>';
+    fs.writeFileSync(inputFile, content);
+    
+    // Run CLI
+    execSync(`node "${SCRIPT_PATH}" "${inputFile}" -o "${outputFile}"`);
+    
+    // Check output file
+    const result = fs.readFileSync(outputFile, 'utf-8');
+    assert.match(result, /layout="flex"/);
+    assert.match(result, /space="p:medium"/);
+    
+    // Cleanup
+    fs.unlinkSync(inputFile);
+    fs.unlinkSync(outputFile);
+  });
+
+  it('should fail on invalid file paths', () => {
+    try {
+      // Trying to access something outside allowed dir (if validator is active)
+      // or just a non-existent file
+      execSync(`node "${SCRIPT_PATH}" non-existent.html`);
+      assert.fail('Should have failed');
+    } catch (error) {
+      assert.strictEqual(error.status, 1);
+    }
+  });
+
+  it('should handle unrecognized classes', () => {
+    const input = '"<div class=\'p-4 custom-class\'></div>"';
+    const output = execSync(`node "${SCRIPT_PATH}" --string ${input}`).toString();
+    assert.match(output, /space="p:medium"/);
+    assert.match(output, /class="custom-class"/);
+  });
+});

package/tests/unit/convert-tailwind.coverage.test.js

@@ -0,0 +1,225 @@
+
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { execSync } from 'node:child_process';
+import path from 'node:path';
+import { convertClass, main, convertHTML, convertClasses, isValidFilePath } from '../../scripts/convert-tailwind.js';
+import fs from 'node:fs';
+import { spawnSync } from 'node:child_process';
+
+test('convert-tailwind coverage', async (t) => {
+  
+  await t.test('mask and divide utilities', () => {
+    assert.deepStrictEqual(convertClass('mask-none'), { category: 'visual', value: 'mask:none' });
+    assert.deepStrictEqual(convertClass('mask-image-none'), { category: 'visual', value: 'mask-image:none' });
+    assert.deepStrictEqual(convertClass('mask-mode-match'), { category: 'visual', value: 'mask-mode:match' });
+    assert.deepStrictEqual(convertClass('mask-origin-center'), { category: 'visual', value: 'mask-origin:center' });
+    assert.deepStrictEqual(convertClass('mask-position-center'), { category: 'visual', value: 'mask-position:center' });
+    assert.deepStrictEqual(convertClass('mask-repeat-repeat'), { category: 'visual', value: 'mask-repeat:repeat' });
+    assert.deepStrictEqual(convertClass('mask-size-auto'), { category: 'visual', value: 'mask-size:auto' });
+    assert.deepStrictEqual(convertClass('mask-type-luminance'), { category: 'visual', value: 'mask-type:luminance' });
+
+    assert.deepStrictEqual(convertClass('divide-x-reverse'), { category: 'visual', value: 'divide-x:reverse' });
+    assert.deepStrictEqual(convertClass('divide-y-reverse'), { category: 'visual', value: 'divide-y:reverse' });
+    
+    assert.deepStrictEqual(convertClass('divide-x'), { category: 'visual', value: 'divide-x-w:thin' });
+    assert.deepStrictEqual(convertClass('divide-y'), { category: 'visual', value: 'divide-y-w:thin' });
+    
+    assert.deepStrictEqual(convertClass('divide-x-2'), { category: 'visual', value: 'divide-x-w:regular' });
+    assert.deepStrictEqual(convertClass('divide-y-4'), { category: 'visual', value: 'divide-y-w:medium' });
+    
+    assert.deepStrictEqual(convertClass('divide-dotted'), { category: 'visual', value: 'divide-style:dotted' });
+
+    assert.deepStrictEqual(convertClass('divide-4'), { category: 'visual', value: 'divide-w:medium' });
+    assert.deepStrictEqual(convertClass('divide-red-500'), { category: 'visual', value: 'divide:red-500' });
+  });
+
+  await t.test('space utilities', () => {
+    assert.deepStrictEqual(convertClass('m-[10px]'), { category: 'space', value: 'm:[10px]' });
+    assert.deepStrictEqual(convertClass('-m-[10px]'), { category: 'space', value: 'm:[-10px]' });
+    assert.deepStrictEqual(convertClass('p-[10px]'), { category: 'space', value: 'p:[10px]' });
+    
+    assert.deepStrictEqual(convertClass('w-min'), { category: 'space', value: 'w:min' });
+    assert.deepStrictEqual(convertClass('w-max'), { category: 'space', value: 'w:max' });
+    assert.deepStrictEqual(convertClass('w-fit'), { category: 'space', value: 'w:fit' });
+    assert.deepStrictEqual(convertClass('h-screen'), { category: 'space', value: 'h:[100vh]' });
+    
+    // Percentage adjectives
+    assert.deepStrictEqual(convertClass('w-1/2'), { category: 'space', value: 'w:half' });
+    assert.deepStrictEqual(convertClass('h-1/3'), { category: 'space', value: 'h:third' });
+
+    // Fractional values in getSpacingScale (for padding/gap)
+    assert.deepStrictEqual(convertClass('p-1/2'), { category: 'space', value: 'p:half' });
+    assert.deepStrictEqual(convertClass('p-1/2', { exact: true }), { category: 'space', value: 'p:half' });
+    assert.deepStrictEqual(convertClass('gap-x-1/2'), { category: 'space', value: 'g-x:half' });
+  });
+
+
+
+  await t.test('transform utilities', () => {
+    // 3D Transforms
+    assert.deepStrictEqual(convertClass('perspective-500'), { category: 'visual', value: 'perspective:500' });
+    assert.deepStrictEqual(convertClass('perspective-origin-top'), { category: 'visual', value: 'perspective-origin:top' });
+    assert.deepStrictEqual(convertClass('transform-style-preserve-3d'), { category: 'visual', value: 'transform-style:preserve-3d' });
+    assert.deepStrictEqual(convertClass('backface-visible'), { category: 'visual', value: 'backface:visible' });
+    
+    // Rotate
+    assert.deepStrictEqual(convertClass('rotate-45'), { category: 'visual', value: 'rotate:45' });
+    assert.deepStrictEqual(convertClass('rotate-x-45'), { category: 'visual', value: 'rotate-x:45' });
+    assert.deepStrictEqual(convertClass('rotate-y-45'), { category: 'visual', value: 'rotate-y:45' });
+    assert.deepStrictEqual(convertClass('rotate-z-45'), { category: 'visual', value: 'rotate-z:45' });
+    
+    // Scale
+    assert.deepStrictEqual(convertClass('scale-50'), { category: 'visual', value: 'scale:50' });
+    assert.deepStrictEqual(convertClass('scale-x-50'), { category: 'visual', value: 'scale-x:50' });
+    assert.deepStrictEqual(convertClass('scale-y-50'), { category: 'visual', value: 'scale-y:50' });
+    
+    // Skew
+    assert.deepStrictEqual(convertClass('skew-x-12'), { category: 'visual', value: 'skew-x:12' });
+    assert.deepStrictEqual(convertClass('skew-y-12'), { category: 'visual', value: 'skew-y:12' });
+    
+    // Translate
+    assert.deepStrictEqual(convertClass('translate-x-4'), { category: 'visual', value: 'translate-x:medium' });
+    assert.deepStrictEqual(convertClass('translate-y-4'), { category: 'visual', value: 'translate-y:medium' });
+    assert.deepStrictEqual(convertClass('translate-z-4'), { category: 'visual', value: 'translate-z:medium' });
+    
+    // Origin
+    assert.deepStrictEqual(convertClass('origin-top'), { category: 'visual', value: 'origin:top' });
+
+    // Translate edge cases
+    assert.deepStrictEqual(convertClass('translate-x-0'), { category: 'visual', value: 'translate-x:0' });
+    assert.deepStrictEqual(convertClass('-translate-x-[10px]'), { category: 'visual', value: 'translate-x:[-10px]' });
+  });
+
+  // Mask utilities already covered in first block
+
+  await t.test('exact mode and edge cases', () => {
+    // Spacing scale exact mode
+    assert.deepStrictEqual(convertClass('p-4', { exact: true }), { category: 'space', value: 'p:tw-4' });
+    assert.deepStrictEqual(convertClass('m-auto', { exact: true }), { category: 'space', value: 'm:auto' });
+    assert.deepStrictEqual(convertClass('w-full', { exact: true }), { category: 'space', value: 'w:full' });
+    assert.deepStrictEqual(convertClass('p-[20px]', { exact: true }), { category: 'space', value: 'p:[20px]' });
+    
+    // Unknown spacing scale
+    assert.deepStrictEqual(convertClass('p-unknown'), { category: 'space', value: 'p:[unknown]' });
+    
+    // Border width exact mode
+    assert.deepStrictEqual(convertClass('border-2', { exact: true }), { category: 'visual', value: 'border-w:tw-2' });
+    assert.deepStrictEqual(convertClass('border-t-2', { exact: true }), { category: 'visual', value: 'border-t-w:tw-2' });
+    
+    // Other utilities
+    assert.deepStrictEqual(convertClass('border-red-500'), { category: 'visual', value: 'border:red-500' });
+    assert.deepStrictEqual(convertClass('order-1'), { category: 'layout', value: 'order:1' });
+    assert.deepStrictEqual(convertClass('grid-cols-3'), { category: 'layout', value: 'grid-cols:3' });
+    assert.deepStrictEqual(convertClass('col-span-2'), { category: 'layout', value: 'col-span:2' });
+    assert.deepStrictEqual(convertClass('grid-rows-2'), { category: 'layout', value: 'grid-rows:2' });
+    assert.deepStrictEqual(convertClass('row-span-3'), { category: 'layout', value: 'row-span:3' });
+    assert.deepStrictEqual(convertClass('opacity-50'), { category: 'visual', value: 'opacity:50' });
+    
+    // Font weight
+    assert.deepStrictEqual(convertClass('font-bold'), { category: 'visual', value: 'font:tw-bold' });
+
+    // Positional arbitrary values
+    assert.deepStrictEqual(convertClass('left-[10px]'), { category: 'layout', value: 'left:[10px]' });
+
+    // Unrecognized classes
+    const result = convertClasses('flex unknown-class');
+    assert.deepStrictEqual(result.unrecognized, ['unknown-class']);
+  });
+
+  await t.test('internal tests', async (t) => {
+    // Mock process.exit and console.error
+    const originalExit = process.exit;
+    const originalConsoleError = console.error;
+    const originalConsoleLog = console.log;
+    let lastExitCode = null;
+    
+    process.exit = (code) => { 
+      lastExitCode = code; 
+      throw new Error(`ProcessExit:${code}`); 
+    };
+    console.error = (...args) => { /* originalConsoleError('MOCK ERROR:', ...args); */ };
+    console.log = (...args) => { /* originalConsoleLog('MOCK LOG:', ...args); */ };
+
+    try {
+      // Help - should return normally
+      main(['--help']);
+      
+      // String mode - success
+      main(['--string', '<div class="flex"></div>']);
+      
+      // Missing string argument - should exit 1
+      assert.throws(() => main(['--string']), /ProcessExit:1/);
+      
+      // Invalid file path - should exit 1
+      assert.throws(() => main(['/etc/passwd']), /ProcessExit:1/);
+      
+      // Valid file but nonexistent (ENOENT) - should exit 1
+      assert.throws(() => main(['non-existent-local.html']), /ProcessExit:1/);
+
+      // Create a dummy input file first
+      const dummyFile = 'dummy.html';
+      fs.writeFileSync(dummyFile, '<div></div>');
+      try {
+        // Invalid output path - should exit 1
+        assert.throws(() => main([dummyFile, '-o', '/etc/passwd']), /ProcessExit:1/);
+
+        // Console output when no output file
+        main([dummyFile]);
+
+        // main with multiple args to test skip logic
+        main(['--string', '<div class="flex"></div>', '-o', 'out.html']);
+
+        // Test isValidFilePath non-Windows branch if on Windows
+        if (process.platform === 'win32') {
+          const originalPlatform = process.platform;
+          // Node's process.platform is read-only in some versions, try to overwrite
+          try {
+            Object.defineProperty(process, 'platform', { value: 'linux', configurable: true });
+            main([dummyFile]);
+          } catch (e) {
+            // If platform is not configurable, we might not be able to hit this line on Windows
+          } finally {
+            Object.defineProperty(process, 'platform', { value: originalPlatform, configurable: true });
+          }
+        }
+
+        // Successful file output (line 1146-1147)
+        const dummyOutput = 'dummy_out.html';
+        main([dummyFile, '-o', dummyOutput]);
+        assert.ok(fs.existsSync(dummyOutput));
+        if (fs.existsSync(dummyOutput)) fs.unlinkSync(dummyOutput);
+      } finally {
+        if (fs.existsSync(dummyFile)) fs.unlinkSync(dummyFile);
+      }
+
+      // convertHTML direct call
+      const res = convertHTML('<div class="p-4 text-red-500 unknown-class"></div>');
+      assert.match(res, /space="p:medium"/);
+      assert.match(res, /visual="text:red-500"/);
+      assert.match(res, /class="unknown-class"/);
+      
+      // main with missing input file should exit 1
+      assert.throws(() => main(['-o', 'out.html']), /ProcessExit:1/);
+
+      // Trigger catch block in main (though it's hard to trigger without real FS errors)
+      // We pass a number to trigger TypeError: The "path" argument must be of type string.
+      assert.throws(() => main(['dummy.html', '-o', 123]), /ProcessExit:1/);
+
+      // Directly test isValidFilePath catch block
+      assert.strictEqual(isValidFilePath(null), false);
+      assert.strictEqual(isValidFilePath(undefined), false);
+      assert.strictEqual(isValidFilePath(123), false);
+
+      // CLI entry point coverage (line 1160-1161)
+      const scriptPath = path.resolve('scripts/convert-tailwind.js');
+      spawnSync('node', [scriptPath, '--help'], { encoding: 'utf8' });
+
+    } finally {
+      process.exit = originalExit;
+      console.error = originalConsoleError;
+      console.log = originalConsoleLog;
+    }
+  });
+
+});

package/tests/unit/convert-tailwind.test.js

@@ -41,6 +41,15 @@ describe('convertClass', () => {
       assert.deepStrictEqual(convertClass('fixed'), { category: 'layout', value: 'fixed' });
     });
     
+    it('should convert positional offsets (top, left, right, bottom)', () => {
+      assert.deepStrictEqual(convertClass('top-0'), { category: 'layout', value: 'top:none' });
+      assert.deepStrictEqual(convertClass('left-0'), { category: 'layout', value: 'left:none' });
+      assert.deepStrictEqual(convertClass('bottom-full'), { category: 'layout', value: 'bottom:full' });
+      assert.deepStrictEqual(convertClass('left-1/2'), { category: 'layout', value: 'left:half' });
+      assert.deepStrictEqual(convertClass('top-1/3'), { category: 'layout', value: 'top:third' });
+      assert.deepStrictEqual(convertClass('inset-0'), { category: 'layout', value: 'inset:none' });
+    });
+    
     it('should convert grid classes', () => {
       assert.deepStrictEqual(convertClass('grid-cols-3'), { category: 'layout', value: 'grid-cols:3' });
       assert.deepStrictEqual(convertClass('col-span-2'), { category: 'layout', value: 'col-span:2' });
@@ -49,33 +58,38 @@ describe('convertClass', () => {
 
   describe('Spacing classes', () => {
     it('should convert padding classes', () => {
-      assert.deepStrictEqual(convertClass('p-4'), { category: 'space', value: 'p:small' });
-      assert.deepStrictEqual(convertClass('p-8'), { category: 'space', value: 'p:big' });
-      assert.deepStrictEqual(convertClass('px-4'), { category: 'space', value: 'p-x:small' });
-      assert.deepStrictEqual(convertClass('py-2'), { category: 'space', value: 'p-y:tiny' });
+      assert.deepStrictEqual(convertClass('p-4'), { category: 'space', value: 'p:medium' });
+      assert.deepStrictEqual(convertClass('p-8'), { category: 'space', value: 'p:large' });
+      assert.deepStrictEqual(convertClass('px-4'), { category: 'space', value: 'p-x:medium' });
+      assert.deepStrictEqual(convertClass('py-2'), { category: 'space', value: 'p-y:small' });
     });
 
     it('should convert margin classes', () => {
-      assert.deepStrictEqual(convertClass('m-4'), { category: 'space', value: 'm:small' });
-      assert.deepStrictEqual(convertClass('mt-8'), { category: 'space', value: 'm-t:big' });
+      assert.deepStrictEqual(convertClass('m-4'), { category: 'space', value: 'm:medium' });
+      assert.deepStrictEqual(convertClass('mt-8'), { category: 'space', value: 'm-t:large' });
       assert.deepStrictEqual(convertClass('mx-auto'), { category: 'space', value: 'm-x:auto' });
     });
 
     it('should convert gap classes', () => {
-      assert.deepStrictEqual(convertClass('gap-4'), { category: 'space', value: 'g:small' });
-      assert.deepStrictEqual(convertClass('gap-x-2'), { category: 'space', value: 'g-x:tiny' });
+      assert.deepStrictEqual(convertClass('gap-4'), { category: 'space', value: 'g:medium' });
+      assert.deepStrictEqual(convertClass('gap-x-2'), { category: 'space', value: 'g-x:small' });
     });
 
     it('should convert width/height classes', () => {
-      assert.deepStrictEqual(convertClass('w-full'), { category: 'space', value: 'w:[100%]' });
+      assert.deepStrictEqual(convertClass('w-full'), { category: 'space', value: 'w:full' });
+      assert.deepStrictEqual(convertClass('w-1/2'), { category: 'space', value: 'w:half' });
+      assert.deepStrictEqual(convertClass('w-1/3'), { category: 'space', value: 'w:third' });
+      assert.deepStrictEqual(convertClass('w-2/3'), { category: 'space', value: 'w:third-2x' });
+      assert.deepStrictEqual(convertClass('w-1/4'), { category: 'space', value: 'w:quarter' });
+      assert.deepStrictEqual(convertClass('w-3/4'), { category: 'space', value: 'w:quarter-3x' });
       assert.deepStrictEqual(convertClass('h-screen'), { category: 'space', value: 'h:[100vh]' });
-      assert.deepStrictEqual(convertClass('max-w-4'), { category: 'space', value: 'max-w:small' });
+      assert.deepStrictEqual(convertClass('max-w-4'), { category: 'space', value: 'max-w:medium' });
     });
 
     it('should convert negative margin classes', () => {
       // Standard exact=false
-      assert.deepStrictEqual(convertClass('-m-4'), { category: 'space', value: 'm:-small' });
-      assert.deepStrictEqual(convertClass('-mt-8'), { category: 'space', value: 'm-t:-big' });
+      assert.deepStrictEqual(convertClass('-m-4'), { category: 'space', value: 'm:-medium' });
+      assert.deepStrictEqual(convertClass('-mt-8'), { category: 'space', value: 'm-t:-large' });
       
       // Exact=true
       assert.deepStrictEqual(convertClass('-m-4', { exact: true }), { category: 'space', value: 'm:-tw-4' });
@@ -92,6 +106,14 @@ describe('convertClass', () => {
       assert.deepStrictEqual(convertClass('bg-transparent'), { category: 'visual', value: 'bg:transparent' });
     });
 
+    it('should convert border color classes', () => {
+      assert.deepStrictEqual(convertClass('border-gray-900'), { category: 'visual', value: 'border:gray-900' });
+      assert.deepStrictEqual(convertClass('border-t-gray-900'), { category: 'visual', value: 'border-t:gray-900' });
+      assert.deepStrictEqual(convertClass('border-b-blue-500'), { category: 'visual', value: 'border-b:blue-500' });
+      assert.deepStrictEqual(convertClass('border-l-red-300'), { category: 'visual', value: 'border-l:red-300' });
+      assert.deepStrictEqual(convertClass('border-r-transparent'), { category: 'visual', value: 'border-r:transparent' });
+    });
+
     it('should convert text color classes', () => {
       assert.deepStrictEqual(convertClass('text-white'), { category: 'visual', value: 'text:white' });
       assert.deepStrictEqual(convertClass('text-gray-700'), { category: 'visual', value: 'text:gray-700' });
@@ -149,12 +171,19 @@ describe('convertClass', () => {
       assert.deepStrictEqual(convertClass('via-purple-500'), { category: 'visual', value: 'via:purple-500' });
       assert.deepStrictEqual(convertClass('to-pink-500'), { category: 'visual', value: 'to:pink-500' });
     });
+
+    it('should convert translate utilities with fractions', () => {
+      assert.deepStrictEqual(convertClass('translate-x-1/2'), { category: 'visual', value: 'translate-x:half' });
+      assert.deepStrictEqual(convertClass('translate-y-full'), { category: 'visual', value: 'translate-y:full' });
+      assert.deepStrictEqual(convertClass('-translate-x-1/2'), { category: 'visual', value: 'translate-x:-half' });
+      assert.deepStrictEqual(convertClass('-translate-y-full'), { category: 'visual', value: 'translate-y:-full' });
+    });
   });
 
   describe('Prefixed classes', () => {
     it('should handle responsive prefixes', () => {
       assert.deepStrictEqual(convertClass('md:flex'), { category: 'layout', value: 'tw-md:flex' });
-      assert.deepStrictEqual(convertClass('lg:p-8'), { category: 'space', value: 'tw-lg:p:big' });
+      assert.deepStrictEqual(convertClass('lg:p-8'), { category: 'space', value: 'tw-lg:p:large' });
     });
 
     it('should handle dark mode prefix', () => {
@@ -189,7 +218,7 @@ describe('convertClasses', () => {
     const result = convertClasses('flex items-center p-4 bg-blue-500 text-white');
     
     assert.deepStrictEqual(result.layout, ['flex', 'items:center']);
-    assert.deepStrictEqual(result.space, ['p:small']);
+    assert.deepStrictEqual(result.space, ['p:medium']);
     assert.deepStrictEqual(result.visual, ['bg:blue-500', 'text:white']);
     assert.deepStrictEqual(result.unrecognized, []);
   });
@@ -207,7 +236,7 @@ describe('convertHTML', () => {
     const result = convertHTML(input);
     
     assert.ok(result.includes('layout="flex items:center"'));
-    assert.ok(result.includes('space="p:small"'));
+    assert.ok(result.includes('space="p:medium"'));
     assert.ok(result.includes('visual="bg:blue-500"'));
     assert.ok(!result.includes('class='));
   });
@@ -237,17 +266,17 @@ describe('convertHTML', () => {
     const result = convertHTML(input);
     
     assert.ok(result.includes('layout="flex"'));
-    assert.ok(result.includes('space="p:small"'));
+    assert.ok(result.includes('space="p:medium"'));
   });
 });
 
 describe('spacingScale', () => {
   it('should have expected scale mappings', () => {
     assert.strictEqual(spacingScale['0'], 'none');
-    assert.strictEqual(spacingScale['4'], 'small');
-    assert.strictEqual(spacingScale['8'], 'big');
-    assert.strictEqual(spacingScale['12'], 'giant');
-    assert.strictEqual(spacingScale['24'], 'vast');
+    assert.strictEqual(spacingScale['4'], 'medium');
+    assert.strictEqual(spacingScale['8'], 'large');
+    assert.strictEqual(spacingScale['12'], 'big');
+    assert.strictEqual(spacingScale['24'], 'giant');
     assert.strictEqual(spacingScale['auto'], 'auto');
   });
 });

package/tests/unit/core/tokenizer-core.test.js

@@ -0,0 +1,102 @@
+/**
+ * SenangStart CSS - Tokenizer Core Unit Tests
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { tokenize, isValidToken } from '../../../src/core/tokenizer-core.js';
+
+describe('Tokenizer Core', () => {
+
+  describe('isValidToken', () => {
+
+    it('returns false for missing property', () => {
+      assert.strictEqual(isValidToken({ value: 'val' }), false);
+    });
+
+    it('returns false for non-string property', () => {
+      assert.strictEqual(isValidToken({ property: 123, value: 'val' }), false);
+    });
+
+    it('returns false for too long property', () => {
+      assert.strictEqual(isValidToken({ property: 'a'.repeat(101), value: 'val' }), false);
+    });
+
+    it('returns false for non-string value', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: 123 }), false);
+    });
+
+    it('returns false for too long value', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: 'a'.repeat(501) }), false);
+    });
+
+    it('returns false for invalid breakpoint', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: 'val', breakpoint: 'unknown' }), false);
+    });
+
+    it('returns false for invalid state', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: 'val', state: 'unknown' }), false);
+    });
+
+    it('returns true for valid minimal token', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: 'val' }), true);
+    });
+
+    it('returns true for valid full token', () => {
+      assert.strictEqual(isValidToken({ 
+        property: 'prop', 
+        value: 'val', 
+        breakpoint: 'tab', 
+        state: 'hover' 
+      }), true);
+    });
+
+    it('returns true for null value', () => {
+      assert.strictEqual(isValidToken({ property: 'prop', value: null }), true);
+    });
+  });
+
+  describe('tokenize - Validation Edge Cases', () => {
+
+    it('returns error for non-string raw input', () => {
+      const token = tokenize(123, 'space');
+      assert.strictEqual(token.error, 'Invalid token format');
+    });
+
+    it('returns error for empty raw input', () => {
+      const token = tokenize('', 'space');
+      assert.strictEqual(token.error, 'Invalid token format');
+    });
+
+    it('returns error for too long raw input', () => {
+      const token = tokenize('a'.repeat(201), 'space');
+      assert.strictEqual(token.error, 'Invalid token format');
+    });
+
+    it('returns error for invalid token structure', () => {
+      // unknown:bg:white -> unknown is not a breakpoint, so it becomes property 'unknown'
+      // but if we force an invalid state or something
+      const token = tokenize('unknown:state:prop:val', 'space');
+      // wait, tokenize doesn't throw on unknown prefixes unless validated by isValidToken
+      // if parts[0] is not a breakpoint, it's not shifted.
+      
+      const invalidToken = tokenize('prop:val:too:many:parts', 'space');
+      // This will still be a valid token structure but might not be what's expected.
+      
+      // Force isValidToken to fail by using a reserved word that isn't a breakpoint or state in a prefix position
+      // but since tokenize logic only checks BREAKPOINTS.includes(parts[0]), it defaults to property.
+      
+      // Let's test a case where it results in an invalid token structure
+      const longProp = 'a'.repeat(101);
+      const tokenLong = tokenize(`${longProp}:val`, 'space');
+      assert.strictEqual(tokenLong.error, 'Invalid token structure');
+    });
+
+    it('handles single part tokens for space/visual attributes', () => {
+      const token = tokenize('single', 'space');
+      assert.strictEqual(token.property, 'single');
+      assert.strictEqual(token.value, 'single');
+    });
+  });
+
+});