@bookklik/senangstart-css 0.2.0 → 0.2.4

package/scripts/build-dist.js

@@ -6,7 +6,7 @@
  */
 
 import * as esbuild from 'esbuild';
-import { mkdirSync, statSync } from 'fs';
+import { mkdirSync, statSync, copyFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -49,6 +49,48 @@ await esbuild.build({
 const minSize = statSync(join(distDir, 'senangstart-css.min.js')).size;
 console.log(`✓ Created senangstart-css.min.js (${(minSize / 1024).toFixed(1)} KB)`);
 
+// Build Tailwind converter - unminified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.js'),
+  minify: false,
+  banner: {
+    js: '/* SenangStart CSS - Tailwind Converter v0.2.0 | MIT License */'
+  }
+});
+
+const twUnminSize = statSync(join(distDir, 'senangstart-tw.js')).size;
+console.log(`✓ Created senangstart-tw.js (${(twUnminSize / 1024).toFixed(1)} KB)`);
+
+// Build Tailwind converter - minified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.min.js'),
+  minify: true,
+  banner: {
+    js: '/* SenangStart TW v0.2.0 | MIT */'
+  }
+});
+
+const twMinSize = statSync(join(distDir, 'senangstart-tw.min.js')).size;
+console.log(`✓ Created senangstart-tw.min.js (${(twMinSize / 1024).toFixed(1)} KB)`);
+
+// Copy to docs/public/assets for VitePress
+const docsAssetsDir = join(root, 'docs', 'public', 'assets');
+mkdirSync(docsAssetsDir, { recursive: true });
+copyFileSync(
+  join(distDir, 'senangstart-css.min.js'),
+  join(docsAssetsDir, 'senangstart-css.min.js')
+);
+console.log(`✓ Copied to docs/public/assets/senangstart-css.min.js`);
+
 console.log('\n📦 Dist build complete!');
 console.log('   dist/senangstart-css.js');
 console.log('   dist/senangstart-css.min.js');
+console.log('   dist/senangstart-tw.js');
+console.log('   dist/senangstart-tw.min.js');
+

package/scripts/convert-tailwind.js

@@ -583,6 +583,30 @@ function convertClass(twClass, options = {}) {
     return { category: 'visual', value: prefix + "opacity:" + opacityMatch[1] };
   }
 
+  // Gradient direction (bg-gradient-to-*)
+  const bgGradientMatch = baseClass.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);
+  if (bgGradientMatch) {
+    return { category: 'visual', value: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+  }
+
+  // Gradient from-* (starting color)
+  const fromMatch = baseClass.match(/^from-(.+)$/);
+  if (fromMatch) {
+    return { category: 'visual', value: prefix + "from:" + fromMatch[1] };
+  }
+
+  // Gradient via-* (middle color)
+  const viaMatch = baseClass.match(/^via-(.+)$/);
+  if (viaMatch) {
+    return { category: 'visual', value: prefix + "via:" + viaMatch[1] };
+  }
+
+  // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
+  const toMatch = baseClass.match(/^to-(.+)$/);
+  if (toMatch) {
+    return { category: 'visual', value: prefix + "to:" + toMatch[1] };
+  }
+
   return null;
 }
 

package/scripts/generate-docs.js

@@ -362,15 +362,17 @@ function compareDocs(options = {}) {
  */
 function extractValuesFromTable(markdown) {
   const values = [];
-  const tableRegex = /\|[^|]+\|[^|]+\|[^|]+\|/g;
-  const matches = markdown.match(tableRegex) || [];
+  const lines = markdown.split('\n');
   
-  for (const match of matches) {
-    // Skip header rows
-    if (match.includes('Value') || match.includes('Nilai') || match.includes('---')) continue;
+  for (let line of lines) {
+    line = line.trim();
+    // Skip non-table lines, header rows, and separator rows
+    if (!line.startsWith('|')) continue;
+    if (line.includes('Value') || line.includes('Nilai') || line.includes('Property') || line.includes('Properti')) continue;
+    if (line.includes('---')) continue;
     
-    // Extract first cell (value name)
-    const cellMatch = match.match(/\|\s*`([^`]+)`/);
+    // Extract first cell (value name) - look for backtick-quoted value
+    const cellMatch = line.match(/\|\s*`([^`]+)`/);
     if (cellMatch) {
       values.push(cellMatch[1]);
     }

package/src/cdn/jit.js

@@ -25,6 +25,9 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
     theme: {
       spacing: {
         'none':   '0px',
+        'thin':   '1px', 
+        'regular': '2px',
+        'thick':  '3px', 
         'tiny':   '4px',
         'small':  '8px',
         'medium': '16px',
@@ -47,12 +50,34 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
         'giant':  '0 25px 50px rgba(0,0,0,0.25)'
       },
       fontSize: {
-        'tiny':   '12px',
-        'small':  '14px',
-        'medium': '16px',
-        'big':    '20px',
-        'giant':  '32px',
-        'vast':   '48px'
+        'mini':     '0.75rem',   // 12px
+        'small':    '0.875rem',  // 14px
+        'base':     '1rem',      // 16px
+        'large':    '1.125rem',  // 18px
+        'big':      '1.25rem',   // 20px
+        'huge':     '1.5rem',    // 24px
+        'grand':    '1.875rem',  // 30px
+        'giant':    '2.25rem',   // 36px
+        'mount':    '3rem',      // 48px
+        'mega':     '3.75rem',   // 60px
+        'giga':     '4.5rem',    // 72px
+        'tera':     '6rem',      // 96px
+        'hero':     '8rem'       // 128px
+      },
+      fontSizeLineHeight: {
+        'mini':     '1rem',      // 16px
+        'small':    '1.25rem',   // 20px
+        'base':     '1.5rem',    // 24px
+        'large':    '1.75rem',   // 28px
+        'big':      '1.75rem',   // 28px
+        'huge':     '2rem',      // 32px
+        'grand':    '2.25rem',   // 36px
+        'giant':    '2.5rem',    // 40px
+        'mount':    '1',         // unitless 1
+        'mega':     '1',         // unitless 1
+        'giga':     '1',         // unitless 1
+        'tera':     '1',         // unitless 1
+        'hero':     '1'          // unitless 1
       },
       fontWeight: {
         'normal': '400',
@@ -311,6 +336,13 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
       css += `  --font-${key}: ${value};\n`;
     }
     
+    // Font size line-height (paired with font sizes)
+    if (theme.fontSizeLineHeight) {
+      for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
+        css += `  --font-lh-${key}: ${value};\n`;
+      }
+    }
+    
     // Font weight
     for (const [key, value] of Object.entries(theme.fontWeight)) {
       css += `  --fw-${key}: ${value};\n`;
@@ -383,6 +415,16 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
       css += `  --tw-text-${key}: ${value};\n`;
     }
     
+    // Tailwind Line Height Scale (paired with font sizes)
+    const twLeading = {
+      'xs': '1rem', 'sm': '1.25rem', 'base': '1.5rem', 'lg': '1.75rem', 'xl': '1.75rem',
+      '2xl': '2rem', '3xl': '2.25rem', '4xl': '2.5rem', '5xl': '1',
+      '6xl': '1', '7xl': '1', '8xl': '1', '9xl': '1'
+    };
+    for (const [key, value] of Object.entries(twLeading)) {
+      css += `  --tw-leading-${key}: ${value};\n`;
+    }
+    
     // Tailwind Font Weight Scale
     const twFontWeight = {
       'thin': '100',
@@ -1174,15 +1216,20 @@ img, video {
       },
       'text-size': () => {
         let cssValue;
+        let lineHeightValue;
         if (isArbitrary) {
           cssValue = value;
+          // No line-height for arbitrary values
+          return `font-size: ${cssValue};`;
         } else if (value.startsWith('tw-')) {
           const twValue = value.slice(3);
           cssValue = `var(--tw-text-${twValue})`;
+          lineHeightValue = `var(--tw-leading-${twValue})`;
         } else {
           cssValue = `var(--font-${value})`;
+          lineHeightValue = `var(--font-lh-${value})`;
         }
-        return `font-size: ${cssValue};`;
+        return `font-size: ${cssValue}; line-height: ${lineHeightValue};`;
       },
       'font': () => {
         // Check for font-family presets
@@ -1614,6 +1661,22 @@ img, video {
         return `background-image: ${cssValue};`;
       },
       
+      // ============================================
+      // GRADIENT COLOR STOPS
+      // ============================================
+      'from': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-from: ${color}; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`;
+      },
+      'via': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-via: ${color}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);`;
+      },
+      'to': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-to: ${color};`;
+      },
+      
       // ============================================
       // BACKDROP FILTER UTILITIES
       // ============================================