postcss-stylelint-processed

PostCSS プラグインの処理が全て完了した後の CSS に対して stylelint を実行するプラグインです。

通常 stylelint は変換前のソース CSS を検査しますが、このプラグインを使うことで 変換後の最終出力 CSS に対して lint を実行できます。

インストール

npm install postcss-stylelint-processed postcss stylelint --save-dev

使い方

// postcss.config.js
import postcssStylelintProcessed from "postcss-stylelint-processed";
import stylelint from 'stylelint'

const stylelintConfig = {
    // ...stylelintルール
}

export default {
  map: false,
  plugins: [
    // ...他のプラグイン

    // 最後に配置する
    postcssStylelintProcessed({
      fix: true,
      stylelint: stylelint,
      config: stylelintConfig
    })
  ]
}

オプション

stylelint（必須）

stylelint インスタンスを渡します。ESM のモジュール解決問題を回避するため、呼び出し元で import した stylelint を渡す必要があります。

import stylelint from 'stylelint'

postcssStylelintProcessed({
  stylelint: stylelint,
  // ...
})

config

stylelint に渡す設定オブジェクト。stylelint.lint() の config オプションと同じ形式です。

fix

true にすると、自動修正可能なルール違反を修正した上で lint を実行します。

configBasedir

config 内の extends、plugins、customSyntax を解決するベースディレクトリ。デフォルトは process.cwd()。

indent

fix 後のセレクター改行インデントに使用する文字列。デフォルトは " "（スペース2つ）。

postcssStylelintProcessed({
  stylelint: stylelint,
  config: { /* ... */ },
  fix: true,
  indent: "  ",
});

仕組み

1. PostCSS のプラグインチェーンの最後（OnceExit）で実行されます
2. fix: true の場合、stylelint を PostCSS プラグインとして AST 上で直接実行し自動修正を適用
3. fix 後、カンマ改行後のスペースをノード深さに応じたインデントに統一
4. 最終 CSS に対して stylelint.lint() を実行し、出力ファイルと一致する正確な行番号で warning を報告

ライセンス

MIT