如何从 CSS 选择器中提取 class 名称？

Question

故事：

我目前正在构建一个 ESLint 规则，以警告在 CSS 选择器定位器中使用 bootstrap 布局导向和 angular 技术 classes。目前我在字符串方法中使用一个简单的子字符串：

for (var i = 0; i < prohibitedClasses.length; i++) {
  if (node.arguments[0].value.indexOf(prohibitedClasses[i]) >= 0) {
    context.report({
      node: node,
      message: 'Unexpected Bootstrap class "' + prohibitedClasses[i] + '" inside a CSS selector'
    })
  }

但还没有被证明是可靠的。例如，它在 .col-sm-offset-11 CSS 选择器上抛出 2 次错误，报告同时使用 col-sm-offset-1 和 col-sm-offset-11。我可以想象它可以很容易地破坏使用多个伪 classes 的更复杂的选择器。

问题：

从 CSS 选择器中提取 class 名称的最可靠 方法是什么？

这是我们应该涵盖的示例测试列表（有待改进）：

.col-sm-push-4                 // -> ['col-sm-push-4']
.myclass.col-lg-pull-8         // -> ['myclass', 'col-lg-pull-8']
[class*='col-md-offset-4']     // -> []
[class$=col-md-offset-11]      // -> []
[class~="col-md-10"] .myclass  // -> ['col-md-10', 'myclass']
.col-md-10,.col-md-11          // -> ['col-md-10', 'col-md-11']

请注意，我们需要跳过 ^=、$= 和 *= 部分 class 过滤器值，留下 ~=（感谢评论） .

Answer 1

有一个专门为问题设计的包node-css-selector-parser，它缺少“如何使用它”部分来提取class 名称。填补空白，以下是我如何将其应用于问题。

使用 node-css-selector-parser，我们可以解析 CSS 选择器，并根据结果类型分析 class 带点的名称（例如 .myclass）和 class 属性选择器中使用的名称（例如 [class*=test]）：

// setup up CSS selector parser
var CssSelectorParser = require('css-selector-parser').CssSelectorParser
var parser = new CssSelectorParser()

parser.registerSelectorPseudos('has', 'contains')
parser.registerNestingOperators('>', '+', '~')
parser.registerAttrEqualityMods('^', '$', '*', '~')
parser.enableSubstitutes()

function extractClassNames (rule) {
  var classNames = []
  // extract class names defined with ".", e.g. .myclass
  if (rule.classNames) {
    classNames.push.apply(classNames, rule.classNames)
  }

  // extract class names defined in attributes, e.g. [class*=myclass]
  if (rule.attrs) {
    rule.attrs.forEach(function (attr) {
      if (attr.name === 'class') {
        classNames.push(attr.value)
      }
    })
  }

  return classNames
}

module.exports = function (cssSelector) {
  try {
    var result = parser.parse(cssSelector)
  } catch (err) {
    // ignore parsing errors - we don't want it to fail miserably on a target machine during a ESLint run
    console.log('Parsing CSS selector: "' + cssSelector + '". ' + err)
    return []
  }

  // handling empty inputs
  if (!result) {
    return []
  }

  var classNames = []

  if (result.type === 'ruleSet') {
    var rule = result.rule
    while (rule) {
      classNames.push.apply(classNames, extractClassNames(rule))
      rule = rule.rule
    }
  } else if (result.type === 'selectors' && result.selectors) {
    result.selectors.forEach(function (selector) {
      var srule = selector.rule
      while (srule) {
        classNames.push.apply(classNames, extractClassNames(srule))
        srule = srule.rule;
      }
    })
  }
  return classNames
}

（使用standard 代码风格——因此，例如，行尾没有 ;）

事实证明这对我有用，希望能帮助其他遇到类似问题的人。请注意，在此状态下，此代码还将提取传递给 ^=、$= 和 *= 的部分 class 值，理想情况下需要跳过这些值。

如何从 CSS 选择器中提取 class 名称？

How to extract class names from a CSS selector?

javascript

css

parsing

css-selectors

eslint