javascript - 匹配 CSS 类选择器而不匹配 .io、.w3 等

Question

我的脚本匹配这样一个字符串中的 CSS 选择器:

let selectors = index.toString().match(/\.-?[_a-zA-Z]+[\w-]*(?=[^{}]*\{)/g);

这将在这样的声明中匹配像 u-background-color-navajo-white 这样的 css 选择器:

.u-background-color-navajo-white {
    background-color: NavajoWhite !important;
    background-color: var(--color-navajo-white) !important;
  }

然而，该表达式也匹配包含在 CSS 文件注释中的顶级域，例如 .com、.io、.org、 等。

有人知道如何调整正则表达式以排除这些吗？

存储库测试

git clone https://github.com/superflycss/utilities-layout
npm i
sfc build
node duplicates.1.js

将记录:

    ole@mki:~/SuperflyCSS/utilities-layout$ node duplicates.1.js 
    [ '.com',
    '.com',
    '.io',
    '.io',
    '.io',
    '.md',
    '.org',
    '.org',
    '.org',
    '.w3',
    '.w3',
    '.w3' ]

CLI 支持

现在已经解决了。我会将脚本构建到 @superflycss/cli 中在不久的将来，以防有人需要 postcss 构建器/重复检查器。

Answer 1

我已将您的正则表达式更改为:

/(?:^|[, ])\.-?[_a-zA-Z]+[\w-]*(?=[^{}]*\{)/gm

它所做的只是在开始时添加一个测试:

匹配项前面的“行首” 或字符之一:逗号 或 空格。

这应该只包括 CSS 类。