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

カスタム構文の記述

カスタム構文は、コミュニティが他のスタイル言語(例: SCSS)やコンテナ(例: HTML)をサポートするために記述したPostCSS構文で、customSyntaxオプションを使用して使用します。

記述するには、PostCSSのカスタム構文の記述方法ガイドをよくお読みください。参照用にAwesome Stylelintから既存のカスタム構文の1つを使用できます。

import postcss from "postcss";

function parse(css, opts) {
const root = postcss.root();
// adding other nodes to root...
return root;
}

function stringify(node, builder) {
// just use the default stringifier
postcss.stringify(node, builder);

// or write custom stringifier...
}

export default { parse, stringify };

カスタム構文を公開した後は、次のような内容の共有構成を作成することをお勧めします。

  • 標準構成を拡張
  • カスタム構文をバンドル
  • 互換性のない組み込みルールを無効化

サポートされるファイル拡張子のoverrides内にあるすべてのもの

たとえば、「foo」という言語(ファイル拡張子が.foo)のカスタム構文を作成する場合は、次の内容を含んだ「stylelint-config-standard-foo」という名前の共有構成を作成することをお勧めします。

import yourCustomSyntax from "postcss-your-custom-syntax";

export default {
overrides: [
{
files: ["*.foo", "**/*.foo"],
customSyntax: yourCustomSyntax,
extends: ["stylelint-config-standard"],
rules: {
"at-rule-no-unknown": null
// ..
}
}
]
};

PostCSS v7が流通しなくなるまでカスタム構文を必須にすることをお勧めします。