Zenn
Open6

"CSS Module" をめぐる混乱

JxckJxck

"CSS Module" が指すもの

２つある

従来のコミュニティベースのもの

https://github.com/css-modules/css-modules

これのこと。そしてその実装。
現状フロントエンドエンジニアが指すものはだいたいこれ。

Web 標準になりつつあるもの

Import Assertions で実現しそうな Synthetic Module としての CSS Module
標準になりそうな所まで来ている。

この２つに関して話がごちゃごちゃになるんで整理する。

JxckJxck

コミュニティベースの CSS Module

コレ自体は概念的なもの。
その実装 として Webpack の CSS Loader などがある。

なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れるかやめるかみたいな文脈が多い。

State of CSS 2020 で出てくる CSS Module も、まだこっちを指してる。

JxckJxck

Synthetic Module の CSS Module

  • WebComponents の HTML Imports まで遡る
    • html をとってくるだけでほぼ fetch だし、そんなもの実装しないと主に mozilla あたりが反対
    • html imports は仕様から消えた
  • ES Modules
    • ES で import 構文で module ができた。
    • 同じ構文で HTML や CSS や JSON も import できるのでは
    • domenic が Synthetic Module (ES Module の仕組みを JS 以外にも拡張しよう) として提案
    • import json from "foo.json" とかできるようにしようとした
  • Security Issue
    • import json from "foo.json" だと構文からそれが JS なのか JSON なのか HTML なのか。。がわからない
    • ブラウザの場合は content-type あるけど他は？
    • Sniffing ?? まさか冗談だろ
    • ということでこれじゃダメだね、と頓挫
    • https://github.com/WICG/webcomponents/issues/839
  • Import Assertions
    • 明示的に module type を指定しよう
    • import json from *** "foo.json" *** の *** のあたりで as とか type とか何か指定したい
    • bikeshed 祭りののち assert に落ち着いた
    • import json from "./foo.json" assert { type: "json" };
    • これが Import Assertions
  • Synthetic Module again

で、できそうなのが Synthetic Module としての CSS Module
つまり、標準であり、かつ「Module として読み込む」こと以外なにもしない。

名前がかぶってるから変えようという Issue がある。

Change 'CSS Modules' name to avoid webdev confusion · Issue #843 · WICG/webcomponents

JxckJxck

webpack の css loader での CSS Module

ただしもう deprecate されそう。

In the near future we want to deprecate CSS modules, there are a lot of other solutions - BEM, CSS-in-JS, CSS-in-JS without runtime https://github.com/callstack/linaria, future CSS module (WICG/webcomponents#759), do not confuse with current CSS modules, Web Components and shadow DOM.
CSS modules is maintenance stage (only fixes), it is really old technology and very controversial. We will support them for a while so that all developers can migrate, but no new features, sorry. You can write an own loader based on the current module code.

ただ、これも webpack として公式に決定した感じではないっぽい? モチベーション高いメンテナが現れたりすると変わるんだろうか。 Next.js でも推してるし。