🧰 ユーティリティ上級

style タグ内の CSS フォーマット

Liquid テンプレート内の <style> タグの CSS を Prettier で自動整形する設定。CSS が解析できない場合は再インデント処理にフォールバックし、タブ・スペース設定に対応する。

用途

theme.liquid やセクション内に埋め込んだ CSS ブロックを開発時に自動整形して可読性を高める。Liquid 変数が CSS 内に混在する場合の整形ロジックとして参考になる。

設置場所

このコードは Prettier プラグイン設定のテストケース。実装環境では .prettierrc や prettier.config.js に printWidth / useTabs オプションを追加し、theme.liquid の <style> ブロック全体に適用させる。

注意点

Liquid 変数が CSS セレクタや値に含まれる場合（例：calc() 内の {{ settings.color }}）、CSS パーサが構文エラーになることがある。その場合は Prettier は CSS 整形をスキップしインデント調整のみ行う。print-width が 20 文字など極端に短い場合、CSS が複数行に分割されるため、実運用では 80〜120 の適正値を指定する。

タグ:prettiercssformattingliquid-embedstyle-tag

コード

43 行 / liquid

It should pretty print CSS inside style tags
printWidth: 20
<style>
  .class,
  #id,
  html,
  body {
    background-color: green;
    width: 100%;
  }
  .container {
    display: flex;
  }
</style>

It should fallback to reindenting when it doesn't parse
printWidth: 20
<style>
  .class,#id,html,body{background-color:{{setting.color}};width:100%}
  .container{display:flex;}
</style>

it should reindent when it doesn't parse, and swap minIndent with tabs with useTabs
printWidth: 20
useTabs: true
<style>
	.class,#id,html,body{
	  background-color:{{setting.color}};
	  width:100%;
	}
	.container{display:flex;}
</style>

It should fallback to reindenting when it contains liquid in calc. (somehow this parses!)
<style>
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
</style>

出典・ライセンス

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

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

style タグ内の CSS フォーマット

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット