@xnoxs/flux-lang 3.2.0 → 3.2.2

package/src/css-preprocessor.js

@@ -1,399 +0,0 @@
-'use strict';
-
-// ── CSS property shorthands ───────────────────────────────────────────────────
-const CSS_PROP_MAP = {
-  bg: 'background', fg: 'color', p: 'padding',
-  px: 'padding-inline', py: 'padding-block',
-  pt: 'padding-top', pb: 'padding-bottom', pl: 'padding-left', pr: 'padding-right',
-  m: 'margin', mx: 'margin-inline', my: 'margin-block',
-  mt: 'margin-top', mb: 'margin-bottom', ml: 'margin-left', mr: 'margin-right',
-  radius: 'border-radius',
-  w: 'width', h: 'height',
-  'min-w': 'min-width', 'max-w': 'max-width', 'min-h': 'min-height', 'max-h': 'max-height',
-  gap: 'gap', 'col-gap': 'column-gap', 'row-gap': 'row-gap',
-  text: 'font-size', font: 'font-family', weight: 'font-weight',
-  tracking: 'letter-spacing', leading: 'line-height',
-  shadow: 'box-shadow', opacity: 'opacity',
-  border: 'border', outline: 'outline',
-  transition: 'transition', cursor: 'cursor', overflow: 'overflow',
-  'overflow-x': 'overflow-x', 'overflow-y': 'overflow-y',
-  z: 'z-index', transform: 'transform', content: 'content',
-  resize: 'resize', appearance: 'appearance',
-  'accent-color': 'accent-color', 'object-fit': 'object-fit',
-  direction: 'flex-direction', wrap: 'flex-wrap',
-  align: 'align-items', justify: 'justify-content',
-  'align-self': 'align-self', 'justify-self': 'justify-self',
-  grow: 'flex-grow', shrink: 'flex-shrink', basis: 'flex-basis',
-  order: 'order', cols: 'grid-template-columns', rows: 'grid-template-rows',
-  'col-span': 'grid-column', 'row-span': 'grid-row',
-  'place-items': 'place-items', 'place-content': 'place-content',
-  'list-style': 'list-style', 'text-align': 'text-align',
-  decoration: 'text-decoration', 'text-transform': 'text-transform',
-  'white-space': 'white-space', 'word-break': 'word-break',
-  'user-select': 'user-select', 'pointer-events': 'pointer-events',
-  'vertical-align': 'vertical-align', 'backdrop': 'backdrop-filter',
-  filter: 'filter', clip: 'clip-path', animation: 'animation',
-  position: 'position', top: 'top', right: 'right', bottom: 'bottom',
-  left: 'left', inset: 'inset', color: 'color', background: 'background',
-};
-
-// ── Boolean shorthands (no value needed) ─────────────────────────────────────
-const CSS_BOOL_MAP = {
-  flex: 'display: flex', grid: 'display: grid',
-  block: 'display: block', inline: 'display: inline',
-  'inline-flex': 'display: inline-flex', 'inline-block': 'display: inline-block',
-  'inline-grid': 'display: inline-grid',
-  bold: 'font-weight: 700', italic: 'font-style: italic',
-  relative: 'position: relative', absolute: 'position: absolute',
-  fixed: 'position: fixed', sticky: 'position: sticky',
-  hidden: 'display: none', pointer: 'cursor: pointer',
-  underline: 'text-decoration: underline',
-  'line-through': 'text-decoration: line-through',
-  capitalize: 'text-transform: capitalize',
-  uppercase: 'text-transform: uppercase',
-  lowercase: 'text-transform: lowercase',
-  truncate: 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap',
-  'select-none': 'user-select: none',
-  'no-wrap': 'white-space: nowrap',
-  'no-list': 'list-style: none',
-  'no-outline': 'outline: none',
-  'no-border': 'border: none',
-  'no-bg': 'background: transparent',
-  'no-padding': 'padding: 0',
-  'no-margin': 'margin: 0',
-  'no-resize': 'resize: none',
-  center: 'text-align: center',
-  'items-center': 'align-items: center',
-  'justify-center': 'justify-content: center',
-  'place-center': 'place-items: center',
-  'flex-col': 'flex-direction: column',
-  'flex-row': 'flex-direction: row',
-  'flex-wrap': 'flex-wrap: wrap',
-  'flex-1': 'flex: 1',
-  'w-full': 'width: 100%',
-  'h-full': 'height: 100%',
-  'w-screen': 'width: 100vw',
-  'h-screen': 'height: 100vh',
-  'box-border': 'box-sizing: border-box',
-};
-
-function expandProp(name) {
-  const t = name.trim();
-  return CSS_PROP_MAP[t] || t;
-}
-
-function stripQuotes(val) {
-  const v = val.trim();
-  if (v.length >= 2 &&
-      ((v[0] === '"' && v[v.length - 1] === '"') ||
-       (v[0] === "'" && v[v.length - 1] === "'"))) {
-    return v.slice(1, -1);
-  }
-  return v;
-}
-
-// Resolve a child selector against its parent
-function resolveSelector(sel, parent) {
-  sel = sel.trim();
-  if (!parent) return sel;
-  // At-rules and @keyframe frames inside @keyframes don't get prefixed
-  if (sel.startsWith('@')) return sel;
-  if (parent.startsWith('@keyframes') || parent.startsWith('@font-face')) return sel;
-  if (sel.includes('&')) return sel.replace(/&/g, parent);
-  return parent + ' ' + sel;
-}
-
-// Expand a single declaration string (possibly multiple semicolon-separated)
-function expandDecls(text) {
-  const result = [];
-  text.split(';').forEach(part => {
-    const d = part.trim();
-    if (!d || d.startsWith('//')) return;
-    if (CSS_BOOL_MAP[d]) {
-      CSS_BOOL_MAP[d].split(';').forEach(bd => { const t = bd.trim(); if (t) result.push(t); });
-      return;
-    }
-    const ci = d.indexOf(':');
-    if (ci !== -1) {
-      const prop = expandProp(d.slice(0, ci));
-      const val  = stripQuotes(d.slice(ci + 1));
-      if (val !== '') result.push(prop + ': ' + val);
-    }
-  });
-  return result;
-}
-
-// ── Parse CSS block content into a flat CSS string ────────────────────────────
-// Supports: nested selectors, &:pseudo, @keyframes, @media, boolean shorthands
-function parseCssBlockContent(content, indentLevel) {
-  const ind  = '  '.repeat(indentLevel || 0);
-  const ind1 = ind + '  ';
-  const lines = content.split('\n');
-
-  // We output in two passes:
-  //   1. Regular flattened rules (selector → [decls]) in a Map (preserves order)
-  //   2. At-rule blocks (@keyframes, @media, etc.) collected separately
-
-  const flatRules  = new Map();  // selector → string[]
-  const atRuleSegs = [];         // raw at-rule CSS strings (output after flat rules)
-  const selStack   = [];
-
-  function curSel() { return selStack.length ? selStack[selStack.length - 1] : null; }
-
-  function addDecl(sel, d) {
-    if (!flatRules.has(sel)) flatRules.set(sel, []);
-    flatRules.get(sel).push(d);
-  }
-
-  function addDeclarationLine(line, sel) {
-    // Support multiple declarations on one line: "p: 10px; m: 0; bold"
-    if (line.includes(';')) {
-      line.split(';').forEach(part => {
-        const t = part.trim();
-        if (t) addDeclarationLine(t, sel);
-      });
-      return;
-    }
-    // Boolean shorthand?
-    if (CSS_BOOL_MAP[line]) {
-      CSS_BOOL_MAP[line].split(';').forEach(bd => { const t = bd.trim(); if (t) addDecl(sel, t); });
-      return;
-    }
-    const ci = line.indexOf(':');
-    if (ci !== -1) {
-      const prop = expandProp(line.slice(0, ci));
-      const val  = stripQuotes(line.slice(ci + 1));
-      if (val !== '') addDecl(sel, prop + ': ' + val);
-    }
-  }
-
-  // ── Collect a balanced brace block from `lines` starting at index i ──────
-  // Returns { inner: string, nextI: number }
-  function collectBlock(startI) {
-    let depth = 1;
-    let inner = '';
-    let j = startI;
-    while (j < lines.length && depth > 0) {
-      const ln = lines[j++];
-      for (const ch of ln) {
-        if (ch === '{') depth++;
-        else if (ch === '}') depth--;
-      }
-      if (depth > 0) inner += ln + '\n';
-      else {
-        // Last line: take content before final }
-        const ci = ln.lastIndexOf('}');
-        if (ci > 0) inner += ln.slice(0, ci) + '\n';
-      }
-    }
-    return { inner, nextI: j };
-  }
-
-  let i = 0;
-  while (i < lines.length) {
-    const raw  = lines[i++];
-    const line = raw.trim();
-    if (!line || line.startsWith('//')) continue;
-
-    const ob = line.indexOf('{');
-    const cb = line.lastIndexOf('}');
-
-    // ── @keyframes / @font-face — emit as nested block (not flattened) ──────
-    if (line.startsWith('@keyframes') || line.startsWith('@font-face')) {
-      const atSel = ob !== -1 ? line.slice(0, ob).trim() : line.trim();
-      let   atBody = '';
-
-      if (ob !== -1 && cb !== -1 && cb > ob) {
-        // Inline: @keyframes name { from { ... } to { ... } }
-        atBody = line.slice(ob + 1, cb);
-      } else if (ob !== -1) {
-        const res = collectBlock(i);
-        i = res.nextI;
-        atBody = res.inner;
-      }
-
-      // Expand property shorthands inside keyframe body (simple line pass)
-      const expandedBody = atBody.split('\n').map(ln => {
-        const t = ln.trim();
-        if (!t || t === '{' || t === '}') return ln;
-        const colonIdx = t.indexOf(':');
-        if (colonIdx !== -1 && !t.slice(0, colonIdx).includes('{')) {
-          const prop = expandProp(t.slice(0, colonIdx));
-          const val  = stripQuotes(t.slice(colonIdx + 1));
-          return ln.replace(t, prop + ': ' + val);
-        }
-        return ln;
-      }).join('\n');
-
-      atRuleSegs.push(`${ind}${atSel} {\n${expandedBody}${ind}}\n`);
-      continue;
-    }
-
-    // ── @media / @supports — emit as nested block, process inner rules ───────
-    if (line.startsWith('@media') || line.startsWith('@supports') || line.startsWith('@layer')) {
-      const atSel = ob !== -1 ? line.slice(0, ob).trim() : line.trim();
-      let   atBody = '';
-
-      if (ob !== -1 && cb !== -1 && cb > ob) {
-        atBody = line.slice(ob + 1, cb);
-      } else if (ob !== -1) {
-        const res = collectBlock(i);
-        i = res.nextI;
-        atBody = res.inner;
-      }
-
-      const innerCss = parseCssBlockContent(atBody, (indentLevel || 0) + 1);
-      atRuleSegs.push(`${ind}${atSel} {\n${innerCss}${ind}}\n`);
-      continue;
-    }
-
-    // ── Inline rule: selector { decl; decl }  on a single line ──────────────
-    if (ob !== -1 && cb !== -1 && cb > ob) {
-      const sel   = line.slice(0, ob).trim();
-      const inner = line.slice(ob + 1, cb).trim();
-      const full  = resolveSelector(sel, curSel());
-      if (!flatRules.has(full)) flatRules.set(full, []);
-      if (inner) expandDecls(inner).forEach(d => addDecl(full, d));
-      continue;
-    }
-
-    // ── Block opener: selector { ─────────────────────────────────────────────
-    if (ob !== -1) {
-      const sel  = line.slice(0, ob).trim();
-      const full = resolveSelector(sel, curSel());
-      selStack.push(full);
-      if (!flatRules.has(full)) flatRules.set(full, []);
-      // Handle any declarations on the same line after {
-      const tail = line.slice(ob + 1).trim();
-      if (tail) expandDecls(tail).forEach(d => addDecl(full, d));
-      continue;
-    }
-
-    // ── Closing brace ────────────────────────────────────────────────────────
-    if (line === '}' || line === '};') {
-      selStack.pop();
-      continue;
-    }
-
-    // ── Declaration or boolean shorthand inside a rule block ─────────────────
-    if (selStack.length > 0) {
-      addDeclarationLine(line, curSel());
-    }
-  }
-
-  // ── Emit flat rules ───────────────────────────────────────────────────────
-  let css = '';
-  for (const [sel, decls] of flatRules) {
-    if (decls.length === 0) continue;
-    css += `${ind}${sel} {\n`;
-    for (const d of decls) css += `${ind1}${d};\n`;
-    css += `${ind}}\n`;
-  }
-  // ── Emit at-rule blocks (after flat rules) ────────────────────────────────
-  for (const seg of atRuleSegs) css += seg;
-
-  return css;
-}
-
-// ── Main source preprocessor: replace  css { }  with CSS string ──────────────
-class CssPreprocessor {
-  constructor(src) {
-    this.src = src;
-    this.pos = 0;
-    this.out = '';
-  }
-
-  transform() {
-    while (this.pos < this.src.length) {
-      this.scan();
-    }
-    return this.out;
-  }
-
-  scan() {
-    const c = this.src[this.pos];
-
-    // Line comment — pass through unchanged
-    if (c === '/' && this.src[this.pos + 1] === '/') {
-      const end = this.src.indexOf('\n', this.pos);
-      if (end === -1) { this.out += this.src.slice(this.pos); this.pos = this.src.length; }
-      else { this.out += this.src.slice(this.pos, end + 1); this.pos = end + 1; }
-      return;
-    }
-
-    // Block comment — pass through
-    if (c === '/' && this.src[this.pos + 1] === '*') {
-      const end = this.src.indexOf('*/', this.pos + 2);
-      if (end === -1) { this.out += this.src.slice(this.pos); this.pos = this.src.length; }
-      else { this.out += this.src.slice(this.pos, end + 2); this.pos = end + 2; }
-      return;
-    }
-
-    // String literals — pass through
-    if (c === '"' || c === "'" || c === '`') {
-      this.passString(c);
-      return;
-    }
-
-    // Detect standalone  css  keyword followed (across whitespace) by  {
-    if (c === 'c' && this.src.slice(this.pos, this.pos + 3) === 'css') {
-      const charBefore = this.pos > 0 ? this.src[this.pos - 1] : '\n';
-      const charAfter  = this.src[this.pos + 3] || '';
-      // Must not be part of a longer identifier
-      if (!/[a-zA-Z0-9_]/.test(charBefore) && !/[a-zA-Z0-9_]/.test(charAfter)) {
-        let j = this.pos + 3;
-        // Skip whitespace/newlines looking for {
-        while (j < this.src.length &&
-               (this.src[j] === ' ' || this.src[j] === '\t' ||
-                this.src[j] === '\n' || this.src[j] === '\r')) j++;
-
-        if (this.src[j] === '{') {
-          j++; // consume opening {
-          let depth      = 1;
-          let blockStart = j;
-
-          // Find matching closing }
-          while (j < this.src.length && depth > 0) {
-            const ch = this.src[j];
-            if (ch === '"' || ch === "'" || ch === '`') {
-              const q = ch; j++;
-              while (j < this.src.length && this.src[j] !== q) {
-                if (this.src[j] === '\\') j++;
-                j++;
-              }
-              j++;
-            } else if (ch === '{') { depth++; j++; }
-            else if (ch === '}') { depth--; j++; }
-            else j++;
-          }
-
-          const blockContent = this.src.slice(blockStart, j - 1);
-          const css          = parseCssBlockContent(blockContent);
-          // Emit as backtick string (Flux raw multiline string, no interpolation)
-          this.out += '`' + css.replace(/\\/g, '\\\\').replace(/`/g, '\\`') + '`';
-          this.pos = j;
-          return;
-        }
-      }
-    }
-
-    this.out += c;
-    this.pos++;
-  }
-
-  passString(quote) {
-    this.out += quote; this.pos++;
-    while (this.pos < this.src.length) {
-      const c = this.src[this.pos];
-      if (c === '\\') { this.out += c + (this.src[this.pos + 1] || ''); this.pos += 2; continue; }
-      if (c === quote) { this.out += c; this.pos++; return; }
-      this.out += c; this.pos++;
-    }
-  }
-}
-
-function transformCss(src) {
-  return new CssPreprocessor(src).transform();
-}
-
-module.exports = { transformCss, parseCssBlockContent, CSS_PROP_MAP, CSS_BOOL_MAP };