@emotion/coreで自動付与されるベンダープレフィックスを外す

この記事の概要

つい最近@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です。

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トークでのお話してくださる方も募集中です！