#スタイルシート

annealer は CSS プロパティの順序を自前で定義せず、malva の declarationOrder の順序を使います。プロファイルの stylesheet セクションでこれを制御します。

変わるのは順序だけです。 宣言は書かれたとおりのまま移動します。空白・インデント・引用符・色の大文字小文字・数値・コメント・空行には手を加えません。整形は Prettier や Oxfmt などのフォーマッターの役割です。malva 自体はフォーマッターですが、annealer はプロパティ名の並び順を求めるためだけに使い、malva の出力は使いません。

対象:

• HTML と Vue の <style> ブロック（<style lang="scss">、lang="less"、lang="sass" を含む）
• 単体の .css、.scss、.sass（インデント構文）、.less ファイル

プロファイルに stylesheet セクションがなければ、スタイルシートには手を加えません。

#宣言順

どちらの組み込みプロファイルも次の設定です。

stylesheet:
  declarationOrder: smacss
  vendorPrefix: start

• declarationOrder: smacss（重要でレイアウトの流れに影響するプロパティが先）、concentric（ボックスモデルの外側から内側へ）、alphabetical のいずれか
• declarationOrderGroupBy: 宣言を、個別にソートする区間にどう分けるか。non-declaration-and-empty-line（既定。空行でも区間を区切る）または non-declaration（空行をまたいでソートし、空行はその位置に残る）

宣言は、他の文（ネストしたルール、@include、Less のミックスイン呼び出しなど）やコメントをまたいで移動しません。そのため、コメントとそれが見出しになっている宣言のまとまりは崩れません。無効化ディレクティブの対象になっている宣言や、ネストしたブロックを持つ宣言（Sass のネストしたプロパティ）もその位置に留まり、区間を区切ります。

/* 入力 */
body {
  color: #222;
  margin: 0;
  font-family: system-ui, sans-serif;
  display: flex;
}

/* 出力（smacss） */
body {
  display: flex;
  margin: 0;
  color: #222;
  font-family: system-ui, sans-serif;
}

#ベンダープレフィックス: vendorPrefix: start

ベンダープレフィックス付きの宣言（-webkit-…、-moz-…）は、標準プロパティとは別のものとして扱います。これらは方言であり、標準化されなかったものも多くあります。start を指定すると、同じ区間の他の宣言より前に、プロパティごとのグループ化をせず単純なアルファベット順で置きます。

end ではなく start にした理由: プレフィックス付きのプロパティは標準プロパティの別名であることが多く、後に書いた宣言が勝ちます。プレフィックス付きを最後に置くと、方言が標準の値を上書きしてしまうおそれがあります（例: 値を 2 つ取る -webkit-border-radius）。start なら Autoprefixer の出力と同じく、標準プロパティが最後になります。

malva にはこのオプションがありません（プレフィックスを除いた名前でソートします）。そのため annealer が同じ区間の中でプレフィックス付きの宣言を移動します。このオプションは declarationOrder を設定したときだけ有効です。alongside（未指定時の既定）は malva の順序のままです。

#静的な style 属性（オプトイン）

stylesheet.styleAttribute: true にすると、静的な style 属性内の宣言も並べ替えます。どちらの組み込みプロファイルでも無効です。

• 宣言は書かれたとおりのまま移動します。空白や末尾の ; の有無は変わりません。
• バインドされた :style には一切手を加えません。
• 引用符がない値、テンプレート構文・{}・<・& を含む値、通常の宣言として解析できない値は、書かれたとおりに残します。