インラインの <style> 内から Source Map ファイルを使うテスト

1. 目的

インラインの <style> 内から Source Map ファイルを指定してみるテストをこのページで行う。

2. 本ページの構成

ファイル構成

index.php
  ├─ main.css (元のCSSファイル)
  ├─ main.min.css (main.css を圧縮したファイル、本ページに出力している)
  └─ main.min.css.map (main.min.css のソースマップファイル)

本ページ内に出力している <style> の部分

<style>
h1{color:blue}h2{color:green}h3{color:red}/*# sourceMappingURL=main.min.css.map */
</style>

3. 結果

ソースマップファイルへの行番号がおかしくなった。

Chrome DevTools

4. 結論

使えないっぽい?

ネットで検索しても、インラインからソースマップを指定して利用する例が見つからない。