Parser plz

something.md

New parser wishlist

Features

• Can we have nested syntax built in? Maybe with its own script type. Code examples are nested for brevity

  body
    div
      @if #something && window[width] > 1
        @if (.nothing)
          width: 10px
      @else
        height: window[height]
  

• Nested conditionals (as $if rule)

    @if #something && window[width] > 1
      @if (& .nothing)
        width: 10px
    @else
      height: window[height]
  

  Parses to:

    ["if", 
  
      # 1: Condition
      ["&&"
        ["$id", "selector"]
        ["lte", 
          ["get", "window", "[width]"]
          1]]]
  
      # 2: Positive-branch (nested condition)
        ["$if"
  
          ["$class", 
            ["$reserved", "this"]
            "nothing"]
  
          ["set", "[width]", ["px", 10]]
  
      # 3: Alternative-branch (nested condition)
        ["set", 
          "height",
          ["get", "window", "[height]"]
  

• Nested css rules (as $rule),

    body
      div
        width: 10px
  

  Parses to:

      ["$rule"
        # 1. Selector
  
        ["$tag", 
          "body"]
  
        # 2. Body (nested rule)
  
        ["$rule"
  
          ["$tag", 
            "div"]
  
            ["set", "[width]", ["px", 10]]]]
  

• Media queries

    @media (max-width: 10%) or (max-width: -10em)
      div
        width: 10px
  

  Parses similarily to conditionals, but with normalization of conditional clause:

  ["media"
  
    # 1. Condition (normalized to gte/lte/||/&&/eq)
  
    ["||", 
      ["gte"
        ["get", "[width]"]
        ["%", 10]]
      ["lte"
        ["get", "[width]"]
        ["em", -10]]
  
    # 2. Body
  
    ["$rule"
  
      ["$tag", 
        "div"]
  
        ["set", "[width]", ["px", 10]]]]]
  

• CSS rules

    body
      width: calc(10px + 2em)
      height: 10px + 2em
      right: auto
      top: [width]
      left: 10px + [width]
  

  Parses to:

  ["$rule",
  
    ['$tag', "body"]
  
    [
      ['set',
        '[width]',
        ['calc', # Calc here is only for serialization.
          ['plus', 
            ['px', 10]
            ['em', 2]
          ]]]
      ['set', 
        '[height]', 
        ['plus', 
          ['px', 10]
          ['em', 2]
        ]]
      ['set', 
        '[right]',
        "auto"]
      ['set', 
        '[top]',
        ['get', '[width]']]
  
      ['set', 
        '[left]', 
        ['plus', 
          ['px', 10]
          ['get', '[width]']
        ]]
    ]
  ]
  

Changes

• All properties are bracketed as [width] (controversal, i guess, but it's easier that way)
• Css is parsed into expressions, instead of CSSOM-like ruleset
• expressions, variable assignment are transparent. No need for ==, just do width: [width]
• Units, calc, media queries are parsed