2021-06-01のJS: Jest 27、vanilla-extract 1.0.0、Learn CSS

[azu]

Jest 27.0.0がリリースされました。

• Release 27.0.0 · Facebook/jest
• Jest 27: New Defaults for Jest, 2021 edition ⏩ · Jest

Jest 27.0.0では今までのデフォルトが大きく変更されるリリースとなっています。

testEnvironmentのデフォルトをjsdomからnodeへ変更、jest-circusのデフォルト化、fake timersのデフォルトを@sinonjs/fake-timersベースのmodernに変更している。
機能追加として、失敗したテストをインタラクティブに実行できるように、inline snapshotsをprettierの依存なく実行できるようになっています。
また、doneの複数回呼び出しをエラーとしたり、Promiseを返すのとdoneの混在を禁止したり、TypeScriptの型を厳密化するといった変更も含まれています。

---

CSS Variablesが利用できないといったCSS Modulesの問題点の解決と型安全なCSS in JSを目指すvanilla-extract 1.0.0がリリースされました。

• vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

🧁🎉 Announcing vanilla-extract v1.0!

💪 Locally scoped, type-safe styles, variables + themes.
🦄 Minimal abstraction over CSS.
🛠 Framework agnostic, w/ integrations for webpack, esbuild, Vite + Snowpack.
✅ Now stable + production ready.

🙇‍♂️ Enjoy!https://t.co/Ejaf4anfbj

— 🧁🍨 Mark Dalgleish (@markdalgleish) May 28, 2021

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

vanilla-extractはCSS Modulesの作者の一人でもMark Dalgleishが中心に作られている、CSS Modules-in-TypeScriptなCSSフレームワークです。
TypeScriptでスタイルをJSとして.css.tsに書いてclass属性に指定したものをコンパイルすると、CSSファイルを生成するフレームワークに依存しないツールキットとなっています。

直近で様々なCSS in JSが登場しているので、次の記事がCSSへのアプローチをグループ分けしてまとめられています。

• A Thorough Analysis of CSS-in-JS | CSS-Tricks
• Libraries to look out for · Issue #8 · andreipfeiffer/css-in-js

---

web.devでLearn CSSというCSSについて一から学べるCSSのチュートリアル講座が公開されています。
Box Model、セレクタ、詳細度、CSSの単位などの基本的な概念から、GridやFlexboxなどのレイアウト、ColorやmarginなどのCSSプロパティの解説、擬似クラスや疑似要素などCSS全般について幅広く解説されています。