Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Remove stylis prefixer #45306

Closed
wants to merge 1 commit into from

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 core Infrastructure work going on behind the scenes 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
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants