SvelteでCSS Nestingは使えるのか

2024/01/05 13:55:38

昨年、いわゆるモダンブラウザのすべてでサポートされるようになったコレ。

<div>
  Here be <span>Dragons</span>!
</div>

<style>
  div {
    color: gold;
  
    & > span {
      color: deepskyblue;
    }
  }
</style>

Svelteのstyleブロックでも使えるっけ？という話。

v4系で書かれたアプリを先んじてv5対応しようとしてた時、

Expected a valid CSS identifier

ってエラーが出てて、なんでそんなところで？ってなったので調べてみたというわけ。

A. バージョンによる

この記事を書いてる時点では、svelte@4.xなら基本的なものは使える。（もちろんブラウザがサポートしてれば）

ただし、現時点のsvelte@5.xでは使えない。それを実装した（とされる）PRがまだマージされてないから。

feat: CSS Nesting implementation by AlbertMarashi · Pull Request #9549 · sveltejs/svelte https://github.com/sveltejs/svelte/pull/9549

といってる中の人のコメントがあったし、手元でもそういう挙動だった。

どうやらv5ではcss-treeを使わなくなって、正規表現で地道にパースするようになったらしい。

https://github.com/sveltejs/svelte/blob/94aab90bd1e7b60e4b4a6044cc5cd7e10e958ee7/packages/svelte/src/compiler/phases/1-parse/read/style.js

座して待ちましょう。