🧰 ユーティリティ上級

スタイルタグのインデント調整

Liquid テンプレート内の `<style>` タグのインデント（字下げ）を正規化するコード例。Prettier プラグインのテストケースであり、複数の `<style>` ブロックを統一フォーマットで整形する。

用途

theme.liquid や section ファイルに直書きした CSS が不規則なインデントで混在しているとき、コードフォーマッタで一括整形する際の基準仕様を確認する。

設置場所

このコードそのものは Prettier プラグインのテストファイルなので、実テーマに貼り付けるのではなく、ビルドツールやコードフォーマッタの動作検証時に参照する。theme.liquid や section の `<style>` タグをフォーマットしたいときは、プロジェクトの Prettier 設定を確認する。

注意点

このコード例は Prettier 実装のテスト目的であり、`Should reindent base case` や `should be idempotent` というコメントは実行対象ではなく、フォーマッタの期待値を示すドキュメント。実際のテーマで CSS をインデントする際、Liquid 変数（`{{ settings.backgroundColor }}`）を含む場合、フォーマッタが変数を認識できず CSS として扱われない可能性があるため、必要に応じて CSS-in-JS ライブラリの使用も検討する。

タグ:prettierformattingstyle-tagindentationbuild-tool

コード

37 行 / liquid

Should reindent base case
<div>
<style>
:root {
  --bg-color: {{ settings.backgroundColor }};
}

.container {
  width: 100%;
  padding-top: 100%;
}

.image {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
</style>
<style id="my-style">
  .container {
    width: 100%;
    padding-top: 100%;
  }

  .image {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
</style>
</div>

should be idempotent (and not reindent multiple times)
<style>section.foo { display:none; }</style>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-style-tag/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

スタイルタグのインデント調整

コード

出典・ライセンス

関連項目

コメント後の空白フォーマット

Liquidコメントのフォーマット

セクション呼び出しの改行制御

Prettier フォーマッタの HTML リスト整形テスト

Vue.js属性のLiquid整形

sections タグのフォーマット