reactjsemotionautoprefixer

How to disable prefixes in Emotion 11 in development?

In Emotion versions previous to 11 I used to disable CSS prefixing in development like this:

const emotionCache = createCache({
  prefix: process.env.NODE_ENV === 'development' ? false : true,
})

Now the prefixer is a plugin of the Stylis parser and the prefix option has been removed. They say you can copy and paste the plugin code if you want to customise it. But all I want is just to disable it in development.

Is there a clean way to do it?

Solution

  • I got an answer from the emotion developers.

    It's possible to disable all Stylis plugins – including the auto-prefixer – like this:

    const emotionCache = createCache({
  key: 'your-key',
  ...(process.env.NODE_ENV === 'development' && { stylisPlugins: [] }),
})