Astroは非常に優れたフレームワークであり、特にコンポーネント内にカプセル化されたスコープドCSS（`<style>`タグ）の書き心地は、VueやSvelteに慣れた開発者にとって非常に魅力的です。HTMLを汚さないクリーンなマークアップを好む層にとっては強力な武器になります。

しかし、このAstroのスコープドCSSには、開発体験（DX）を大きく損なう**「開発環境でもCSSがワンライナー化され、ソースマップが機能しない（全て1行目を指す）」**という致命的な仕様（罠）が存在します。本記事では、この問題の事象と原因、そして現状考えうる回避策についてまとめます。
※なお、Tailwind CSSなどのユーティリティクラスを使用している場合、この問題の影響は受けません。

問題の事象

Astroの開発サーバー（astro dev）を立ち上げ、ブラウザの開発者ツールで要素を検証すると、適用されているスタイルのソースマップが常にファイルの「1行目」を指してしまいます。 開発中にスタイルの微調整を行おうとしても、元の .astro ファイルの何行目に記述されたスタイルなのかをブラウザ上から追跡することができず、デバッグ効率が著しく低下します。

陥りがちな罠：Viteの設定は効かない

Astroは内部のバンドラーとして Vite を採用しています。そのため、「開発環境のminify設定がおかしいのでは？」「Viteのソースマップ設定を有効にすれば直るはず」と考え、astro.config.mjs に以下のような設定を追加しがちです。

// 効果のない設定例
export default defineConfig({
  vite: {
    css: {
      devSourcemap: true,
    },
    build: {
      cssMinify: false,
      minify: false,
    }
  }
});

結論から言うと、これらの設定は .astro ファイル内の <style> には一切効きません。

なぜ1行になってしまうのか？（根本原因）

原因は、CSSの処理管轄にあります。 .astro ファイル内の <style> は、Viteではなく**「Astroの内部コンパイラ」**が直接処理を行っています。Astroコンパイラは以下の手順でCSSを処理します。

.astro ファイルから <style> の中身を抽出する。
スコープを担保するための固有属性（例：data-astro-cid-xxxxxx）をセレクタに付与する。
改行やインデントなどの空白文字を削除し、文字列として再出力する。 この第3ステップの仕様により、Astroコンパイラを経由したCSSは、開発モード・本番ビルドを問わず、強制的にワンライナーの文字列に変換されてしまいます。そのため、ブラウザに配信される時点ですでにCSSは1行になっており、ソースマップも「1行目」を指すことしかできなくなります。現状、このAstroコンパイラの挙動をオプション設定等で変更する（minifyをオフにする）方法は用意されていません。

現状の回避策

Astro自体のコンパイラ仕様が変わらない限り、根本的な解決は不可能です。現状は以下のいずれかで妥協する必要があります。

1. ブラウザ開発者ツールの「Pretty Print」機能で耐える

ブラウザの開発者ツール（Sourcesタブなど）で該当の1行CSSを開いた際、左下にある { }（Pretty print / 整形）ボタンをクリックします。
自動で改行とインデントが補完され、人間が読める形式に展開されます。ソースコードの行番号と完全に一致するわけではありませんが、何が書かれているかの確認は容易になります。

2. CSS Modules として外部ファイルに切り離す

どうしても正確なソースマップ機能が必要な場合、.astro ファイル内の <style> タグの使用を諦め、スタイルを外部の CSS Modules に分離します。

---
// Component.astro
import styles from './Component.module.css';
---
<div class={styles.wrapper}>
  </div>

外部の .css ファイルに切り出すことで、そのファイルの処理は Astro内部コンパイラから Vite に移譲されます。これにより、vite.css.devSourcemap: true の設定が正常に機能し、開発者ツール上でも元の行番号が正しくマッピングされるようになります。

おわりに

「HTMLクラスを汚したくない」という理由でAstroの標準機能（スコープドCSS）を選択した開発者にとって、この仕様は思わぬ落とし穴となります。手軽に書けるSFCのメリットを活かすか、デバッグのしやすさ（CSS Modulesへの分離）をとるか、現状はプロジェクトごとにトレードオフの選択を迫られる状態です。今後のAstroのアップデートで、開発環境向けにコンパイラのminify挙動を制御できるようになることを期待したいところです。