@bookklik/senangstart-css 0.2.9 → 0.2.10

package/src/compiler/generators/typescript.js

@@ -19,7 +19,9 @@ export function generateTypeScript(config) {
   
   // Generate radius unions
   const radiusKeys = Object.keys(theme.radius);
-  const roundedUnions = radiusKeys.map(k => `'rounded:${k}'`).join(' | ');
+  const directions = ['t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br'];
+  const roundedUnions = radiusKeys.map(k => `'rounded:${k}'`).join(' | ') +
+    ' | ' + directions.flatMap(d => radiusKeys.map(k => `'rounded-${d}:${k}'`)).join(' | ');
   
   // Generate shadow unions
   const shadowKeys = Object.keys(theme.shadow);

package/src/compiler/index.js

@@ -18,11 +18,24 @@ import { generateTypeScript } from './generators/typescript.js';
 export function compileSource(content, config) {
   const parsed = parseSource(content);
   const tokens = tokenizeAll(parsed);
+  
+  // Check for invalid tokens and log warnings
+  const invalidTokens = tokens.filter(token => token.error);
+  if (invalidTokens.length > 0) {
+    if (typeof console !== 'undefined') {
+      console.warn(`\n${invalidTokens.length} error(s) found in source:`);
+      for (const token of invalidTokens) {
+        console.warn(`  • ${token.raw} (${token.attrType}): ${token.error}`);
+      }
+    }
+  }
+  
   const css = generateCSS(tokens, config);
   
   return {
     tokens,
     css,
+    errors: invalidTokens.length > 0 ? invalidTokens : null,
     minifiedCSS: config.output?.minify ? minifyCSS(css) : null
   };
 }
@@ -36,14 +49,25 @@ export function compileSource(content, config) {
 export function compileMultiple(files, config) {
   const parsed = parseMultipleSources(files);
   const tokens = tokenizeAll(parsed);
+  
+  // Check for invalid tokens and log warnings
+  const invalidTokens = tokens.filter(token => token.error);
+  if (invalidTokens.length > 0) {
+    if (typeof console !== 'undefined') {
+      console.warn(`\n${invalidTokens.length} error(s) found in source:`);
+      for (const token of invalidTokens) {
+        console.warn(`  • ${token.raw} (${token.attrType}): ${token.error}`);
+      }
+    }
+  }
+  
   const css = generateCSS(tokens, config);
   
   return {
     tokens,
     css,
-    minifiedCSS: config.output?.minify ? minifyCSS(css) : null,
-    aiContext: generateAIContext(config),
-    typescript: generateTypeScript(config)
+    errors: invalidTokens.length > 0 ? invalidTokens : null,
+    minifiedCSS: config.output?.minify ? minifyCSS(css) : null
   };
 }
 

package/src/compiler/parser.js

@@ -18,11 +18,11 @@ const ATTRIBUTE_PATTERNS = {
  */
 function createAttributePatterns() {
   return {
-    layout: /layout\s*=\s*["']([^"']*)["']/g,
-    space:  /space\s*=\s*["']([^"']*)["']/g,
-    visual: /visual\s*=\s*["']([^"']*)["']/g,
-    interact: /interact\s*=\s*["']([^"']*)["']/g,
-    listens: /listens\s*=\s*["']([^"']*)["']/g
+    layout: /layout\s*=\s*("[^"]*"|'[^']*')/g,
+    space:  /space\s*=\s*("[^"]*"|'[^']*')/g,
+    visual: /visual\s*=\s*("[^"]*"|'[^']*')/g,
+    interact: /interact\s*=\s*("[^"]*"|'[^']*')/g,
+    listens: /listens\s*=\s*("[^"]*"|'[^']*')/g
   };
 }
 
@@ -45,7 +45,14 @@ export function parseSource(content) {
   for (const [attr, pattern] of Object.entries(patterns)) {
     let match;
     while ((match = pattern.exec(content)) !== null) {
-      const value = match[1].trim();
+      let value = match[1].trim();
+      if (value.length >= 2) {
+        const firstChar = value[0];
+        const lastChar = value[value.length - 1];
+        if ((firstChar === '"' && lastChar === '"') || (firstChar === "'" && lastChar === "'")) {
+          value = value.slice(1, -1);
+        }
+      }
       if (value.length > 10000) {
         continue;
       }

package/src/config/defaults.js

@@ -138,6 +138,7 @@ export const defaultConfig = {
       'tab':  '768px',      // Tablet
       'lap':  '1024px',     // Laptop
       'desk': '1280px',     // Desktop
+      'print': 'print',       // Print media query
       
       // Tailwind Compatibility
       'tw-sm': '640px',
@@ -148,6 +149,8 @@ export const defaultConfig = {
     },
 
     // 7. COLORS: Palette Scales
+    // Placeholder color for form inputs
+    placeholder: '#9ca3af',
     colors: {
       // Base colors
       'white':     '#FFFFFF',

package/src/definitions/index.js

@@ -16,6 +16,7 @@ import transformDefinitions from './visual-transforms.js';
 import borderDefinitions from './visual-borders.js';
 import divideDefinitions from './visual-divide.js';
 import svgDefinitions from './visual-svg.js';
+import performanceDefinitions from './visual-performance.js';
 
 // Import split layout definitions
 import flexDefinitions from './layout-flex.js';
@@ -37,7 +38,8 @@ const allVisualDefinitions = {
   ...transformDefinitions,
   ...borderDefinitions,
   ...divideDefinitions,
-  ...svgDefinitions
+  ...svgDefinitions,
+  ...performanceDefinitions
 };
 
 // Re-export all definitions
@@ -54,6 +56,7 @@ export { transformDefinitions } from './visual-transforms.js';
 export { borderDefinitions } from './visual-borders.js';
 export { divideDefinitions } from './visual-divide.js';
 export { svgDefinitions } from './visual-svg.js';
+export { performanceDefinitions } from './visual-performance.js';
 
 // Re-export split layout definitions
 export { flexDefinitions } from './layout-flex.js';

package/src/definitions/visual-performance.js

@@ -0,0 +1,126 @@
+/**
+ * SenangStart CSS - Performance Utility Definitions
+ * Content visibility, contain, and other performance optimizations
+ */
+
+// ======================
+// CONTENT VISIBILITY
+// ======================
+
+export const contentVisibility = {
+  name: 'content-visibility',
+  property: 'visual',
+  syntax: 'visual="content-visibility:[value]"',
+  description: 'Optimize rendering by skipping off-screen content',
+  descriptionMs: 'Optimumkan rendering dengan melangkau kandungan luar skrin',
+  category: 'visual',
+  values: [
+    { value: 'visible', css: 'content-visibility: visible;', description: 'Render all content', descriptionMs: 'Render semua kandungan' },
+    { value: 'auto', css: 'content-visibility: auto;', description: 'Skip when off-screen', descriptionMs: 'Langkau bila luar skrin' },
+    { value: 'hidden', css: 'content-visibility: hidden;', description: 'Never render off-screen', descriptionMs: 'Jangan render luar skrin' }
+  ],
+  examples: [
+    { code: '<section visual="content-visibility:auto">Large list</section>', description: 'Auto-optimize large content' },
+    { code: '<div visual="content-visibility:hidden">Hidden until needed</div>', description: 'Hide until revealed' }
+  ],
+  preview: [
+    {
+      title: 'Content Visibility',
+      titleMs: 'Ketampakan Kandungan',
+      description: 'Performance optimization for off-screen content',
+      descriptionMs: 'Pengoptimuman prestasi untuk kandungan luar skrin',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>`,
+      highlightValue: 'content-visibility:auto'
+    }
+  ]
+};
+
+// ======================
+// CONTAIN
+// ======================
+
+export const contain = {
+  name: 'contain',
+  property: 'visual',
+  syntax: 'visual="contain:[value]"',
+  description: 'Isolate element rendering for performance',
+  descriptionMs: 'Pencil rendering elemen untuk prestasi',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'contain: none;', description: 'No containment', descriptionMs: 'Tiada pengandungan' },
+    { value: 'strict', css: 'contain: strict;', description: 'Full containment', descriptionMs: 'Pengandungan penuh' },
+    { value: 'content', css: 'contain: content;', description: 'Content containment', descriptionMs: 'Pengandungan kandungan' },
+    { value: 'size', css: 'contain: size;', description: 'Size containment', descriptionMs: 'Pengandungan saiz' },
+    { value: 'layout', css: 'contain: layout;', description: 'Layout containment', descriptionMs: 'Pengandungan susun atur' },
+    { value: 'style', css: 'contain: style;', description: 'Style containment', descriptionMs: 'Pengandungan gaya' },
+    { value: 'paint', css: 'contain: paint;', description: 'Paint containment', descriptionMs: 'Pengandungan lukis' }
+  ],
+  examples: [
+    { code: '<div visual="contain:strict">Isolated rendering</div>', description: 'Full containment' },
+    { code: '<div visual="contain:content">Content isolation</div>', description: 'Content only' }
+  ],
+  preview: [
+    {
+      title: 'Contain',
+      titleMs: 'Mengandung',
+      description: 'Isolate element from rest of page for performance',
+      descriptionMs: 'Pencil elemen dari halaman lain untuk prestasi',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>`,
+      highlightValue: 'contain:strict'
+    }
+  ]
+};
+
+// ======================
+// WRITING MODE
+// ======================
+
+export const writingMode = {
+  name: 'writing-mode',
+  property: 'visual',
+  syntax: 'visual="writing-mode:[value]"',
+  description: 'Set writing direction for RTL/vertical text',
+  descriptionMs: 'Tetapkan arah penulisan untuk teks RTL/menegak',
+  category: 'visual',
+  values: [
+    { value: 'horizontal-tb', css: 'writing-mode: horizontal-tb;', description: 'Left to right', descriptionMs: 'Kiri ke kanan' },
+    { value: 'vertical-rl', css: 'writing-mode: vertical-rl;', description: 'Top to bottom RTL', descriptionMs: 'Atas ke bawah RTL' },
+    { value: 'vertical-lr', css: 'writing-mode: vertical-lr;', description: 'Top to bottom LTR', descriptionMs: 'Atas ke bawah LTR' },
+    { value: 'sideways-rl', css: 'writing-mode: sideways-rl;', description: 'Sideways RTL', descriptionMs: 'Menyerong RTL' },
+    { value: 'sideways-lr', css: 'writing-mode: sideways-lr;', description: 'Sideways LTR', descriptionMs: 'Menyerong LTR' }
+  ],
+  examples: [
+    { code: '<div visual="writing-mode:vertical-rl">Vertical text</div>', description: 'Vertical text RTL' },
+    { code: '<div visual="writing-mode:horizontal-tb">Horizontal text</div>', description: 'Horizontal text LTR' }
+  ],
+  preview: [
+    {
+      title: 'Writing Mode',
+      titleMs: 'Mod Penulisan',
+      description: 'Control text direction and orientation',
+      descriptionMs: 'Kawal arah dan orientasi teks',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>`,
+      highlightValue: 'writing-mode:vertical-rl'
+    }
+  ]
+};
+
+// Export all performance definitions
+export const performanceDefinitions = {
+  contentVisibility,
+  contain,
+  writingMode
+};
+
+export default performanceDefinitions;

package/src/definitions/visual.js

@@ -414,11 +414,12 @@ export const lineHeight = {
 export const borderRadius = {
   name: 'border-radius',
   property: 'visual',
-  syntax: 'visual="rounded:[value]"',
-  description: 'Set border radius',
-  descriptionMs: 'Tetapkan jejari sempadan',
+  syntax: 'visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"',
+  description: 'Set border radius for all corners or specific corners',
+  descriptionMs: 'Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu',
   category: 'visual',
   usesScale: 'radius',
+  supportsArbitrary: true,
   values: [
     { value: 'none', css: 'border-radius: var(--r-none);', description: 'No rounding', descriptionMs: 'Tiada pembulatan' },
     { value: 'small', css: 'border-radius: var(--r-small);', description: 'Small radius', descriptionMs: 'Jejari kecil' },
@@ -427,8 +428,10 @@ export const borderRadius = {
     { value: 'round', css: 'border-radius: var(--r-round);', description: 'Fully round', descriptionMs: 'Sepenuhnya bulat' }
   ],
   examples: [
-    { code: '<div visual="rounded:medium">Rounded corners</div>', description: 'Medium radius' },
-    { code: '<div visual="rounded:round">Pill shape</div>', description: 'Pill' }
+    { code: '<div visual="rounded:medium">Rounded corners</div>', description: 'All corners rounded' },
+    { code: '<div visual="rounded:round">Pill shape</div>', description: 'Fully round' },
+    { code: '<div visual="rounded-t:medium">Top rounded</div>', description: 'Top corners only' },
+    { code: '<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>', description: 'Specific corners' }
   ],
   footnotes: [
     {
@@ -446,12 +449,25 @@ export const borderRadius = {
       description: 'Round element corners from subtle to pill-shaped',
       descriptionMs: 'Bulatkan sudut elemen dari halus hingga berbentuk pil',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>`,
       highlightValue: 'rounded:medium'
+    },
+    {
+      title: 'Directional Border Radius',
+      titleMs: 'Jejari Sempadan Arah',
+      description: 'Round specific corners for unique shapes',
+      descriptionMs: 'Bulatkan bucu tertentu untuk bentuk unik',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>`,
+      highlightValue: 'rounded-t:medium'
     }
   ]
 };

package/src/utils/common.js

@@ -14,14 +14,26 @@ export function sanitizeValue(value) {
     return '';
   }
   
+  let sanitized = value;
+  
   // Remove potentially dangerous characters that could break CSS syntax
-  // Note: We used to filter {} but some tests expect them (e.g. content icons), so we only filter ; for now
+  // Note: We don't filter {} because some tests expect them (e.g. content icons like content: "→")
   const dangerousChars = /[;]/g;
-  if (dangerousChars.test(value)) {
-    return value.replace(dangerousChars, '_');
-  }
+  sanitized = sanitized.replace(dangerousChars, '_');
+  
+  // Filter CSS injection attempts via at-rules
+  const atRules = /@import|@charset|@namespace|@supports|@keyframes/gi;
+  sanitized = sanitized.replace(atRules, '');
+  
+  // Filter expression() (IE vulnerability)
+  const expression = /expression\s*\(/gi;
+  sanitized = sanitized.replace(expression, '');
+  
+  // Filter javascript: and data: URLs in url() that could execute scripts
+  const dangerousUrls = /(url\s*\(\s*['"]?)(javascript:|data:)([^)]*\))/gi;
+  sanitized = sanitized.replace(dangerousUrls, '$1about:blank$3');
   
-  return value;
+  return sanitized;
 }
 
 export default { sanitizeValue };

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

@@ -547,6 +547,96 @@ describe('CSS Generator', () => {
         assert.ok(css.includes('border-radius: var(--r-full)'));
       });
 
+      it('generates rounded-t', () => {
+        const token = { property: 'rounded-t', value: 'medium', attrType: 'visual', raw: 'rounded-t:medium' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-left-radius: var(--r-medium)'));
+        assert.ok(css.includes('border-top-right-radius: var(--r-medium)'));
+      });
+
+      it('generates rounded-b', () => {
+        const token = { property: 'rounded-b', value: 'big', attrType: 'visual', raw: 'rounded-b:big' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-bottom-left-radius: var(--r-big)'));
+        assert.ok(css.includes('border-bottom-right-radius: var(--r-big)'));
+      });
+
+      it('generates rounded-l', () => {
+        const token = { property: 'rounded-l', value: 'small', attrType: 'visual', raw: 'rounded-l:small' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-left-radius: var(--r-small)'));
+        assert.ok(css.includes('border-bottom-left-radius: var(--r-small)'));
+      });
+
+      it('generates rounded-r', () => {
+        const token = { property: 'rounded-r', value: 'round', attrType: 'visual', raw: 'rounded-r:round' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-right-radius: var(--r-round)'));
+        assert.ok(css.includes('border-bottom-right-radius: var(--r-round)'));
+      });
+
+      it('generates rounded-tl', () => {
+        const token = { property: 'rounded-tl', value: 'medium', attrType: 'visual', raw: 'rounded-tl:medium' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-left-radius: var(--r-medium)'));
+        assert.ok(!css.includes('border-top-right-radius'));
+      });
+
+      it('generates rounded-tr', () => {
+        const token = { property: 'rounded-tr', value: 'big', attrType: 'visual', raw: 'rounded-tr:big' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-right-radius: var(--r-big)'));
+        assert.ok(!css.includes('border-top-left-radius'));
+      });
+
+      it('generates rounded-bl', () => {
+        const token = { property: 'rounded-bl', value: 'small', attrType: 'visual', raw: 'rounded-bl:small' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-bottom-left-radius: var(--r-small)'));
+        assert.ok(!css.includes('border-bottom-right-radius'));
+      });
+
+      it('generates rounded-br', () => {
+        const token = { property: 'rounded-br', value: 'round', attrType: 'visual', raw: 'rounded-br:round' };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-bottom-right-radius: var(--r-round)'));
+        assert.ok(!css.includes('border-bottom-left-radius'));
+      });
+
+      it('generates rounded-t with arbitrary value', () => {
+        const token = { property: 'rounded-t', value: '12px', attrType: 'visual', raw: 'rounded-t:[12px]', isArbitrary: true };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-left-radius: 12px'));
+        assert.ok(css.includes('border-top-right-radius: 12px'));
+      });
+
+      it('generates rounded-tl with arbitrary value', () => {
+        const token = { property: 'rounded-tl', value: '8px', attrType: 'visual', raw: 'rounded-tl:[8px]', isArbitrary: true };
+        const config = createTestConfig();
+        const css = generateCSS([token], config);
+        
+        assert.ok(css.includes('border-top-left-radius: 8px'));
+        assert.ok(!css.includes('border-top-right-radius'));
+      });
+
     });
 
     describe('Shadow', () => {
@@ -581,6 +671,8 @@ describe('CSS Generator', () => {
         assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
         assert.ok(css.includes('border-left-color: var(--c-gray-300)'));
         assert.ok(css.includes('border-right-color: var(--c-gray-300)'));
+        assert.ok(css.includes('border-left-style: solid'));
+        assert.ok(css.includes('border-right-style: solid'));
       });
       
       it('generates divide-y', () => {
@@ -591,6 +683,8 @@ describe('CSS Generator', () => {
         assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
         assert.ok(css.includes('border-top-color: var(--c-danger)'));
         assert.ok(css.includes('border-bottom-color: var(--c-danger)'));
+        assert.ok(css.includes('border-top-style: solid'));
+        assert.ok(css.includes('border-bottom-style: solid'));
       });
       
       it('generates divide width', () => {
@@ -599,7 +693,10 @@ describe('CSS Generator', () => {
         const css = generateCSS([token], config);
         
         assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
-        assert.ok(css.includes('border-width: var(--s-thin)'));
+        assert.ok(css.includes('border-top-width: calc(var(--s-thin) * (1 - var(--ss-divide-y-reverse)))'));
+        assert.ok(css.includes('border-bottom-width: calc(var(--s-thin) * var(--ss-divide-y-reverse))'));
+        assert.ok(css.includes('border-left-width: calc(var(--s-thin) * (1 - var(--ss-divide-x-reverse)))'));
+        assert.ok(css.includes('border-right-width: calc(var(--s-thin) * var(--ss-divide-x-reverse))'));
       });
       
       it('generates divide-x-w', () => {
@@ -608,8 +705,8 @@ describe('CSS Generator', () => {
         const css = generateCSS([token], config);
         
         assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
-        assert.ok(css.includes('border-left-width: var(--s-regular)'));
-        assert.ok(css.includes('border-right-width: var(--s-regular)'));
+        assert.ok(css.includes('border-right-width: calc(var(--s-regular) * var(--ss-divide-x-reverse))'));
+        assert.ok(css.includes('border-left-width: calc(var(--s-regular) * (1 - var(--ss-divide-x-reverse)))'));
       });
       
       it('generates divide-y-w', () => {
@@ -618,8 +715,8 @@ describe('CSS Generator', () => {
         const css = generateCSS([token], config);
         
         assert.ok(css.includes('> :not([hidden]) ~ :not([hidden])'));
-        assert.ok(css.includes('border-top-width: var(--s-thick)'));
-        assert.ok(css.includes('border-bottom-width: var(--s-thick)'));
+        assert.ok(css.includes('border-bottom-width: calc(var(--s-thick) * var(--ss-divide-y-reverse))'));
+        assert.ok(css.includes('border-top-width: calc(var(--s-thick) * (1 - var(--ss-divide-y-reverse)))'));
       });
       
       it('generates divide style', () => {

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

@@ -42,12 +42,12 @@ describe('convertClass', () => {
     });
     
     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('top-0'), { category: 'layout', value: 'top:0' });
+      assert.deepStrictEqual(convertClass('left-0'), { category: 'layout', value: 'left:0' });
       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' });
+      assert.deepStrictEqual(convertClass('inset-0'), { category: 'layout', value: 'inset:0' });
     });
     
     it('should convert grid classes', () => {
@@ -127,7 +127,7 @@ describe('convertClass', () => {
     it('should convert text size classes', () => {
       assert.deepStrictEqual(convertClass('text-sm'), { category: 'visual', value: 'text-size:small' });
       assert.deepStrictEqual(convertClass('text-xl'), { category: 'visual', value: 'text-size:big' });
-      assert.deepStrictEqual(convertClass('text-2xl'), { category: 'visual', value: 'text-size:giant' });
+      assert.deepStrictEqual(convertClass('text-2xl'), { category: 'visual', value: 'text-size:huge' });
     });
 
     it('should convert border radius classes', () => {
@@ -136,6 +136,17 @@ describe('convertClass', () => {
       assert.deepStrictEqual(convertClass('rounded-full'), { category: 'visual', value: 'rounded:round' });
     });
 
+    it('should convert directional border radius classes', () => {
+      assert.deepStrictEqual(convertClass('rounded-t-lg'), { category: 'visual', value: 'rounded-t:medium' });
+      assert.deepStrictEqual(convertClass('rounded-b-lg'), { category: 'visual', value: 'rounded-b:medium' });
+      assert.deepStrictEqual(convertClass('rounded-l-lg'), { category: 'visual', value: 'rounded-l:medium' });
+      assert.deepStrictEqual(convertClass('rounded-r-lg'), { category: 'visual', value: 'rounded-r:medium' });
+      assert.deepStrictEqual(convertClass('rounded-tl-3xl'), { category: 'visual', value: 'rounded-tl:big' });
+      assert.deepStrictEqual(convertClass('rounded-tr-3xl'), { category: 'visual', value: 'rounded-tr:big' });
+      assert.deepStrictEqual(convertClass('rounded-bl-full'), { category: 'visual', value: 'rounded-bl:round' });
+      assert.deepStrictEqual(convertClass('rounded-br-full'), { category: 'visual', value: 'rounded-br:round' });
+    });
+
     it('should convert shadow classes', () => {
       assert.deepStrictEqual(convertClass('shadow'), { category: 'visual', value: 'shadow:small' });
       assert.deepStrictEqual(convertClass('shadow-md'), { category: 'visual', value: 'shadow:medium' });