Treetop中的CSS / HSS解析器和嵌套样式表规则

Question

我是Treetop的新手并尝试编写CSS / HSS解析器。 HSS使用嵌套样式，变量和一种mixin功能来增强CSS的基本功能。

我非常接近 - 解析器可以处理CSS - 但是当我在样式中实现样式时，我会失败。 e.g：

#rule #one {
  #two {
    color: red;
  }
  color: blue;
}

我已经拍了两张照片，一张处理空白，一张不处理空白。我不能上班。树梢文件有点稀疏，我真的觉得我缺少一些基本的东西。希望有人可以让我直截了当。

A：

 grammar Stylesheet

      rule stylesheet
        space* style*
      end

      rule style
        selectors space* '{' space* properties? space* '}' space*
      end

      rule properties
        property space* (';' space* property)* ';'?
      end

      rule property
        property_name space* [:] space* property_value
      end

      rule property_name
        [^:;}]+
      end

      rule property_value
        [^:;}]+
      end

      rule space
        [\t ]
      end

      rule selectors
        selector space* ([,] space* selector)*
      end

      rule selector
        element (space+ ![{] element)*
      end

      rule element
        class / id
      end

      rule id
        [#] [a-zA-Z-]+
      end

      rule class
       [.] [a-zA-Z-]+
      end
end

B：

grammar Stylesheet

  rule stylesheet
   style*
  end

  rule style
    selectors closure
  end

  rule closure
    '{' ( style / property )* '}'
  end

  rule property
    property_name ':' property_value ';'
  end

  rule property_name
    [^:}]+
    <PropertyNode>
  end

  rule property_value
    [^;]+
    <PropertyNode>
  end

  rule selectors
    selector ( !closure ',' selector )*
    <SelectorNode>
  end

  rule selector
    element ( space+ !closure element )*
    <SelectorNode>
  end

  rule element
    class / id
  end

  rule id
    ('#' [a-zA-Z]+)
  end

  rule class
    ('.' [a-zA-Z]+)
  end

  rule space
    [\t ]
  end

end

线束代码：

require 'rubygems'
require 'treetop'

class PropertyNode < Treetop::Runtime::SyntaxNode
  def value
    "property:(#{text_value})"
  end
end

class SelectorNode < Treetop::Runtime::SyntaxNode
  def value
    "--> #{text_value}"
  end
end

Treetop.load('css')

parser = StylesheetParser.new
parser.consume_all_input = false

string = <<EOS
#hello-there .my-friend {
  font-family:Verdana;
  font-size:12px;
}
.my-friend, #is-cool {
  font: 12px Verdana;
  #he .likes-jam, #very-much {asaads:there;}
  hello: there;
}
EOS

root_node = parser.parse(string)

def print_node(node, output = [])
  output << node.value if node.respond_to?(:value)
  node.elements.each {|element| print_node(element, output)} if node.elements
  output
end

puts print_node(root_node).join("\n") if root_node

#puts parser.methods.sort.join(',')
puts parser.input
puts string[0...parser.failure_index] + '<--'
puts parser.failure_reason
puts parser.terminal_failures

Answer 1

我认为你遇到了left recursion个问题？如果是这样，请记住TreeTop会生成recursive descent parsers，因此，您无法在语法中使用左递归。 （我仍然喜欢使用ocamlyacc / ocamllex而不是TreeTop的主要原因之一，尽管它非常性感。）这意味着你需要从左递归形式转换为右递归。既然您无疑拥有Dragon Book（对吗？），我将引导您阅读涉及该问题的4.3.3,4.3.4和4.4.1节。通常情况下，它很难理解，但解析器并没有得到任何声誉。还有一个很好的left recursion elimination tutorial，ANTLR的人提出了这个问题。它有点特定于ANTLR / ANTLRworks，但它比Dragon Book中的内容更容易理解。对于那些至少几次没有做过这件事的人来说，这是其中之一。但/ / p>

另外，小评论，如果您要使用TreeTop，我建议改为：

def ws
  [\t ]*
end

你不太可能需要匹配单个空格字符，而且几乎每个语法规则都需要它，因此将其命名为非常短的事情是有意义的。顺便提一下，单独的lexing步骤具有 优势。这是其中之一。

Answer 2

看起来有人打败了我：

http://lesscss.org/

虽然我注意到他们使用正则表达式和eval（）来解析输入文件而不是解析器。

编辑：现在他们使用TreeTop！这就像有人为我做了所有艰苦的工作。