Skip to content

Conversation

@aarongarciah
Copy link
Member

@aarongarciah aarongarciah commented Feb 14, 2025

Part of #44921 (comment)

Context

Emotion keeps a local copy of the stylis prefixer to only apply the prefixes they consider necessary. Emotion will likely remove all of the prefixes in v12, but that might take some time to land. See related PR emotion-js/emotion#3296

We tell users to use the stylis prefixer in our docs. Although most of the CSS properties shouldn't be prefixed anymore using the stylis prefixer because they're widely available, there are a few properties that still require a prefix (see comments in this Emotion PR, which keeps their own local copy of the stylis prefixer:

  • color-adjust
  • box-decoration-break
  • mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite
  • user-select, hyphens, text-size-adjust

It's not safe to remove the stylis prefixer just yet, because of this. The ideal path forward would be for stylis to be less defensive and remove widely supported prefixes in a new version, but it's not clear which are the browsers that stylis wants to support.

@aarongarciah aarongarciah added the internal Behind-the-scenes enhancement. Formerly called “core”. label Feb 14, 2025
@mui-bot
Copy link

mui-bot commented Feb 14, 2025

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against eb8e77c

@DiegoAndai
Copy link
Member

DiegoAndai commented Feb 14, 2025

Thanks for reviewing this so quickly @aarongarciah.

  • Our components have the prefixes present. Do these come from Emotion or our configuration?
  • From what I see, we tell users to add the prefixed everytime they need to setup an Emotion cache. But for that, we're using Emotion's createCache. Doesn't Emotion add the prefixes on their side?

@siriwatknp
Copy link
Member

  • Our components have the prefixes present. Do these come from Emotion or our configuration?

Do you mean the components in the docs or in isolation environment like in CodeSandbox?

Doesn't Emotion add the prefixes on their side?

Only if the options.stylisPlugin is not provided, see https://github.com/emotion-js/emotion/blob/next/packages/cache/src/index.ts#L89

@aarongarciah
Copy link
Member Author

aarongarciah commented Feb 17, 2025

Closing this since we can't stop passing prefixed to the stylisPlugins option from createCache because some CSS properties still need to be prefixed even in modern browsers (e.g. user-select in Safari 18.3). Emotion uses its own prefixer (a more minimalistic version of the stylis one), but only when no stylisPlugins option is present. See https://github.com/emotion-js/emotion/blob/8dc1a6dd19d2dc9ce435ef0aff85ccf5647f5d2e/packages/cache/src/index.ts#L89

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants