-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
The problem
Emotion uses a default set of stylis plugins (only prefixer
as of today) in createCache
. When someone customizes the stylisPlugins
option in createCache
, Emotion stops using the default stylis plugins and uses the user provided plugins instead. In Material UI, we customize the stylisPlugins
when configuring RTL like this (see docs):
import createCache from '@emotion/cache';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
const rtlCache = createCache({
stylisPlugins: [prefixer, rtlPlugin],
});
Since Emotion forked the stylis prefixer and maintains its own internal version, it's not possible to get the same prefixes when you're using the default cache vs when you're customizing the stylisPlugins
(unless you maintain a local copy of the stylis prefixer).
Proposed solution
Emotion is likely going to keep maintaining the stylis prefixer internal fork, exposing the defaultStylisPlugins
could make sense to be able to achieve the same prefixes when someone customizes stylisPlugins
. For example, the code to setup RTL in Material UI could look like this:
import createCache, { defaultStylisPlugins } from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';
const rtlCache = createCache({
stylisPlugins: [...defaultStylisPlugins, rtlPlugin],
});