841-biborokuWebフロントエンドの備忘録

AstroとPostCSSで実現するカスタムメディアクエリを使った効率的なCSS管理

なぜPostCSSを選んだのか

これまでSCSSを使用してスタイルを管理していましたが、より新しいCSS機能を活用したいと考え、PostCSSを選択することにしました。

Sass(SCSS)の@mixinを使い慣れていたこともあり、PostCSSへ移行したときにメディアクエリはVSCodeにスニペットを登録して対応していました。

スニペットで簡単に呼び出すことはできても可読性があまりよくないため、Sass(SCSS)のように可読性を保ち、変更に柔軟に対応できるcustom-media機能を使えるようにするために、PostCSSの導入を最終的に決定しました。

AstroでPostCSSを使えるようにする

3つのパッケージを使います。

@csstools/postcss-global-data
グローバルデータとしてCSSファイルをインポートするためのプラグイン。指定したファイルをCSS全体で利用可能にする。

postcss-custom-media
カスタムメディアクエリをサポートするプラグイン。ユーザー定義のメディアクエリを定義し、使いやすくする。

postcss-preset-env
将来のCSS仕様を現在のブラウザ向けに変換するプリセット。CSSの最新機能を利用可能にし、ブラウザ互換性を確保する。

npm i @csstools/postcss-global-data postcss-custom-media postcss-preset-env

postcss.config.cjsの設定

postcss.config.cjsを作成してカスタムメディアをまとめたcssファイルの読み込みなどパッケージの設定をします。

postcss.config.cjs

module.exports = {
  plugins: [
    require('@csstools/postcss-global-data')({
      files: ['./src/styles/media.css'],  // @custom-mediaをまとめたファイル
    }),
    require('postcss-custom-media'),
    require('postcss-preset-env')
  ],
};

カスタムメディアの設定

今回はBootstrapのブレイクポイントに合わせて設定ファイルを作ってみました。

src/styles/media.css

@custom-media --sm (width >= 576px);
@custom-media --md (width >= 768px);
@custom-media --lg (width >= 992px);
@custom-media --xl (width >= 1200px);
@custom-media --xxl (width >= 1400px);

@custom-media --sm-only (768px > width >= 576px);
@custom-media --md-only (992px > width >= 768px);
@custom-media --lg-only (1200px > width >= 992px);
@custom-media --xl-only (1400px > width >= 1200px);

設定はこれで終わりです。

設定したカスタムメディアを使ってみる

使い方は簡単です。

@media (--sm){
  p{
    font-size: 1rem;
  }
}

出力されたcssを確認してみる

ビルドされたcssファイルを確認してみる@media (--sm)@media (min-width: 576px)に変換されてます。

@media (--sm){}
 ↓
@media (min-width: 576px){}

@media (--md){}
 ↓
@media (min-width: 768px){}

@media (--lg){}
 ↓
@media (min-width: 992px){}

@media (--xl){}
 ↓
@media (min-width: 1200px){}

@media (--xxl){}
 ↓
@media (min-width: 1400px){}

@media (--sm-only){}
 ↓
@media (min-width: 576px) and (max-width: 767.98px){}

@media (--md-only){}
 ↓
@media (min-width: 768px) and (max-width: 991.98px){}

@media (--lg-only){}
 ↓
@media (min-width: 992px) and (max-width: 1199.98px){}

@media (--xl-only){}
 ↓
@media (min-width: 1200px) and (max-width: 1399.98px){}

まとめ

Sass(SCSS)でもいいのでは?ともなりますが、将来のCSSが使えるのはメリットが大きいかなと感じています。

Sass(SCSS)からの移行も最初は慣れなかったり、設定が大変かもしれませんが、プラグインを使えば大抵のことはできるし、それほど不便ではありません。(慣れ..?)

💭余談

パッケージをインストールしなくても使える?と思ったけど、そういうわけではなかった。エラー出ました。

Astro detected an unhandled rejection. Here's the stack trace:
Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/xxx): [Error] Cannot find module 'postcss-preset-env'Require stack:
- C:\xxx\postcss.config.cjs
Error: Cannot find module 'postcss-preset-env'

Astroには、Viteの一部としてPostCSSが同梱されています。プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成します。プラグインはrequire()を使ってインポートできます。

Astroドキュメント PostCSS
https://docs.astro.build/ja/guides/styling/#postcss

シェア