Emotion: Disable Vendor Prefixing?

[aputinski]

• emotion version: 8.0.5

https://github.com/emotion-js/emotion/blob/master/packages/emotion/src/index.js#L9

Does the current API provide a way to disable vendor prefixing? I noticed that stylis can take a prefix: false option, but I can't find any way to set it.

[tkh44]

This is a good idea. I've been wanting this for myself but I'm waiting on https://github.com/thysultan/stylis.js/issues/63#issuecomment-335955199 so that it can be set dynamically.

[aputinski]

Thanks!

[aputinski]

Now that prefixing can be set dynamically, what's the best way to expose this from emotion?

[mitchellhamilton]

I just added a prefix option to instances that sets Stylis's prefix option

6138036dbc7e6df1f0e31175e24cff4ae548aeab

[esamattis]

So so I have to manually create the instances with create-emotion and create-emotion-styled packages just to disable vendor prefixing?

I usually prefer disable them in development as it makes the style inspector needlessly noisy.

[esamattis]

Actually creating own emotion instance is not that big deal if you are willing to add some webpack magic.

Just create your react-emotion instance to ./src/emotion.js and export it as the default export and add webpack resolve alias to it:

    resolve: {
        alias: {
            "react-emotion": path.resolve(
                __dirname,
                "src/emotion.js",
            ),
        },
    },