🧰 ユーティリティ上級

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

Liquid の stylesheet タグ内に記述された CSS をフォーマットするコード例。printWidth 設定に応じた整形と、Liquid 変数が含まれる場合のフォールバック動作を示す。

用途

Prettier Liquid プラグインの開発・テストで、stylesheet タグの CSS 整形ロジックが正しく機能しているか検証するとき。

設置場所

このコードは Prettier Liquid プラグインのテストスイート用であり、通常のテーマ開発では使用しない。テーマで CSS を stylesheet タグに埋め込む場合は、{% stylesheet %} ... {% endstylesheet %} ブロック内に CSS を記述する。

注意点

stylesheet タグは Liquid テンプレート内で使用できる独自タグで、標準的な HTML の <style> タグではない。Liquid 変数（{{setting.color}} など）が CSS 値に含まれるとき、Prettier は CSS パーサーが失敗するため、インデント調整のみで CSS の最適化は行わない。printWidth 設定値によってフォーマット結果が変わるため、テーマの Prettier 設定と合わせて確認する。

タグ:stylesheetcssprettierliquid-syntaxformatting

コード

14 行 / liquid

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

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

出典・ライセンス

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

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

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

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット