Zenn
🤖

stylelintユーザガイドーPostCSSプラグイン

に公開
CSS
Sass
Scss
tech

内容の目的

本内容は、StylelintユーザガイドーPostCSSプラグイン を翻訳し、個人活用のために整理しています。

PostCSS プラグイン

他の PostCSS プラグイン と同様に、Stylelint の PostCSS プラグインは PostCSS ランナー や PostCSS の JS API から直接利用できます。

ただし、より良いレポート機能があるため、CLI や Node.js API（直接または統合を通じて）の利用を推奨します。

オプション

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

使用例

CSS に変換処理を加える前に、まずリントすることを推奨します。これには次のいずれかの方法を利用できます。

また、レポーターも利用する必要があります。Stylelint プラグインは PostCSS を通して警告を登録します。そのため、警告を表示する PostCSS ランナーや、警告の整形と出力を目的とした別の PostCSS プラグイン（例: postcss-reporter）と一緒に使うのが望ましいです。

例 A

postcss-less を使い、PostCSS JS API 経由で Less をリントする独立したリントタスクの例です。

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

// 処理対象のコード
const code = fs.readFileSync("input.less", "utf8");

postcss([
  require("stylelint")({
    /* オプションをここに記述 */
  }),
  require("postcss-reporter")({ clearReportedMessages: true })
])
  .process(code, {
    from: "input.less",
    syntax: less
  })
  .then(() => {})
  .catch((err) => console.error(err.stack));

同じパターンで Less、SCSS、または SugarSS 構文もリントできます。

例 B

postcss-import の plugins オプションを利用し、変換前にソースファイルをリントする、リントとビルドを兼ねたタスクの例です（PostCSS JS API 経由）。

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

// 処理対象の CSS
const css = fs.readFileSync("lib/app.css", "utf8");

postcss([
  require("postcss-import")({
    plugins: [
      require("stylelint")({
        /* オプションをここに記述 */
      })
    ]
  }),
  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));

目次に戻る

Discussion