メインコンテンツへスキップ

PostCSSプラグイン

他のPostCSSプラグインと同様に、StylelintのPostCSSプラグインはPostCSSランナーまたはPostCSS JS APIを直接使用して利用できます。

ただし、より優れたレポート機能が提供されるため、CLIまたはNode.js API（直接または統合を介して）を使用することをお勧めします。

オプション​

PostCSSプラグインは、標準オプションを使用します。ただし、customSyntaxオプションは除きます。代わりに、パイプラインにはパーサー/構文を1つしか設定できないため、構文はPostCSSオプション内で設定する必要があります。

使用例​

変換を適用する前にCSSをlintすることをお勧めします。これを行うには、次のいずれかの方法があります。

また、レポーターを使用する必要があります。StylelintプラグインはPostCSSを介して警告を登録します。したがって、警告を出力するPostCSSランナーや、警告のフォーマットと出力を行うことを目的とした別のPostCSSプラグイン（例：postcss-reporter）と組み合わせて使用する必要があります。

例A​

postcss-lessを使用してLessをlintするために、PostCSS JS APIを介してプラグインを使用する独立したlintタスク。

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​

postcss-import（そのpluginsオプションを使用）内でPostCSS JS APIを介してプラグインを使用する結合されたlintおよびビルドタスク。これにより、変換前にソースファイルが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));