CSSparsing器的JavaScript?
我想parsing一个CSS blob到AST,所以我可以添加前缀到某些CSS指令。
是否有一个JavaScript或节点的CSSparsing器,将这样做?
我搜查了NPM。 我发现的唯一有用的结果是parser-lib ,但它是基于stream的,看起来我需要为每个CSS节点编写自己的发射器。
更新:我也发现JSCSSP ,但它没有文档…
更新:我之前提到JSCSSP,这是越野车似乎被放弃。 很明显,NPM上的css模块是最好的:
css = require 'css' input = ''' body { font-family: sans-serif; } #thing.foo p.bar { font-weight: bold; } ''' obj = css.parse input sheet = obj.stylesheet for rule in sheet.rules rule.selectors = ('#XXX ' + s for s in rule.selectors) console.log css.stringify(obj)
输出:
#XXX body { font-family: sans-serif; } #XXX #thing.foo p.bar { font-weight: bold; }
另外值得一提的是LESS 。 虽然它主要是对CSS的(奇妙的)扩展,但是LESSparsing器确实可以让你访问AST。
一个纯粹的CSS样式表也是一个有效的LESS样式表,所以你可以从现在开始,轻松地进入LESS的扩展。
对于它的价值, JSDOM使用CSSOM 。
这是我们的开源CSSparsing器css.js
这是一个简单的parsing示例:
<script type="text/javascript"> var cssString = ' .someSelector { margin:40px 10px; padding:5px}'; //initialize parser object var parser = new cssjs(); //parse css string var parsed = parser.parseCSS(cssString); console.log(parsed); </script>
在编辑之后将分析的数据结构串化为CSSstring
var newCSSString = parser.getCSSForEditor(parsed);
我们的CSSparsing器的主要特点是:
- 它是轻量级的。
- 它输出容易理解的JavaScript对象。 没有复杂的AST。
- 这是战斗testing(和单位testing也),并不断用于我们的产品( JotForm表单devise器 )。
- 它支持媒体查询,关键帧和字体规则。
- 它parsing时保留注释。