Skip to main content

PostCSS 插件

¥PostCSS plugin

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

¥As with any other PostCSS plugin, you can use Stylelint's PostCSS plugin either with a PostCSS runner or with the PostCSS JS API directly.

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

¥However, we recommend using the CLI or Node.js API (directly or via an integration) as they provide better reporting.

选项​

¥Options

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

¥The PostCSS plugin uses the standard options, except the customSyntax option. Instead, the syntax must be set within the PostCSS options as there can only be one parser/syntax in a pipeline.

使用示例​

¥Usage examples

我们建议你在应用任何转换之前检查 CSS。你可以通过以下任一方式执行此操作：

¥We recommend you lint your CSS before applying any transformations. You can do this by either:

  • 创建一个独立于你的构建任务的单独 lint 任务。

    ¥creating a separate lint task that is independent of your build one.

  • 在进行任何转换之前，使用 plugins 选项 或 postcss-import 或 postcss-easy-import 对文件进行 lint 检查。

    ¥using the plugins option of postcss-import or postcss-easy-import to lint your files before any transformations.

  • 将 Stylelint 放在插件管道的开头。

    ¥placing Stylelint at the beginning of your plugin pipeline.

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

¥You'll also need to use a reporter. The Stylelint plugin registers warnings via PostCSS. Therefore, you'll want to use it with a PostCSS runner that prints warnings or another PostCSS plugin whose purpose is to format and print warnings (e.g. postcss-reporter).

示例 A​

¥Example A

一个单独的 lint 任务，通过 PostCSS JS API 使用插件来使用 postcss-less 来 lint Less。

¥A separate lint task that uses the plugin via the PostCSS JS API to lint Less using 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 语法。

¥The same pattern can be used to lint Less, SCSS or SugarSS syntax.

示例 B​

¥Example B

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

¥A combined lint and build task where the plugin is used via the PostCSS JS API, but within postcss-import (using its plugins option) so that the source files are linted before any transformations.

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));