PostCSS 插件

与任何其他 PostCSS 插件 一样，您可以使用 Stylelint 的 PostCSS 插件与 PostCSS 运行器 或直接使用 PostCSS JS API。

但是，我们建议使用 CLI 或 Node.js API（直接或通过集成），因为它们提供更好的报告。

选项

PostCSS 插件使用 标准选项，除了 customSyntax 选项。相反，语法必须在 PostCSS 选项 中设置，因为管道中只能有一个解析器/语法。

使用示例

我们建议您在应用任何转换之前先对 CSS 进行 lint。您可以通过以下两种方式实现：

• 创建一个独立于构建任务的单独 lint 任务。
• 使用 plugins 选项 的 postcss-import 或 postcss-easy-import 在任何转换之前对文件进行 lint。
• 将 Stylelint 放置在插件管道的开头。

您还需要使用一个报告器。Stylelint 插件通过 PostCSS 注册警告。因此，您需要将其与打印警告的 PostCSS 运行器或用于格式化和打印警告的另一个 PostCSS 插件（例如 postcss-reporter）一起使用。

示例 A

一个使用 PostCSS JS API 通过插件对 Less 进行 lint 的独立 lint 任务，使用 postcss-less。

const fs = require("fs");
const less = require("postcss-less");
const postcss = require("postcss");

// Code to be processed
const code = fs.readFileSync("input.less", "utf8");

postcss([
  require("stylelint")({
    /* your options */
  }),
  require("postcss-reporter")({ clearReportedMessages: true })
])
  .process(code, {
    from: "input.less",
    syntax: less
  })
  .then(() => {})
  .catch((err) => console.error(err.stack));

相同的模式可用于对 Less、SCSS 或 SugarSS 语法进行 lint。

示例 B

一个组合的 lint 和构建任务，其中插件通过 PostCSS JS API 使用，但在 postcss-import 中（使用其 plugins 选项），以便在任何转换之前对源文件进行 lint。

const fs = require("fs");
const postcss = require("postcss");
const stylelint = require("stylelint");

// CSS to be processed
const css = fs.readFileSync("lib/app.css", "utf8");

postcss([
  require("postcss-import")({
    plugins: [
      require("stylelint")({
        /* your options */
      })
    ]
  }),
  require("postcss-preset-env"),
  require("postcss-reporter")({ clearReportedMessages: true })
])
  .process(css, {
    from: "lib/app.css",
    to: "app.css"
  })
  .then((result) => {
    fs.writeFileSync("app.css", result.css);

    if (result.map) {
      fs.writeFileSync("app.css.map", result.map);
    }
  })
  .catch((err) => console.error(err.stack));