css-modules-kit は CSS Modules のためのツールセットです。何ができるのか、どんな設計で作られているのかは以下の記事を見てください。 www.mizdra.net www.mizdra.net この記事では css-modules-kit の内部設計について紹介してみます。今回は CSS Modul…

CSS Modules は、CSS をローカルスコープ化する仕組み。*.module.css に CSS を記述すると、bundler がクラスセレクターなどをユニークなものへと変換してくれる。クラスセレクターなどが *.module.css ファイルごとに異なる名前に変換され、擬似的にローカ…

「TypeScript Language Service Plugin で CSS Modules の開発体験を改善する」というタイトルで発表しました。 speakerdeck.com CSS Modules には、Find All References などの言語機能が動かないといった問題があります。本発表では、その問題を解決するた…

その名も CSS Modules Kit です。去年の11月からずっと作ってました。 github.com www.youtube.com 何故作ったか 実は以前にも happy-css-modules という CSS Modules のための補助ツールを作っていました。これを使うと、.module.css から import したオブ…

React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクト…

弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必…

CSS Values and Units Module Level 4 という提案にて、 svh という新たな CSS Unit の導入が検討されています。簡単に言うと、ブラウザのナビゲーションバーやオムニボックスの高さを除外した vh です。 There are some changes being proposed regarding v…

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな …