2023-12-01のJS: Node.js v18.19.0(LTS)、BiomeとPrettier、CSS Hooks

[azu]

Node.js v18.19.0がリリースされました。

• Node v18.19.0 (LTS) | Node.js

npm 10へアップデート、node:moduleにregister APIの追加、import.meta.resolveのサポートが追加されています。
また、.jsのデフォルトの扱いをCJSからESMへと変更できる--experimental-default-typeフラグがバックポートされています。

---

Biome v1.4.0がリリースされました。

• Biome formatter wins the Prettier challenge | Biome
• Release CLI v1.4.0 · biomejs/biome

PrettierのJS/TS/JSXに関するテストケースを95%以上通すRust実装を募集するThe Prettier Challengeが行われていました。
Biome v1.4.0ではこのチャレンジを達成して、Pretttierのフォーマット結果と96%一致するようになっています。
意図的な差分などについては、次のIssueにまとめられています。

• ☂️ Prettier Divergence collection from the Prettier challenge · Issue #739 · biomejs/biome

その他には、フォーマットに関するオプション追加、--config-pathフラグの追加、Lintルールの追加などが行われています。

---

Prettier's CLI: A Performance Deep Dive · Prettierという記事では、PrettierのCLIのパフォーマンス改善について書かれています。

globのファイル探索の改善、INIファイルのパースの改善、キャッシュをデフォルト化、console.logの出力をバッファリングするように変更などの工夫についてCLIを改善した話が紹介されています。

---

CSS Hooksというライブラリでは、style属性でスタイリングができるCSS in JSですが、:hoverなどの擬似クラスなどをサポートをしています。

• css-hooks/css-hooks: Hook into advanced CSS features with native inline styles.

CSS Hooksでは、CSS Custom Propertiesを使うことでstyle属性での擬似クラスやMedia Queryをサポートしています。CSS Custom Propertiesでif文のようなスタイルのトグルをすることで実現しています。

詳しい仕組みは、次の記事などを参照してください。

• Cyclic Dependency Space Toggles

[azu]

💚 Node.js v18.19.0: 新しいローダーの仕組み
🧹 BiomeとPrettier: 互換性とパフォーマンス
🪝 CSS Hooks: style属性で擬似クラスを実現