Question

我想将CSS放入Pug style.标签原始内容（CSS）和style属性内容（CSS）。

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

Stylelint可以在html文件中填充CSS字符串和代码块，按预期方式工作。

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

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

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

Stylelint皮棉html使用"processor"来确定HTML标签和属性中的CSS。我发现已弃用stylelint-processor-html并链接到stylelint-processor-arbitrary-tags模块。但是它对我来说不需要这个处理器就可以工作（请看上面的测试仓库）。看起来是内置HTML处理器。

我找不到Stylelint的Pug处理器。试图找到一个on NPM（12个结果），on Yarn registry（15个结果）和on GitHub（14个存储库）。

也许我错过了什么？我应该编写stylelint-processor-pug还是深入研究stylelint-processor-arbitrary-tags RegExp的内容？

Answer 1

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

是的。它支持现成的CSS文件的起毛和固定以及带有HTML文件的<style>块。它也可以扩展为在哈巴狗模板中支持style.块和style=""属性。

我应该写stylelint-processor-pug吗？

您可以编写stylelint-processor-pug，这将使您可以在帕格模板中添加样式，但不能修复。但是，推荐的方法是编写一个PostCSS syntax，例如postcss-pug。

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

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

{
  "scripts": {
    "lint-styles": "stylelint '**/*.{css,html}'",
    "lint-pug-styles": "stylelint '**/*.pug' --custom-syntax postcss-pug"
  }
}

将样式插入Pug文件

1 个答案: