カスタムPostCSSプラグイン
CSSノードをプログラムで変換する独自のPostCSSプラグインを作成します。
「カスタムPostCSSプラグイン」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
カスタムプラグインを書く理由
プロジェクト固有の CSS 変換、移行ヘルパー、カスタム lint ルールなど、既存の PostCSS プラグインでは要件を満たせない場合、カスタムプラグインを作成することで CSS AST に直接アクセスできます。
プラグインの構造
PostCSS プラグインは、Root ノード（解析済みの CSS）と、必要に応じて Result オブジェクトを受け取る関数です。postcss.plugin() ファクトリ、または最新の直接関数方式を使用します。
// my-plugin.js
const plugin = () => {
return {
postcssPlugin: 'my-plugin',
Declaration(decl) {
// Called for every declaration node
},
Rule(rule) {
// Called for every rule node
}
};
};
plugin.postcss = true;
module.exports = plugin;宣言を走査する
すべての color 宣言を変換します。
const plugin = () => ({
postcssPlugin: 'rem-converter',
Declaration(decl) {
if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
const px = parseFloat(decl.value);
decl.value = `${px / 16}rem`;
}
}
});新しいルールを追加する
すべての .btn ルールの後に新しいルールを挿入します。
Rule(rule) {
if (rule.selector.includes('.btn')) {
const focusRule = rule.cloneAfter();
focusRule.selector = rule.selector + ':focus';
}
}宣言を削除する
すべての color: red 宣言を削除します（デバッグ／クリーンアッププラグイン）。
Declaration(decl) {
if (decl.prop === 'color' && decl.value === 'red') {
decl.remove();
}
}PostCSS ヘルパー
PostCSS はノードに対するヘルパーメソッドを提供します。
node.remove()：ノードを削除しますnode.replaceWith(newNode)：ノードを置き換えますnode.cloneBefore()／cloneAfter()：クローンを挿入しますpostcss.decl()／rule()／atRule()：新しいノードを作成します
非同期プラグイン
PostCSS プラグインは非同期にできます。ファイルの読み込みやネットワーク リクエストが必要な場合に便利です。
async Declaration(decl, helpers) {
if (decl.prop === 'icon') {
const svg = await readFile(`icons/${decl.value}.svg`);
decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
}
}PostCSS プラグインのテスト
postcss パッケージを直接使用してプラグインをテストします。
const postcss = require('postcss');
const plugin = require('./my-plugin');
test('converts px to rem', () => {
const input = 'p { font-size: 16px; }';
const result = postcss([plugin()]).process(input, { from: undefined });
expect(result.css).toBe('p { font-size: 1rem; }');
});プラグインのオプション
プラグインファクトリで引数を受け取ることで、設定オプションを受け入れられます。
const plugin = (opts = {}) => ({
postcssPlugin: 'configurable',
Declaration(decl) {
if (decl.prop === opts.property) {
decl.value = opts.replacement;
}
}
});PostCSS プラグインの公開
PostCSS プラグインには、postcss-plugin-name という命名規則があります。npm に公開し、PostCSS リポジトリに追加します。内部ツールの場合は、プロジェクト内のローカルファイルとして管理してください。
クイックチェック
スタイルシート内のすべての CSS プロパティと値の組に対して呼び出される PostCSS のビジターはどれですか？
まとめ
カスタム PostCSS プラグインでは、ビジターメソッドを使って CSS AST のノードを処理します。プロパティと値の組には Declaration(decl)、セレクターブロックには Rule(rule)、@ルールには AtRule() を使用します。remove()、replaceWith()、cloneAfter() などのノードメソッドで CSS ツリーを変更できます。プラグインは postcss パッケージを直接使ってテストします。
よくある質問
「カスタムPostCSSプラグイン」レッスンは無料ですか？
はい。「カスタムPostCSSプラグイン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「カスタムPostCSSプラグイン」で何を学びますか？
CSSノードをプログラムで変換する独自のPostCSSプラグインを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「カスタムPostCSSプラグイン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- PostCSSの役割と仕組み
- Autoprefixerとcssnano
- カスタムPostCSSプラグイン
- ViteとWebpackでのPostCSS