@xnoxs/flux-lang 3.1.1

package/src/self/css-preprocessor.flux

@@ -0,0 +1,373 @@
+// ============================================================
+//  Flux Self-Hosted CSS Preprocessor
+//  src/self/css-preprocessor.flux — written in Flux, compiled by stage-0
+//
+//  Note: single-quoted strings used for any literal { or } characters
+//  because Flux double-quoted strings treat {expr} as interpolation.
+// ============================================================
+
+export val 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',
+  'object-fit': 'object-fit', 'accent-color': 'accent-color',
+  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',
+}
+
+export val 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',
+}
+
+fn expandProp(name):
+  val t = name.trim()
+  return CSS_PROP_MAP[t] ?? t
+
+fn stripQuotes(v_):
+  val v = v_.trim()
+  if v.length >= 2:
+    val q0 = v[0]
+    val ql = v[v.length - 1]
+    if (q0 == '"' and ql == '"') or (q0 == "'" and ql == "'"):
+      return v.slice(1, -1)
+  return v
+
+fn resolveSelector(sel, parent):
+  val s = sel.trim()
+  if not parent: return s
+  if s.startsWith('@'): return s
+  if parent.startsWith('@keyframes') or parent.startsWith('@font-face'): return s
+  if s.includes('&'): return s.replace(/&/g, parent)
+  return parent + ' ' + s
+
+// ── CSS Block Parser ──────────────────────────────────────────────────────────
+class CssBlockParser:
+  content: any
+  indentLevel: int
+  rules: any[]
+  atRuleSegs: any[]
+  selStack: any[]
+
+  fn curSel():
+    if self.selStack.length == 0: return null
+    return self.selStack[self.selStack.length - 1]
+
+  fn findOrCreateRule(sel):
+    for entry in self.rules:
+      if entry.sel == sel: return entry
+    val entry = { sel, decls: [] }
+    self.rules.push(entry)
+    return entry
+
+  fn addDecl(sel, d):
+    val entry = self.findOrCreateRule(sel)
+    entry.decls.push(d)
+
+  fn addDeclarationLine(line, sel):
+    if line.includes(';'):
+      val parts = line.split(';')
+      for part in parts:
+        val t = part.trim()
+        if t: self.addDeclarationLine(t, sel)
+      return
+    val boolDecl = CSS_BOOL_MAP[line]
+    if boolDecl:
+      val bdParts = boolDecl.split(';')
+      for bd in bdParts:
+        val t = bd.trim()
+        if t: self.addDecl(sel, t)
+      return
+    val ci = line.indexOf(':')
+    if ci != -1:
+      val prop = expandProp(line.slice(0, ci))
+      val v    = stripQuotes(line.slice(ci + 1))
+      if v != '': self.addDecl(sel, prop + ': ' + v)
+
+  fn collectBlock(lines, startI):
+    var depth = 1
+    var inner = ''
+    var j = startI
+    while j < lines.length and depth > 0:
+      val ln = lines[j]
+      j = j + 1
+      for ch in ln:
+        if ch == '{': depth = depth + 1
+        else if ch == '}': depth = depth - 1
+      if depth > 0:
+        inner = inner + ln + "\n"
+      else:
+        val ci = ln.lastIndexOf('}')
+        if ci > 0: inner = inner + ln.slice(0, ci) + "\n"
+    return { inner, nextI: j }
+
+  fn parse():
+    val lines = self.content.split("\n")
+    var i = 0
+    while i < lines.length:
+      val raw  = lines[i]
+      i = i + 1
+      val line = raw.trim()
+      if not line or line.startsWith('//'): continue
+
+      val ob = line.indexOf('{')
+      val cb = line.lastIndexOf('}')
+
+      // @keyframes / @font-face — collect raw block
+      if line.startsWith('@keyframes') or line.startsWith('@font-face'):
+        val atSel = ob != -1 ? line.slice(0, ob).trim() : line.trim()
+        var atBody = ''
+        if ob != -1 and cb != -1 and cb > ob:
+          atBody = line.slice(ob + 1, cb)
+        else if ob != -1:
+          val res = self.collectBlock(lines, i)
+          i = res.nextI
+          atBody = res.inner
+        val ind_ = '  '.repeat(self.indentLevel ?? 0)
+        self.atRuleSegs.push(ind_ + atSel + ' {\n' + atBody + ind_ + '}\n')
+        continue
+
+      // @media / @supports / @layer — nested recursive
+      if line.startsWith('@media') or line.startsWith('@supports') or line.startsWith('@layer'):
+        val atSel = ob != -1 ? line.slice(0, ob).trim() : line.trim()
+        var atBody = ''
+        if ob != -1 and cb != -1 and cb > ob:
+          atBody = line.slice(ob + 1, cb)
+        else if ob != -1:
+          val res = self.collectBlock(lines, i)
+          i = res.nextI
+          atBody = res.inner
+        val innerCss = parseCssBlockContent(atBody, (self.indentLevel ?? 0) + 1)
+        val ind_ = '  '.repeat(self.indentLevel ?? 0)
+        self.atRuleSegs.push(ind_ + atSel + ' {\n' + innerCss + ind_ + '}\n')
+        continue
+
+      // Inline rule: selector { decls } on one line
+      if ob != -1 and cb != -1 and cb > ob:
+        val sel   = line.slice(0, ob).trim()
+        val inner = line.slice(ob + 1, cb).trim()
+        val full  = resolveSelector(sel, self.curSel())
+        self.findOrCreateRule(full)
+        if inner: self.addDeclarationLine(inner, full)
+        continue
+
+      // Block opener: selector {
+      if ob != -1:
+        val sel  = line.slice(0, ob).trim()
+        val full = resolveSelector(sel, self.curSel())
+        self.selStack.push(full)
+        self.findOrCreateRule(full)
+        val tail = line.slice(ob + 1).trim()
+        if tail: self.addDeclarationLine(tail, full)
+        continue
+
+      // Closing brace
+      if line == '}' or line == '};':
+        self.selStack.pop()
+        continue
+
+      // Declaration inside a rule block
+      if self.selStack.length > 0:
+        self.addDeclarationLine(line, self.curSel())
+
+  fn emit():
+    var css = ''
+    val ind  = '  '.repeat(self.indentLevel ?? 0)
+    val ind1 = ind + '  '
+    for entry in self.rules:
+      if entry.decls.length == 0: continue
+      css = css + ind + entry.sel + ' {\n'
+      for d in entry.decls:
+        css = css + ind1 + d + ';\n'
+      css = css + ind + '}\n'
+    for seg in self.atRuleSegs:
+      css = css + seg
+    return css
+
+export fn parseCssBlockContent(content, indentLevel):
+  val parser = new CssBlockParser(content, indentLevel ?? 0, [], [], [])
+  parser.parse()
+  return parser.emit()
+
+// ── Main source preprocessor: replace  css { }  with CSS string ──────────────
+export class CssPreprocessor:
+  src: any
+  pos: int
+  out: any
+
+  fn transform():
+    while self.pos < self.src.length:
+      self.scan()
+    return self.out
+
+  fn scan():
+    val c = self.src[self.pos]
+
+    // Line comment — pass through
+    if c == '/' and self.src[self.pos + 1] == '/':
+      val end_ = self.src.indexOf("\n", self.pos)
+      if end_ == -1:
+        self.out = self.out + self.src.slice(self.pos)
+        self.pos = self.src.length
+      else:
+        self.out = self.out + self.src.slice(self.pos, end_ + 1)
+        self.pos = end_ + 1
+      return
+
+    // Block comment — pass through
+    if c == '/' and self.src[self.pos + 1] == '*':
+      val end_ = self.src.indexOf('*/', self.pos + 2)
+      if end_ == -1:
+        self.out = self.out + self.src.slice(self.pos)
+        self.pos = self.src.length
+      else:
+        self.out = self.out + self.src.slice(self.pos, end_ + 2)
+        self.pos = end_ + 2
+      return
+
+    // String literals — pass through unchanged
+    if c == '"':
+      self.passString('"')
+      return
+    if c == "'":
+      self.passString("'")
+      return
+    if c == '`':
+      self.passTemplate()
+      return
+
+    // Detect standalone  css  keyword followed by  {
+    if c == 'c' and self.src.slice(self.pos, self.pos + 3) == 'css':
+      val charBefore = self.pos > 0 ? self.src[self.pos - 1] : "\n"
+      val charAfter  = self.src[self.pos + 3] ?? ''
+      if not /[a-zA-Z0-9_]/.test(charBefore) and not /[a-zA-Z0-9_]/.test(charAfter):
+        var j = self.pos + 3
+        while j < self.src.length and (self.src[j] == ' ' or self.src[j] == "\t" or self.src[j] == "\n" or self.src[j] == "\r"):
+          j = j + 1
+        if self.src[j] == '{':
+          j = j + 1
+          var depth = 1
+          val blockStart = j
+          while j < self.src.length and depth > 0:
+            val ch = self.src[j]
+            if ch == '"' or ch == "'" or ch == '`':
+              val q = ch
+              j = j + 1
+              while j < self.src.length and self.src[j] != q:
+                if self.src[j] == '\\': j = j + 1
+                j = j + 1
+              j = j + 1
+            else if ch == '{':
+              depth = depth + 1
+              j = j + 1
+            else if ch == '}':
+              depth = depth - 1
+              j = j + 1
+            else:
+              j = j + 1
+          val blockContent = self.src.slice(blockStart, j - 1)
+          val css = parseCssBlockContent(blockContent, 0)
+          val BT = String.fromCharCode(96)
+          val escapedCss = css.replace(/\\/g, '\\\\').replace(new RegExp(BT, 'g'), '\\' + BT)
+          self.out = self.out + BT + escapedCss + BT
+          self.pos = j
+          return
+
+    self.out = self.out + c
+    self.pos = self.pos + 1
+
+  fn passString(quote):
+    self.out = self.out + quote
+    self.pos = self.pos + 1
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if c == '\\':
+        self.out = self.out + c + (self.src[self.pos + 1] ?? '')
+        self.pos = self.pos + 2
+        continue
+      if c == quote:
+        self.out = self.out + c
+        self.pos = self.pos + 1
+        return
+      self.out = self.out + c
+      self.pos = self.pos + 1
+
+  fn passTemplate():
+    self.out = self.out + '`'
+    self.pos = self.pos + 1
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if c == '\\':
+        self.out = self.out + c + (self.src[self.pos + 1] ?? '')
+        self.pos = self.pos + 2
+        continue
+      if c == '`':
+        self.out = self.out + c
+        self.pos = self.pos + 1
+        return
+      self.out = self.out + c
+      self.pos = self.pos + 1
+
+export fn transformCss(src):
+  return new CssPreprocessor(src, 0, '').transform()