用 JS 写简单的 CSS Parser

用正则表达式提取规则

JotForm团队的一篇文章

([\\s\\S]*?){([\\s\\S]*?)}

分解一下

([\\s\\S]*?) => any string as selector

{ => then an opening bracket

([\\s\\S]*?) => any string as CSS rules

} => then a closing bracket

输入这个css文本:

.someClass {
  margin : 20px;
}

得到结果是这样:

[
  {
    "selector" : ".someClass",
    "rules" : [
      {
        "directive" : "margin",
        "value" : "20px"
      }
    ]
  }
]

好吧其实没那么容易, 例如Media Query就没考虑到吧

((\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?))|(([\\s\\S]*?){([\\s\\S]*?)})