profile
viewpoint

Ask questionsHow to get auto-prefixing with vanilla Emotion?

<!-- Documentation issues are a great way for newcomers to contribute to open source projects! If you have time please consider opening a Pull Request with your documentation changes. -->

Description:

I've re-read multiple times all the different areas of the documentation that refers to vanilla Emotion usage:

https://emotion.sh/docs/introduction#framework-agnostic https://medium.com/@tkh44/emotion-ad1c45c6d28b https://emotion.sh/docs/install https://emotion.sh/docs/emotion

but I'm confused about what exactly Emotion is doing with the css-decorated template literals and how I can get them to be auto-prefixed. In my build pipeline, I have the autoprefixer plugin set up with PostCSS for the CSS loader, but from what I can see, Emotion does not omit any CSS.

I think it would be nice to:

  1. Describe the architecture about what emotion is doing on a high-level
  2. Walk through a solution for adding vendor prefixes with vanilla emotion
emotion-js/emotion

Answer questions clemmy

Ah, thank you for the quick responses! So if I understand correctly, vanilla emotion should support auto-prefixing out of the box? :) We should totally be selling this feature!

My main misconception comes from: https://emotion.sh/docs/introduction#react where it says

CSS prop support - Similar to the style prop but adds support for nested selectors, media queries, and auto-prefixing.

Perhaps we should move the auto-prefixing support to the Framework Agnostic section 😄

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
Github User Rank List