JavaScript的CSS解析器？

Question

更新2018年:在PostCSS存在之前很久就提出了这个问题,我可能会使用它.

我想将一小块CSS解析为AST,这样我就可以为某些CSS指令添加前缀.

是否有用于JavaScript或Node的CSS解析器可以执行此操作？

我搜索过NPM.我发现的唯一有用的结果是parser-lib,但它是基于流的,看起来我需要为每个CSS节点编写自己的发射器.

更新:我也找到了JSCSSP,但它没有文档......

Answer 1

更新:我之前提到过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;
}

Answer 2

另外值得一提的是LESS.虽然它主要是CSS的一个(奇妙的)扩展,但LESS解析器确实允许您访问AST.

纯CSS样式表也是一个有效的LESS样式表,因此您可以从现有的内容开始,轻松实现LESS的扩展.

Answer 3

这是我们的开源 CSS 解析器css.js

这是一个简单的解析示例：

<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>

编辑后将解析的数据结构字符串化为 CSS 字符串

var newCSSString = parser.getCSSForEditor(parsed);

我们的 CSS 解析器的主要特点是：

• 它很轻。
• 它输出易于理解的 javascript 对象。没有复杂的 AST。
• 它经过实战测试（也经过单元测试）并经常用于我们的产品（JotForm 表单设计器）。
• 它支持媒体查询、关键帧和字体规则。
• 它在解析时保留注释。

Answer 4

不需要使用外部CSS解析器，我们可以使用原生CSS解析器

   
var sheetRef=document.getElementsByTagName("style")[0];

console.log("----------------list of  rules--------------");
for (var i=0; i<sheetRef.sheet.cssRules.length; i++){


var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;


if (sheet.cssRules.length > 0) {
//console.log(sheet.cssRules[i]);
  console.log(sheet.cssRules[i].selectorText);
  console.log(sheet.cssRules[i].cssText);

                }}

.red{

color:red;
}

插入规则

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.insertRule('.foo{color:red;}', 0);

删除 所有浏览器的规则，版本 9 之前的 IE 除外

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.removeRule (0);

删除 所有浏览器的规则，版本 9 之前的 IE 除外

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.deleteRule (0);

添加媒体

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.insertRule('.foo{color:red;}', 0);

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.removeRule (0);

var sheetRef=document.getElementsByTagName("style")[0];
var sheet = sheetRef.sheet ? sheetRef.sheet : sheetRef.styleSheet;
sheet.deleteRule (0);

获取规则

  function AddScreenMedia () {
            var styleTag = document.getElementsByTagName("style")[0];

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) {   // all browsers, except IE before version 9
                var rule = sheet.cssRules[0];
                var mediaList = rule.media;

                alert ("The media types before adding the screen media type: " + mediaList.mediaText);
                mediaList.appendMedium ("screen");
                alert ("The media types after adding the screen media type: " + mediaList.mediaText);
            }
            else {  // Internet Explorer before version 9
                    // note: the rules collection does not contain the at-rules
                alert ("Your browser does not support this example!");
            }
        }

  @media print {
            body {
                font-size: 13px;
                color: #FF0000;
            }
          }

some text
<button onclick="AddScreenMedia ();">Add screen media</button>