🧰 ユーティリティ上級

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

Liquid テンプレート内の `<style>` タグと CSS ルールセットのインデント（字下げ）を自動整形する。Prettier Liquid プラグインのテストケース。

用途

テーマファイルの可読性を高めるため、開発時に CSS スタイルブロックの行頭スペースを一貫した形に統一したいとき。

設置場所

このコードは Prettier Liquid プラグインのテストデータであり、直接ストアテーマには貼り付けない。代わりに、自身のテーマの `<style>` タグを Prettier で自動整形したい場合は、.prettierrc で liquid プラグインを有効化する。

注意点

このスニペットはテストケース集なので、実装コードではなく期待される出力形式を示すもの。Prettier Liquid プラグインを使う場合は、Node.js 環境と npm パッケージのインストールが前提になる。CSS-in-Liquid での `{{ settings.backgroundColor }}` のような変数展開は整形後も保持される。

タグ:prettierliquid-formattingstyle-tagcssindentation

コード

41 行 / 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/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

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

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット