PostCSS 外掛程式

與任何其他 PostCSS 外掛程式 一樣，您可以使用 Stylelint 的 PostCSS 外掛程式搭配 PostCSS 執行器 或直接搭配 PostCSS JS API。

不過，我們建議使用 CLI 或 Node.js API（直接或透過整合），因為它們提供更好的回報。

選項

PostCSS 外掛程式使用 標準選項，除了 customSyntax 選項。反之，語法必須在 PostCSS 選項 內設定，因為在一個管線中只能有一個剖析器/語法。

使用範例

我們建議您在套用任何轉換之前先檢查您的 CSS。您可以透過以下方式執行此動作

• 建立一個獨立的檢查任務，且獨立於您的建置任務。
• 使用 plugins 選項 的 postcss-import 或 postcss-easy-import 在任何轉換之前檢查您的檔案。
• 將 Stylelint 放在外掛程式管線的開頭。

您還需要使用報告程式。Stylelint 外掛程式透過 PostCSS 註冊警告。因此，您需要搭配印出警告的 PostCSS 執行程式，或其他用於格式化和印出警告的 PostCSS 外掛程式 (例如 postcss-reporter) 使用。

範例 A

一個使用 PostCSS JS API 透過外掛程式進行 linting 的獨立 linting 工作，使用 postcss-less 對 Less 進行 linting。

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 語法進行 linting。

範例 B

一個結合 linting 和建置的工作，其中外掛程式透過 PostCSS JS API 使用，但位於 postcss-import (使用其 plugins 選項) 內，以便在進行任何轉換之前對原始檔案進行 linting。

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