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

【问题标题】：validate css properties without selector using CSSLint module Javascript使用 CSSLint 模块 Javascript 验证没有选择器的 css 属性
【发布时间】：2021-07-12 12:05:30
【问题描述】：

我有一个基本上是CodeMirror 的文本区域。我想允许用户只键入没有选择器的 CSS 属性，然后使用 CSSLint 对其进行验证。我不确定如何在 CSSLint 的帮助下实现这一目标。

例如，我希望用户输入：

font-size: 10px;

然后在没有选择器的情况下使用 CSSlint 对其进行验证。当我不使用任何选择器时，CSSLint 会出错。如果用户输入： h1{font-size:10px;}，那么它可以正常工作，但对于直接属性则不能。我想了解可以帮助我实现预期目标的规则或模块，其中用户只需键入 CSS 属性，如下所示：

font-size: 10px;
color: white;

然后我可以轻松验证属性是否正确。

【问题讨论】：

也许您可以将用户输入包装在“虚拟”选择器中，以便 CSSLint 可以处理它，例如 * { ... }。
@augurar 我正在尝试找出一种仅验证属性的正确方法。
对，这个想法是用户只输入属性，然后你的代码用选择器包装它，以便 CSSLint 可以检查它。

标签： javascript css node.js reactjs

【解决方案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 cmets。

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

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);
            }
        });
    },
});

【讨论】：