この記事の概要
つい最近@emotion/reactで自動付与されるベンダープレフィックスを外すという記事を書きました。
すると「あの記事を参考にしたけど@emotion/coreでは動かなくて、どうしたら良いだろう？」と話をもらったのでそちらのバージョンでも試してみました。
前提となる挙動や問題点は@emotion/react版の記事に書いてありますので、まずはそちらを読んでいただけると幸いです。
@emotion/reactと@emotion/coreとは
Emotionがv10からv11に上がる際に名前が変わりました。
@emotion/coreが@emotion/reactにリネームされたのに加え、emotion-themingというパッケージが@emotion/reactの中に統合されました。
結論： createCacheの指定を変える
const myCache = createCache({
- key: 'css',
- stylisPlugins: [],
+ prefix: false,
})
@emotion/reactではstylisPluginsにprefixerが使用されていたため、その指定を明示的に外せばOKでした。
一方@emotion/coreではstylisPluginsにデフォルト値は用意されていません。
代わりにprefixというプロパティがあるので、そちらにfalseを渡せばOKです。
また、@emotion/reactではデフォルトの値が無いため指定しなければならなかったkeyも、@emotion/coreではデフォルトとしてcssが指定されているため消してOKです。
時系列で言えば逆（prefixが存在していたけど途中で無くなった、keyのデフォルト値が存在していたけどなくなった）のですが、前回の記事を基準に書いています。
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'
const myCache = createCache({
prefix: false,
})
const rootNode = document.getElementById('root')
ReactDOM.render(
<CacheProvider value={myCache}>
<App />
</CacheProvider>,
rootNode,
)
これにより、ベンダープレフィックスがつかなくなりました。
実態は@emotion/coreというより@emotion/cacheの変更
@emotion/coreとしての最新バージョンは10.3.1で、このとき@emotion/cacheの10.0.29が依存関係としてインストールされます。
この時点ではまだprefixがあります。
@emotion/reactとしての最古バージョンは11.0.0で、このとき@emotion/cacheの11.10.5が依存関係としてインストールされます。
この時点でprefixは存在していません。
「@emotion/coreだから動かない」というよりは「@emotion/coreと@emotion/reactで、使う@emotion/cacheの中身が変わっているため、書き方を変える必要がある」という方が実態に即していそうです。
最後に
時系列を遡って調査をした身としては「prefixオプションがある方が楽だなあ」と感じています。
アップデートの結果なくなっているのですから、パフォーマンス的に良くないとか、メンテがしづらいとか、理由はあるのでしょうが……。
あと前回の記事とあわせてですが、ベンダープレフィックスを完全に無しにするのも強硬手段なので、browserlistなどにあわせて生成できると嬉しい気持ちがあります。
おまけですが、v10（@emotion/core）のドキュメントも割と遡りやすかったのが助かりました。
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！