Skip to content

Emotion stylis prefixer fork is not public #3314

@aarongarciah

Description

@aarongarciah

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],
});

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions