clou-lang 0.2.0

package/src/parser.js

@@ -0,0 +1,879 @@
+// Clou Language - Parser
+// Converts tokens into an Abstract Syntax Tree (AST)
+
+const { TokenType } = require('./lexer');
+
+class ParseError extends Error {
+  constructor(message, token) {
+    const loc = token ? ` at line ${token.line}, col ${token.col}` : '';
+    super(`${message}${loc}`);
+    this.token = token;
+  }
+}
+
+class Parser {
+  constructor(tokens) {
+    this.tokens = tokens;
+    this.pos = 0;
+  }
+
+  peek() {
+    return this.tokens[this.pos];
+  }
+
+  advance() {
+    const token = this.tokens[this.pos];
+    this.pos++;
+    return token;
+  }
+
+  expect(type) {
+    const token = this.peek();
+    if (!token || token.type !== type) {
+      throw new ParseError(
+        `Expected ${type} but got ${token ? token.type : 'end of file'}`,
+        token
+      );
+    }
+    return this.advance();
+  }
+
+  match(type) {
+    if (this.peek() && this.peek().type === type) {
+      return this.advance();
+    }
+    return null;
+  }
+
+  skipNewlines() {
+    while (this.peek() && this.peek().type === TokenType.NEWLINE) {
+      this.advance();
+    }
+  }
+
+  // Main entry: parse full program
+  parse() {
+    this.skipNewlines();
+    const pages = [];
+    const styles = [];
+    const templates = [];
+    const variables = [];
+
+    while (this.peek() && this.peek().type !== TokenType.EOF) {
+      this.skipNewlines();
+      if (!this.peek() || this.peek().type === TokenType.EOF) break;
+
+      if (this.peek().type === TokenType.IMPORT) {
+        // imports are handled at a higher level, store as-is
+        const imp = this.parseImport();
+        if (!this.ast_imports) this.ast_imports = [];
+        this.ast_imports.push(imp);
+      } else if (this.peek().type === TokenType.TEMPLATE) {
+        templates.push(this.parseTemplate());
+      } else if (this.peek().type === TokenType.SET) {
+        variables.push(this.parseSetVariable());
+      } else if (this.peek().type === TokenType.PAGE) {
+        pages.push(this.parsePage());
+      } else if (this.peek().type === TokenType.STYLE) {
+        styles.push(this.parseStyleBlock());
+      } else {
+        // Top-level elements (no page wrapper)
+        if (pages.length === 0) {
+          pages.push({ type: 'Page', title: 'Clou App', children: [] });
+        }
+        pages[0].children.push(this.parseElement());
+      }
+      this.skipNewlines();
+    }
+
+    return { type: 'Program', pages, styles, templates, variables, imports: this.ast_imports || [] };
+  }
+
+  // page "Title":  OR  page "Title" at "/path":
+  parsePage() {
+    this.expect(TokenType.PAGE);
+    const title = this.expect(TokenType.STRING).value;
+    let route = null;
+
+    if (this.match(TokenType.AT)) {
+      route = this.expect(TokenType.STRING).value;
+    }
+
+    this.expect(TokenType.COLON);
+    this.skipNewlines();
+
+    const children = this.parseBlock();
+    return { type: 'Page', title, route, children };
+  }
+
+  // import "file.clou"
+  parseImport() {
+    this.expect(TokenType.IMPORT);
+    const file = this.expect(TokenType.STRING).value;
+    return { type: 'Import', file };
+  }
+
+  // Parse an indented block of elements
+  parseBlock() {
+    const children = [];
+    if (!this.match(TokenType.INDENT)) return children;
+
+    this.skipNewlines();
+    while (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+      this.skipNewlines();
+      if (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+        children.push(this.parseElement());
+      }
+      this.skipNewlines();
+    }
+
+    this.match(TokenType.DEDENT);
+    return children;
+  }
+
+  // Parse a single element
+  parseElement() {
+    const token = this.peek();
+    if (!token) throw new ParseError('Unexpected end of file');
+
+    switch (token.type) {
+      case TokenType.TITLE: return this.parseTitle();
+      case TokenType.HEADING: return this.parseHeading();
+      case TokenType.TEXT: return this.parseText();
+      case TokenType.IMAGE: return this.parseImage();
+      case TokenType.VIDEO: return this.parseVideo();
+      case TokenType.BOX: return this.parseBox();
+      case TokenType.ROW: return this.parseRow();
+      case TokenType.BUTTON: return this.parseButton();
+      case TokenType.LINK: return this.parseLink();
+      case TokenType.INPUT: return this.parseInput();
+      case TokenType.LIST: return this.parseList();
+      case TokenType.LINE: return this.parseLine();
+      case TokenType.NAVBAR: return this.parseNavbar();
+      case TokenType.FOOTER: return this.parseFooter();
+      case TokenType.CARD: return this.parseCard();
+      case TokenType.ICON: return this.parseIcon();
+      case TokenType.MODAL: return this.parseModal();
+      case TokenType.GRID: return this.parseGrid();
+      case TokenType.SECTION: return this.parseSection();
+      case TokenType.SPACE: return this.parseSpace();
+      case TokenType.SET: return this.parseSetVariable();
+      case TokenType.USE: return this.parseUse();
+      case TokenType.REPEAT: return this.parseRepeat();
+      case TokenType.THEME: return this.parseTheme();
+      case TokenType.SHOW: return this.parseShow();
+      case TokenType.HIDE: return this.parseHide();
+      case TokenType.TOGGLE: return this.parseToggle();
+      case TokenType.OPEN: return this.parseOpen();
+      case TokenType.CLOSE: return this.parseClose();
+      case TokenType.GO: return this.parseGo();
+      case TokenType.STYLE: return this.parseStyleBlock();
+      // Style properties
+      case TokenType.BACKGROUND: return this.parseStyleProp();
+      case TokenType.COLOR_KW: return this.parseStyleProp();
+      case TokenType.SIZE: return this.parseStyleProp();
+      case TokenType.BOLD: return this.parseSimpleStyle();
+      case TokenType.ITALIC: return this.parseSimpleStyle();
+      case TokenType.CENTER: return this.parseSimpleStyle();
+      case TokenType.LEFT: return this.parseSimpleStyle();
+      case TokenType.RIGHT: return this.parseSimpleStyle();
+      case TokenType.ROUNDED: return this.parseSimpleStyle();
+      case TokenType.SHADOW: return this.parseSimpleStyle();
+      case TokenType.PADDING: return this.parseStyleProp();
+      case TokenType.MARGIN: return this.parseStyleProp();
+      case TokenType.WIDTH: return this.parseStyleProp();
+      case TokenType.HEIGHT: return this.parseStyleProp();
+      case TokenType.FONT: return this.parseStyleProp();
+      case TokenType.GAP: return this.parseStyleProp();
+      case TokenType.GRADIENT: return this.parseGradient();
+      case TokenType.BORDER: return this.parseStyleProp();
+      case TokenType.OPACITY: return this.parseStyleProp();
+      case TokenType.ANIMATE: return this.parseAnimate();
+      case TokenType.FULL: return this.parseSimpleStyle();
+      case TokenType.DARK: return this.parseSimpleStyle();
+      case TokenType.LIGHT: return this.parseSimpleStyle();
+      case TokenType.SMALL: return this.parseSimpleStyle();
+      case TokenType.BIG: return this.parseSimpleStyle();
+      case TokenType.HUGE: return this.parseSimpleStyle();
+      case TokenType.TINY: return this.parseSimpleStyle();
+      case TokenType.STICKY: return this.parseSimpleStyle();
+      case TokenType.FIXED: return this.parseSimpleStyle();
+      case TokenType.WRAP: return this.parseSimpleStyle();
+      case TokenType.GROW: return this.parseSimpleStyle();
+      case TokenType.HOVER: return this.parseHoverBlock();
+      case TokenType.COLUMNS: return this.parseStyleProp();
+      default:
+        this.advance();
+        return { type: 'Unknown', value: token.value };
+    }
+  }
+
+  // set name to "value"
+  parseSetVariable() {
+    this.expect(TokenType.SET);
+    const name = this.expect(TokenType.IDENTIFIER).value;
+    this.expect(TokenType.TO);
+    let value;
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      value = this.advance().value;
+    } else if (this.peek() && this.peek().type === TokenType.NUMBER) {
+      value = this.advance().value;
+    } else {
+      value = this.advance().value;
+    }
+    return { type: 'SetVariable', name, value };
+  }
+
+  // template name(param1, param2):
+  parseTemplate() {
+    this.expect(TokenType.TEMPLATE);
+    const name = this.advance().value; // template name (identifier or keyword)
+    const params = [];
+
+    if (this.match(TokenType.LPAREN)) {
+      // Parse parameter names
+      if (this.peek() && this.peek().type !== TokenType.RPAREN) {
+        params.push(this.advance().value);
+        while (this.match(TokenType.COMMA)) {
+          params.push(this.advance().value);
+        }
+      }
+      this.expect(TokenType.RPAREN);
+    }
+
+    this.expect(TokenType.COLON);
+    this.skipNewlines();
+    const children = this.parseBlock();
+
+    return { type: 'Template', name, params, children };
+  }
+
+  // use templateName("arg1", "arg2")
+  parseUse() {
+    this.expect(TokenType.USE);
+    const name = this.advance().value;
+    const args = [];
+
+    if (this.match(TokenType.LPAREN)) {
+      if (this.peek() && this.peek().type !== TokenType.RPAREN) {
+        args.push(this.advance().value);
+        while (this.match(TokenType.COMMA)) {
+          args.push(this.advance().value);
+        }
+      }
+      this.expect(TokenType.RPAREN);
+    }
+
+    return { type: 'UseTemplate', name, args };
+  }
+
+  // repeat 3:
+  parseRepeat() {
+    this.expect(TokenType.REPEAT);
+    const count = this.expect(TokenType.NUMBER).value;
+    this.expect(TokenType.COLON);
+    this.skipNewlines();
+    const children = this.parseBlock();
+
+    return { type: 'Repeat', count: parseInt(count, 10), children };
+  }
+
+  // theme "name"
+  parseTheme() {
+    this.expect(TokenType.THEME);
+    const name = this.expect(TokenType.STRING).value;
+    return { type: 'Theme', name };
+  }
+
+  // title "text"
+  parseTitle() {
+    this.expect(TokenType.TITLE);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Title', value };
+  }
+
+  // heading "text"
+  parseHeading() {
+    this.expect(TokenType.HEADING);
+    const value = this.expect(TokenType.STRING).value;
+    const node = { type: 'Heading', value, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // text "content"
+  parseText() {
+    this.expect(TokenType.TEXT);
+
+    // "text color x" is a style property
+    if (this.peek() && this.peek().type === TokenType.COLOR_KW) {
+      return this.parseStylePropFrom('text');
+    }
+
+    const value = this.expect(TokenType.STRING).value;
+    const node = { type: 'Text', value, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // image "src"
+  parseImage() {
+    this.expect(TokenType.IMAGE);
+    const src = this.expect(TokenType.STRING).value;
+    const node = { type: 'Image', src, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // video "src"
+  parseVideo() {
+    this.expect(TokenType.VIDEO);
+    const src = this.expect(TokenType.STRING).value;
+    return { type: 'Video', src };
+  }
+
+  // box:
+  parseBox() {
+    this.expect(TokenType.BOX);
+    const node = { type: 'Box', name: null, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      node.name = this.advance().value;
+    }
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // row:
+  parseRow() {
+    this.expect(TokenType.ROW);
+    const node = { type: 'Row', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // navbar:
+  parseNavbar() {
+    this.expect(TokenType.NAVBAR);
+    const node = { type: 'Navbar', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      node.brand = this.advance().value;
+    }
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // footer:
+  parseFooter() {
+    this.expect(TokenType.FOOTER);
+    const node = { type: 'Footer', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // card:
+  parseCard() {
+    this.expect(TokenType.CARD);
+    const node = { type: 'Card', name: null, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      node.name = this.advance().value;
+    }
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // icon "name"
+  parseIcon() {
+    this.expect(TokenType.ICON);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Icon', value };
+  }
+
+  // modal "name":
+  parseModal() {
+    this.expect(TokenType.MODAL);
+    const name = this.expect(TokenType.STRING).value;
+    const node = { type: 'Modal', name, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // grid:
+  parseGrid() {
+    this.expect(TokenType.GRID);
+    const node = { type: 'Grid', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // section:
+  parseSection() {
+    this.expect(TokenType.SECTION);
+    const node = { type: 'Section', name: null, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      node.name = this.advance().value;
+    }
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // space 20
+  parseSpace() {
+    this.expect(TokenType.SPACE);
+    let value = '20';
+    if (this.peek() && this.peek().type === TokenType.NUMBER) {
+      value = this.advance().value;
+    }
+    return { type: 'Space', value };
+  }
+
+  // button "text":
+  parseButton() {
+    this.expect(TokenType.BUTTON);
+
+    // "button color x" is a style
+    if (this.peek() && this.peek().type === TokenType.COLOR_KW) {
+      return this.parseStylePropFrom('button');
+    }
+
+    const label = this.expect(TokenType.STRING).value;
+    const node = { type: 'Button', label, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // link "text" to "url"
+  parseLink() {
+    this.expect(TokenType.LINK);
+    const label = this.expect(TokenType.STRING).value;
+    this.expect(TokenType.TO);
+    const url = this.expect(TokenType.STRING).value;
+    return { type: 'Link', label, url };
+  }
+
+  // input "placeholder"
+  parseInput() {
+    this.expect(TokenType.INPUT);
+    const placeholder = this.expect(TokenType.STRING).value;
+    const node = { type: 'Input', placeholder, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // list:
+  parseList() {
+    this.expect(TokenType.LIST);
+    const node = { type: 'List', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // line
+  parseLine() {
+    this.advance();
+    return { type: 'Line' };
+  }
+
+  // show message "text"
+  parseShow() {
+    this.expect(TokenType.SHOW);
+    if (this.match(TokenType.MESSAGE)) {
+      const value = this.expect(TokenType.STRING).value;
+      return { type: 'ShowMessage', value };
+    }
+    const target = this.expect(TokenType.STRING).value;
+    return { type: 'Show', target };
+  }
+
+  // hide "elementName"
+  parseHide() {
+    this.expect(TokenType.HIDE);
+    const target = this.expect(TokenType.STRING).value;
+    return { type: 'Hide', target };
+  }
+
+  // toggle "elementName"
+  parseToggle() {
+    this.expect(TokenType.TOGGLE);
+    const target = this.expect(TokenType.STRING).value;
+    return { type: 'Toggle', target };
+  }
+
+  // open "modalName"
+  parseOpen() {
+    this.expect(TokenType.OPEN);
+    const target = this.expect(TokenType.STRING).value;
+    return { type: 'Open', target };
+  }
+
+  // close "modalName"
+  parseClose() {
+    this.expect(TokenType.CLOSE);
+    const target = this.expect(TokenType.STRING).value;
+    return { type: 'Close', target };
+  }
+
+  // go to "url"
+  parseGo() {
+    this.expect(TokenType.GO);
+    this.expect(TokenType.TO);
+    const url = this.expect(TokenType.STRING).value;
+    return { type: 'GoTo', url };
+  }
+
+  // animate fade / animate slide / animate bounce / animate grow
+  parseAnimate() {
+    this.expect(TokenType.ANIMATE);
+    const animation = this.advance().value;
+    return { type: 'StyleProp', property: 'animation', value: animation };
+  }
+
+  // gradient blue to purple
+  parseGradient() {
+    this.expect(TokenType.GRADIENT);
+    const color1 = this.advance().value;
+    this.expect(TokenType.TO);
+    const color2 = this.advance().value;
+    return { type: 'StyleProp', property: 'gradient', value: `${color1},${color2}` };
+  }
+
+  // hover:
+  parseHoverBlock() {
+    this.expect(TokenType.HOVER);
+    const node = { type: 'HoverBlock', properties: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      if (this.match(TokenType.INDENT)) {
+        this.skipNewlines();
+        while (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+          this.skipNewlines();
+          if (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+            const prop = this.parseStyleProperty();
+            if (prop) node.properties.push(prop);
+          }
+          this.skipNewlines();
+        }
+        this.match(TokenType.DEDENT);
+      }
+    }
+
+    return node;
+  }
+
+  // style:
+  parseStyleBlock() {
+    this.expect(TokenType.STYLE);
+    const node = { type: 'StyleBlock', properties: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+
+      if (this.match(TokenType.INDENT)) {
+        this.skipNewlines();
+        while (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+          this.skipNewlines();
+          if (this.peek() && this.peek().type !== TokenType.DEDENT && this.peek().type !== TokenType.EOF) {
+            const prop = this.parseStyleProperty();
+            if (prop) node.properties.push(prop);
+          }
+          this.skipNewlines();
+        }
+        this.match(TokenType.DEDENT);
+      }
+    }
+
+    return node;
+  }
+
+  // Parse a style property like "background color blue"
+  parseStyleProperty() {
+    const token = this.peek();
+    if (!token) return null;
+
+    switch (token.type) {
+      case TokenType.BACKGROUND: {
+        this.advance();
+        this.match(TokenType.COLOR_KW);
+        const value = this.advance().value;
+        return { property: 'background-color', value };
+      }
+      case TokenType.TEXT: {
+        this.advance();
+        this.expect(TokenType.COLOR_KW);
+        const value = this.advance().value;
+        return { property: 'color', value };
+      }
+      case TokenType.BUTTON: {
+        this.advance();
+        this.expect(TokenType.COLOR_KW);
+        const value = this.advance().value;
+        return { property: 'button-color', value };
+      }
+      case TokenType.SIZE: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'font-size', value };
+      }
+      case TokenType.FONT: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'font-family', value };
+      }
+      case TokenType.PADDING: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'padding', value };
+      }
+      case TokenType.MARGIN: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'margin', value };
+      }
+      case TokenType.WIDTH: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'width', value };
+      }
+      case TokenType.HEIGHT: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'height', value };
+      }
+      case TokenType.GAP: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'gap', value };
+      }
+      case TokenType.BORDER: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'border', value };
+      }
+      case TokenType.OPACITY: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'opacity', value };
+      }
+      case TokenType.COLUMNS: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'columns', value };
+      }
+      case TokenType.GRADIENT: {
+        this.advance();
+        const color1 = this.advance().value;
+        this.expect(TokenType.TO);
+        const color2 = this.advance().value;
+        return { property: 'gradient', value: `${color1},${color2}` };
+      }
+      case TokenType.BOLD: {
+        this.advance();
+        return { property: 'font-weight', value: 'bold' };
+      }
+      case TokenType.ITALIC: {
+        this.advance();
+        return { property: 'font-style', value: 'italic' };
+      }
+      case TokenType.CENTER: {
+        this.advance();
+        return { property: 'text-align', value: 'center' };
+      }
+      case TokenType.LEFT: {
+        this.advance();
+        return { property: 'text-align', value: 'left' };
+      }
+      case TokenType.RIGHT: {
+        this.advance();
+        return { property: 'text-align', value: 'right' };
+      }
+      case TokenType.ROUNDED: {
+        this.advance();
+        return { property: 'border-radius', value: '12px' };
+      }
+      case TokenType.SHADOW: {
+        this.advance();
+        return { property: 'box-shadow', value: '0 4px 12px rgba(0,0,0,0.15)' };
+      }
+      case TokenType.COLOR_KW: {
+        this.advance();
+        const value = this.advance().value;
+        return { property: 'color', value };
+      }
+      case TokenType.FULL: {
+        this.advance();
+        return { property: 'width', value: '100%' };
+      }
+      case TokenType.DARK: {
+        this.advance();
+        return { property: 'theme', value: 'dark' };
+      }
+      case TokenType.LIGHT: {
+        this.advance();
+        return { property: 'theme', value: 'light' };
+      }
+      case TokenType.SMALL: {
+        this.advance();
+        return { property: 'font-size', value: '14px' };
+      }
+      case TokenType.BIG: {
+        this.advance();
+        return { property: 'font-size', value: '24px' };
+      }
+      case TokenType.HUGE: {
+        this.advance();
+        return { property: 'font-size', value: '48px' };
+      }
+      case TokenType.TINY: {
+        this.advance();
+        return { property: 'font-size', value: '12px' };
+      }
+      case TokenType.STICKY: {
+        this.advance();
+        return { property: 'position', value: 'sticky; top: 0; z-index: 100' };
+      }
+      case TokenType.FIXED: {
+        this.advance();
+        return { property: 'position', value: 'fixed' };
+      }
+      case TokenType.GROW: {
+        this.advance();
+        return { property: 'flex', value: '1' };
+      }
+      case TokenType.ANIMATE: {
+        this.advance();
+        const anim = this.advance().value;
+        return { property: 'animation', value: anim };
+      }
+      default:
+        this.advance();
+        return null;
+    }
+  }
+
+  // Style property like "text color white" or "button color red"
+  parseStylePropFrom(prefix) {
+    this.expect(TokenType.COLOR_KW);
+    const value = this.advance().value;
+    if (prefix === 'text') {
+      return { type: 'StyleProp', property: 'color', value };
+    }
+    if (prefix === 'button') {
+      return { type: 'StyleProp', property: 'button-color', value };
+    }
+    return { type: 'StyleProp', property: prefix, value };
+  }
+
+  // Style as element (inside a box/element block)
+  parseStyleProp() {
+    const prop = this.parseStyleProperty();
+    if (prop) {
+      return { type: 'StyleProp', ...prop };
+    }
+    return { type: 'Unknown' };
+  }
+
+  parseSimpleStyle() {
+    const prop = this.parseStyleProperty();
+    if (prop) {
+      return { type: 'StyleProp', ...prop };
+    }
+    return { type: 'Unknown' };
+  }
+}
+
+function parse(tokens) {
+  const parser = new Parser(tokens);
+  return parser.parse();
+}
+
+module.exports = { parse, Parser, ParseError };