Define stylis plugins through ThemeProvider (or similar)?

Would it be possible to add a way to define stylis plugins through some context API rather than the create-emotion package?

I find the need to use a custom stylis plugin for some accessibility features and I don’t feel confident in asking my users to use a custom Emotion package just for my library needs.

Ideally it would look like this:

import { ConfigProvider } from 'emotion';

<ConfigProvider stylisPlugins={...} prefix="..." key="..." container="..." etc>
  <StyledComponentAffectedByConfigHere />
</ConfigProvider>

would this be something possible?

[srmagura]

You can probably write a custom Stylis plugin for that if there is not one already. Though, likely more trouble than it’s worth.

[tkh44]

It is undocumented at the moment.

import React from 'react'
import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache({
  key: 'my-prefix-key',
  stylisPlugins: [/* Your plugins here */],
  // only prefix the following style properties
  prefix: key => {
    switch (key) {
      case 'appearance':
      case 'user-select':
      case ':placeholder':
        return true
      default:
        return false
    }
  }
})

export default function EmotionProvider(props) {
  return <CacheProvider value={myCache} {...props} />
}

After this wrap your App at whatever level you need (top-level or only a portion)

Here’s the source if you are curious. https://github.com/emotion-js/emotion/blob/ab535a8c7a0dcbbb6af310634eb3cee4bc2f8e2c/packages/cache/src/index.js#L94