css-loaderのsourceMapがスタイル適用の遅延を招く

DEPRECATED (2019.07.06)
古くからの「HTMLとスタイルは別ファイルに分割すべし」との考えに従ってスタイルはコンポーネント毎に専用のCSSを用意してcss-loaderで読み込ませていたが、Css in JSの方が有用と判断したため本記事は有用性を失っている。

---

概要

開発時に、CSSファイルで定義したスタイルがJavascript実行より遅れて適用されて意図しない動作をした。以下、原因を調査した際の覚書。

環境

Reactプロジェクトをcreate-react-appで作成後、yarn ejectを実行した。得られた環境は以下の通り。

• React: 16.5.2
• webpack: 4.19.1

ソースコード

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  componentDidMount() {
    const logo = document.querySelector('.App-logo');
    const logoStyle = window.getComputedStyle(logo);
    const logoHeight = logoStyle.getPropertyValue('height');
    console.log(logoHeight);
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

OKパターン

yarn startにて開発サーバーを立ち上げると、.App-logoのheightが計算され、コンソールに281.594pxと出力される。また、ChromeのDeveloper ToolsでElementsを見ると、スタイルはheadタグ内に<style>として記述されている。

NGパターン

webpackの設定にて、css-loaderでsourceMapが有効になっていると、スタイルが適用される前にスクリプトが実行されてしまい、期待と異なる結果になる。

config/webpack.config.dev.js

    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
-     options: cssOptions,
+     options: Object.assign(cssOptions, {
+       sourceMap: true,
+     }),
    },

yarn startにて開発サーバーを立ち上げると、.App-logoのheightが計算される時点でスタイルは適用されておらず、コンソールには0pxと出力される。また、ChromeのDeveloper ToolsでElementsを見ると、スタイルはheadタグ内に<link>として記述されている。外部ファイルを読み込む形になっており、スクリプト実行時には読み込みが完了してないため、期待と異なる結果になる。

参考

• https://github.com/webpack-contrib/css-loader/issues/613