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.



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

/* 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");

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

if ( {
.catch((err) => console.error(err.stack));