0

我想将 CSS 整理到 Pugstyle.标签原始内容 (CSS) 和style属性内容 (CSS) 中。

看起来 Stylelint 是执行此操作的正确工具。

Stylelint 可以 linthtml文件中的 CSS 字符串和代码块，按预期工作。

但是，如果我尝试对 执行相同的操作，则会pug出现Unknown word CssSyntaxError错误。

我创建了一个用于测试的存储库，并将测试输出作为注释添加到 NPM 脚本：

https://github.com/Grawl/stylelint-pug-test/commit/f4749090ab89be5da5e762a69948e072343accdf

Stylelint lintshtml使用“处理器”来确定 HTML 标签和属性中的 CSS。我发现不推荐stylelint-processor-html使用指向stylelint-processor-arbitrary-tags模块的链接。但它对我来说在没有这个处理器的情况下也能工作（查看上面的测试仓库）。看起来 HTML 处理器是内置的。

我找不到 Stylelint 的 Pug 处理器。试图在 NPM（12 个结果）、Yarn 注册表（15 个结果）和GitHub（14 个存储库）上找到一个。

也许我错过了什么？我应该写stylelint-processor-pug还是深入stylelint-processor-arbitrary-tags研究正则表达式？

4

1 回答 1

1

看起来 Stylelint 是执行此操作的正确工具。

是的。它支持开箱即用的 HTML 文件的 linting和修复CSS 文件和块。<style>它还可以扩展为支持pug 模板中的style.块和属性。style=""

我应该写stylelint-processor-pug吗？

您可以编写 a stylelint-processor-pug，这将允许您在 pug 模板中对样式进行 lint，但不能修复。但是，推荐的方法是编写PostCSS 语法，例如postcss-pug.

然后，您可以使用所有基于 PostCSS 的工具（包括 stylelint）来转换和分析 pug 模板中的样式。我建议您同时查看两者postcss-html并postcss-markdown寻找灵感，因为它们解决了各自语法的类似问题。

编写自定义语法后，您需要在单独的 stylelint 任务中使用它，如下所示：

{
  "scripts": {
    "lint-styles": "stylelint '**/*.{css,html}'",
    "lint-pug-styles": "stylelint '**/*.pug' --custom-syntax postcss-pug"
  }
}
于 2018-11-14T11:31:33.730 回答