昨年くらいからNext.jsの影響もあり、CSS Modulesの人気がまた高まってるように感じますね。State of CSSのCSS-in-JSランキングでも満足度、興味、利用率、認知度などどれをとっても1~2位に入ってました。 CSS Moduels自体はReactのJSXなどと同様、JSを拡張し利用できる技術です。しかし、このアプローチを有用と思った人たちが「JSやブラウザの仕様としてCSSをimportできたらいいのにね」と思いChromeに実装されつつあるのが「CSS Module Scripts」です。 仕様になったならいい話じゃん！で終わればいいんですが、なんとこの「CSS Module Scripts」、「CSS Modules」と仕様が違うんですね。現状まだwebpackでは「CSS Module Scripts」は未サポートですが、今後サポートするつもりっぽいのでこの
CSS Module Scripts の夢を見る・script 要素の書き方による動作の違いまとめ CSS Module Scripts という仕様が出来て、JS (ESModules) から CSS ファイルを import して適用できるようになったらしい。 Webpack によるビルドを前提にした React プロジェクトなんかだと、以前から「CSS Modules」という形で JS から CSS を import して適用する書き方があったが、CSS Module Scripts というのはそれとは別物。ビルドの必要はなく、ブラウザのみで動作するネイティブな仕様だ。 コードとしてはこんな感じで書く。 <script type="module"> import styles from './styles.css' assert { type: 'css' }; document.ad
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
