使用CSSLint模块Javascript验证没有选择器的css属性

Question

我有一个文本区域，基本上是CodeMirror。我希望允许用户只键入没有选择器的CSS属性，然后使用CSSLint验证它。我不知道如何在CSSLint的帮助下实现这一目标。

例如，我希望用户键入：

font-size: 10px;

然后在没有选择器的情况下使用CSSlint验证它。当我不使用任何选择器时，CSSLint会产生错误。如果用户输入：h1{font-size:10px;}，那么它可以正常工作，但是对于直接属性，它不工作。我想知道一个规则或一个模块，它可以帮助我实现期望的目标，用户只需键入以下CSS属性：

font-size: 10px;
color: white;

然后，我可以很容易地验证这些属性是否正确。

Answer 1

您可以将用户输入包装在选择器中，然后使用CSSLint。

例如，下面的代码从带有id="input"的元素中读取属性，并将其记录到控制台。

const userInput = document.getElementById("input").value;
// Wrap the user input in a style rule so CSSLint can
// verify it.
const results = CSSLint.verify(
        "* {\n" + userInput + "\n}");
for (const message of results.messages) {
    // Note: Subtract 1 from the line number because
    // we added an extra line before the user input.
    console.log(message.type, message.message,
                "line", message.line - 1,
                "col", message.col);
}

根据您的用例，您可能需要添加一些额外的检查，以确保用户输入中没有任何可能影响处理的CSSLint注释。

您还可以添加一个规则，以确保所有用户输入都如预期的那样包含在一种样式规则中：

CSSLint.addRule({
    // rule information
    id: "unique-selector",
    name: "Check for unique selector",
    desc: "User input should consist only of "
        + "properties without selector",
    url: "",
    browsers: "All",

    // initialization
    init: function(parser, reporter) {
        "use strict";
        var rule = this,
            first = true;

        parser.addListener("startrule", function(event) {
            var selectors = event.selectors;
            if (first) {
               first = false;
            } else {
               reporter.report(
                       "Unexpected start of rule",
                       selectors[0].line,
                       selectors[0].col,
                       rule);
            }
        });
    },
});