@bookklik/senangstart-css 0.2.0 → 0.2.4

package/src/cdn/tw-conversion-engine.js

@@ -0,0 +1,497 @@
+/**
+ * SenangStart CSS - Tailwind to SenangStart Conversion Engine
+ * Converts Tailwind CSS class syntax to SenangStart CSS attribute syntax
+ */
+
+// ============================
+// MAPPING SCALES
+// ============================
+
+const spacingScale = {
+  0: "none",
+  px: "[1px]",
+  0.5: "tiny",
+  1: "tiny",
+  1.5: "tiny",
+  2: "tiny",
+  2.5: "small",
+  3: "small",
+  3.5: "small",
+  4: "small",
+  5: "medium",
+  6: "medium",
+  7: "medium",
+  8: "big",
+  9: "big",
+  10: "big",
+  11: "big",
+  12: "giant",
+  14: "giant",
+  16: "giant",
+  20: "vast",
+  24: "vast",
+  28: "vast",
+  32: "vast",
+  36: "vast",
+  40: "vast",
+  44: "vast",
+  48: "vast",
+  52: "vast",
+  56: "vast",
+  60: "vast",
+  64: "vast",
+  72: "vast",
+  80: "vast",
+  96: "vast",
+  full: "[100%]",
+  screen: "[100vw]",
+  auto: "auto",
+};
+
+const radiusScale = {
+  none: "none",
+  sm: "small",
+  "": "small",
+  md: "medium",
+  lg: "medium",
+  xl: "big",
+  "2xl": "big",
+  "3xl": "big",
+  full: "round",
+};
+
+const shadowScale = {
+  sm: "small",
+  "": "small",
+  md: "medium",
+  lg: "big",
+  xl: "giant",
+  "2xl": "giant",
+  none: "none",
+};
+
+const fontSizeScale = {
+  xs: "mini",      // 0.75rem
+  sm: "small",     // 0.875rem
+  base: "base",    // 1rem
+  lg: "large",     // 1.125rem
+  xl: "big",       // 1.25rem
+  "2xl": "huge",   // 1.5rem
+  "3xl": "grand",  // 1.875rem
+  "4xl": "giant",  // 2.25rem
+  "5xl": "mount",  // 3rem
+  "6xl": "mega",   // 3.75rem
+  "7xl": "giga",   // 4.5rem
+  "8xl": "tera",   // 6rem
+  "9xl": "hero",   // 8rem
+};
+
+const layoutMappings = {
+  container: "container",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid",
+  "inline-grid": "inline-grid",
+  block: "block",
+  "inline-block": "inline",
+  hidden: "hidden",
+  "flex-row": "row",
+  "flex-col": "col",
+  "flex-row-reverse": "row-reverse",
+  "flex-col-reverse": "col-reverse",
+  "flex-wrap": "wrap",
+  "flex-nowrap": "nowrap",
+  "flex-wrap-reverse": "wrap-reverse",
+  "flex-grow": "grow",
+  "flex-grow-0": "grow-0",
+  grow: "grow",
+  "grow-0": "grow-0",
+  "flex-shrink": "shrink",
+  "flex-shrink-0": "shrink-0",
+  shrink: "shrink",
+  "shrink-0": "shrink-0",
+  "flex-1": "flex:1",
+  "flex-auto": "flex:auto",
+  "flex-initial": "flex:initial",
+  "flex-none": "flex:none",
+  "justify-start": "justify:start",
+  "justify-end": "justify:end",
+  "justify-center": "justify:center",
+  "justify-between": "justify:between",
+  "justify-around": "justify:around",
+  "justify-evenly": "justify:evenly",
+  "items-start": "items:start",
+  "items-end": "items:end",
+  "items-center": "items:center",
+  "items-baseline": "items:baseline",
+  "items-stretch": "items:stretch",
+  "self-auto": "self:auto",
+  "self-start": "self:start",
+  "self-end": "self:end",
+  "self-center": "self:center",
+  "self-stretch": "self:stretch",
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky",
+  static: "static",
+  "overflow-auto": "overflow:auto",
+  "overflow-hidden": "overflow:hidden",
+  "overflow-visible": "overflow:visible",
+  "overflow-scroll": "overflow:scroll",
+  "object-contain": "object:contain",
+  "object-cover": "object:cover",
+  "object-fill": "object:fill",
+  "object-none": "object:none",
+  "object-scale-down": "object:scale-down",
+};
+
+const visualKeywords = {
+  italic: "italic",
+  "not-italic": "not-italic",
+  antialiased: "antialiased",
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+  capitalize: "capitalize",
+  "normal-case": "normal-case",
+  underline: "underline",
+  "line-through": "line-through",
+  "no-underline": "no-underline",
+  truncate: "truncate",
+  "cursor-pointer": "cursor:pointer",
+  "cursor-default": "cursor:default",
+  "cursor-not-allowed": "cursor:not-allowed",
+  "select-none": "select:none",
+  "select-text": "select:text",
+  "select-all": "select:all",
+};
+
+// ============================
+// HELPER FUNCTIONS
+// ============================
+
+function getSpacing(value, exact) {
+  if (exact) {
+    if (["full", "screen", "auto"].includes(value))
+      return spacingScale[value] || `[${value}]`;
+    return `tw-${value}`;
+  }
+  return spacingScale[value] || `[${value}]`;
+}
+
+// ============================
+// CONVERSION FUNCTIONS
+// ============================
+
+function convertClass(twClass, exact) {
+  // Handle prefixes (hover:, sm:, md:, etc.)
+  const prefixMatch = twClass.match(
+    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|active:|disabled:|dark:)(.+)$/
+  );
+  let prefix = "",
+    baseClass = twClass;
+  if (prefixMatch) {
+    const rawPrefix = prefixMatch[1].slice(0, -1); // remove colon
+    if (['sm', 'md', 'lg', 'xl', '2xl'].includes(rawPrefix)) {
+      prefix = `tw-${rawPrefix}:`;
+    } else {
+      prefix = prefixMatch[1];
+    }
+    baseClass = prefixMatch[2];
+  }
+
+  // Layout mappings
+  if (layoutMappings[baseClass])
+    return { cat: "layout", val: prefix + layoutMappings[baseClass] };
+
+  // Visual keywords
+  if (visualKeywords[baseClass])
+    return { cat: "visual", val: prefix + visualKeywords[baseClass] };
+
+  // Text color
+  const textColorMatch = baseClass.match(
+    /^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (textColorMatch)
+    return { cat: "visual", val: prefix + "text:" + textColorMatch[1] };
+
+  // Text alignment
+  if (
+    ["text-left", "text-center", "text-right", "text-justify"].includes(
+      baseClass
+    )
+  )
+    return {
+      cat: "visual",
+      val: prefix + "text:" + baseClass.replace("text-", ""),
+    };
+
+  // Text size
+  const textSizeMatch = baseClass.match(
+    /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
+  );
+  if (textSizeMatch) {
+    const size = exact
+      ? `tw-${textSizeMatch[1]}`
+      : fontSizeScale[textSizeMatch[1]] || textSizeMatch[1];
+    return { cat: "visual", val: prefix + "text-size:" + size };
+  }
+
+  // Background color
+  const bgMatch = baseClass.match(
+    /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (bgMatch) return { cat: "visual", val: prefix + "bg:" + bgMatch[1] };
+
+  // Border color
+  const borderColorMatch = baseClass.match(
+    /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (borderColorMatch)
+    return {
+      cat: "visual",
+      val: prefix + "border:" + borderColorMatch[1],
+    };
+
+  // Padding
+  const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
+  if (paddingMatch) {
+    const side = paddingMatch[1] ? "-" + paddingMatch[1] : "";
+    return {
+      cat: "space",
+      val: prefix + "p" + side + ":" + getSpacing(paddingMatch[2], exact),
+    };
+  }
+
+  // Margin
+  const marginMatch = baseClass.match(
+    /^-?m([trblxy])?-(\d+\.?\d*|px|auto|full|screen)$/
+  );
+  if (marginMatch) {
+    const isNeg = baseClass.startsWith("-");
+    const side = marginMatch[1] ? "-" + marginMatch[1] : "";
+    let val = getSpacing(marginMatch[2], exact);
+    if (isNeg) val = "[-" + val + "]";
+    return { cat: "space", val: prefix + "m" + side + ":" + val };
+  }
+
+  // Gap
+  const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
+  if (gapMatch) {
+    const axis = gapMatch[1] ? "-" + gapMatch[1] : "";
+    return {
+      cat: "space",
+      val: prefix + "g" + axis + ":" + getSpacing(gapMatch[2], exact),
+    };
+  }
+
+  // Width/Height with special values
+  const widthMatch = baseClass.match(/^(min-w|max-w|w)-(.+)$/);
+  if (widthMatch) {
+    const prop = widthMatch[1];
+    const rawVal = widthMatch[2];
+    // Special width values
+    const specialWidthVals = { 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]', 'prose': '[65ch]' };
+    const val = specialWidthVals[rawVal] || getSpacing(rawVal, exact);
+    return { cat: "space", val: prefix + prop + ":" + val };
+  }
+  const heightMatch = baseClass.match(/^(min-h|max-h|h)-(.+)$/);
+  if (heightMatch) {
+    const prop = heightMatch[1];
+    const rawVal = heightMatch[2];
+    const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]' };
+    const val = specialHeightVals[rawVal] || getSpacing(rawVal, exact);
+    return { cat: "space", val: prefix + prop + ":" + val };
+  }
+
+  // Border radius
+  const roundedMatch = baseClass.match(/^rounded(?:-(.+))?$/);
+  if (roundedMatch) {
+    const size = roundedMatch[1] || "";
+    const scale = exact
+      ? size === ""
+        ? "tw-DEFAULT"
+        : `tw-${size}`
+      : radiusScale[size] || "medium";
+    return { cat: "visual", val: prefix + "rounded:" + scale };
+  }
+
+  // Shadow
+  const shadowMatch = baseClass.match(/^shadow(?:-(.+))?$/);
+  if (shadowMatch) {
+    const size = shadowMatch[1] || "";
+    const scale = exact
+      ? size === ""
+        ? "tw-DEFAULT"
+        : `tw-${size}`
+      : shadowScale[size] || "medium";
+    return { cat: "visual", val: prefix + "shadow:" + scale };
+  }
+
+  // Font weight
+  const fontWeightMatch = baseClass.match(
+    /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/
+  );
+  if (fontWeightMatch)
+    return { cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] };
+
+  // Border width
+  const borderWidthMatch = baseClass.match(
+    /^border(?:-([trblxy]))?(?:-(\d+))?$/
+  );
+  if (
+    borderWidthMatch &&
+    (borderWidthMatch[2] ||
+      (!borderWidthMatch[1] && baseClass === "border"))
+  ) {
+    const side = borderWidthMatch[1]
+      ? "-" + borderWidthMatch[1] + "-w"
+      : "-w";
+    const width = borderWidthMatch[2] || "1";
+    return {
+      cat: "visual",
+      val: prefix + "border" + side + ":[" + width + "px]",
+    };
+  }
+
+  // Order
+  const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
+  if (orderMatch) {
+    return { cat: "layout", val: prefix + "order:" + orderMatch[1] };
+  }
+
+  // Grid columns
+  const gridColsMatch = baseClass.match(/^grid-cols-(\d+|none)$/);
+  if (gridColsMatch) {
+    return { cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] };
+  }
+
+  // Column span
+  const colSpanMatch = baseClass.match(/^col-span-(\d+|full)$/);
+  if (colSpanMatch) {
+    return { cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] };
+  }
+
+  // Grid rows
+  const gridRowsMatch = baseClass.match(/^grid-rows-(\d+|none)$/);
+  if (gridRowsMatch) {
+    return { cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] };
+  }
+
+  // Row span
+  const rowSpanMatch = baseClass.match(/^row-span-(\d+|full)$/);
+  if (rowSpanMatch) {
+    return { cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] };
+  }
+
+  // Opacity
+  const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
+  if (opacityMatch) {
+    return { cat: "visual", val: 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 { cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+  }
+
+  // Gradient from-* (starting color)
+  const fromMatch = baseClass.match(/^from-(.+)$/);
+  if (fromMatch) {
+    return { cat: "visual", val: prefix + "from:" + fromMatch[1] };
+  }
+
+  // Gradient via-* (middle color)
+  const viaMatch = baseClass.match(/^via-(.+)$/);
+  if (viaMatch) {
+    return { cat: "visual", val: prefix + "via:" + viaMatch[1] };
+  }
+
+  // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
+  const toMatch = baseClass.match(/^to-(.+)$/);
+  if (toMatch) {
+    return { cat: "visual", val: prefix + "to:" + toMatch[1] };
+  }
+
+  return null;
+}
+
+function convertClasses(classString, exact) {
+  const classes = classString
+    .trim()
+    .split(/\s+/)
+    .filter((c) => c);
+  const layout = [],
+    space = [],
+    visual = [],
+    unknown = [];
+
+  for (const cls of classes) {
+    const result = convertClass(cls, exact);
+    if (result) {
+      if (result.cat === "layout") layout.push(result.val);
+      else if (result.cat === "space") space.push(result.val);
+      else if (result.cat === "visual") visual.push(result.val);
+    } else {
+      unknown.push(cls);
+    }
+  }
+
+  return { layout, space, visual, unknown };
+}
+
+function convertHTML(html, exact) {
+  return html.replace(
+    /class=(['"])([^"']+)\1/g,
+    (match, quote, classValue) => {
+      const { layout, space, visual, unknown } = convertClasses(
+        classValue,
+        exact
+      );
+      const attrs = [];
+      if (layout.length) attrs.push(`layout="${layout.join(" ")}"`);
+      if (space.length) attrs.push(`space="${space.join(" ")}"`);
+      if (visual.length) attrs.push(`visual="${visual.join(" ")}"`);
+      if (unknown.length) attrs.push(`class="${unknown.join(" ")}"`);
+      return attrs.join(" ") || 'class=""';
+    }
+  );
+}
+
+// ============================
+// EXPORTS
+// ============================
+
+// Export for browser (IIFE global)
+if (typeof window !== 'undefined') {
+  window.SenangStartTW = {
+    convertClass,
+    convertClasses,
+    convertHTML,
+    // Expose scales for customization
+    scales: {
+      spacing: spacingScale,
+      radius: radiusScale,
+      shadow: shadowScale,
+      fontSize: fontSizeScale,
+    },
+    mappings: {
+      layout: layoutMappings,
+      visual: visualKeywords,
+    },
+  };
+}
+
+// Export for ES modules
+export {
+  convertClass,
+  convertClasses,
+  convertHTML,
+  spacingScale,
+  radiusScale,
+  shadowScale,
+  fontSizeScale,
+  layoutMappings,
+  visualKeywords,
+};

package/src/compiler/generators/css.js

@@ -51,6 +51,13 @@ export function generateCSSVariables(config) {
     css += `  --font-${key}: ${value};\n`;
   }
   
+  // Font size line-height variables (paired with font sizes)
+  if (theme.fontSizeLineHeight) {
+    for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
+      css += `  --font-lh-${key}: ${value};\n`;
+    }
+  }
+  
   // Font weight variables
   for (const [key, value] of Object.entries(theme.fontWeight)) {
     css += `  --fw-${key}: ${value};\n`;
@@ -118,6 +125,16 @@ export function generateCSSVariables(config) {
     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',
@@ -817,18 +834,23 @@ function generateVisualRule(token, config) {
       return `text-shadow: ${cssValue};`;
     },
     
-    // Font size
+    // Font size (with paired line-height)
     '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 weight / family

package/src/config/defaults.js

@@ -65,14 +65,38 @@ export const defaultConfig = {
       'giant':  '0 25px 50px rgba(0,0,0,0.25)'
     },
 
-    // 4. FONT SIZES: Reading Scale
+    // 4. FONT SIZES: Reading Scale (with paired line-heights)
     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 (xl)     
+      'huge':     '1.5rem',    // 24px (2xl)    
+      'grand':    '1.875rem',  // 30px (3xl)    
+      'giant':    '2.25rem',   // 36px (4xl)    
+      'mount':    '3rem',      // 48px (5xl)    
+      'mega':     '3.75rem',   // 60px (6xl)    
+      'giga':     '4.5rem',    // 72px (7xl)    
+      'tera':     '6rem',      // 96px (8xl)    
+      'hero':     '8rem'       // 128px         
+    },
+
+    // 4b. FONT SIZE LINE-HEIGHTS: Paired with font sizes
+    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',         // 48px (unitless 1)
+      'mega':     '1',         // 60px (unitless 1)
+      'giga':     '1',         // 72px (unitless 1)
+      'tera':     '1',         // 96px (unitless 1)
+      'hero':     '1'          // 128px (unitless 1)
     },
 
     // 5. FONT WEIGHTS

package/src/definitions/layout-positioning.js

@@ -33,7 +33,7 @@ export const position = {
       descriptionMs: 'Elemen diletakkan relatif kepada aliran normal',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
-  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
 </div>`,
       highlightValue: 'relative'
     },
@@ -43,7 +43,7 @@ export const position = {
       description: 'Element sticks when scrolling past it',
       descriptionMs: 'Elemen melekat apabila skrol melepasi',
       html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
 </div>`,
       highlightValue: 'sticky'
     }
@@ -133,10 +133,10 @@ export const zIndex = {
       description: 'Control stacking order of positioned elements',
       descriptionMs: 'Kawal susunan tindanan elemen yang diletakkan',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
-  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
-  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
-  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+  <span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
 </div>`,
       highlightValue: 'z:high'
     }