Skip to content

RFC: Package renaming #1635

@emmatown

Description

@emmatown

To reduce the current confusion, I’m proposing that we rename some packages as part of Emotion 11. Below is a summary of what the packages would look like with the renaming, this will likely be in the docs. At the bottom is a summary of the renames.

@emotion/react

Contains the react-specific version of Emotion. use this if you’re using React. Has different functionality and APIs from @emotion/css and doesn’t work the same way under the hood.
Depends on @emotion/cache

@emotion/styled

Contains the styled API, uses @emotion/react under the hood and wraps it with a different API.
Depends on @emotion/react

@emotion/css

Contains a framework agnostic version of Emotion. Has different functionality and APIs from @emotion/react and doesn’t work the same way under the hood.
Depends on @emotion/cache which which can be customised by creating a custom instance at @emotion/css/create-instance

@emotion/cache

A cache used by both of the main Emotion APIs. Can be used to provide a custom cache in @emotion/react with its CacheProvider. To customise the equivalent options for @emotion/css, @emotion/css/create-instance can create another instance of @emotion/css and it accepts
Depended upon by @emotion/react and @emotion/css

@emotion/babel-plugin

A Babel plugin to optimise for all Emotion packages

@emotion/eslint-plugin

ESLint rules for @emotion/css, @emotion/react and @emotion/styled

@emotion/server

Contains APIs for server rendering with @emotion/css. Can also work with @emotion/react if emotion’s cache is passed to @emotion/react’s CacheProvider
Has an optional peer dependency on @emotion/css for when @emotion/server is used directly but it’s an optional so that @emotion/server/create-instance can be used with any cache from @emotion/cache

@emotion/jest

Contains a Jest snapshot serializer and matchers for use with all Emotion packages
Depends on the behaviour of @emotion/cache so it therefore works with @emotion/react and @emotion/css

@emotion/native

Contains the styled API for React Native along with a css function similar to the ones from @emotion/css and @emotion/react except that it returns a React Native style object

@emotion/primitives

Contains the styled API for React Primitives along with a css function similar to the ones from @emotion/css and @emotion/react except that it returns a React Native style object.

@emotion/babel-preset-css-prop

A Babel preset to allow usage of the css prop everywhere without importing it
Uses @emotion/react and @emotion/babel-plugin

Renaming summary

Anything not mentioned here will stay as is:
@emotion/core → @emotion/react
emotion → @emotion/css
emotion-theming → into @emotion/react
emotion-server → @emotion/server
create-emotion → @emotion/css/create-instance
create-emotion-server → @emotion/server/create-instance
babel-plugin-emotion → @emotion/babel-plugin
eslint-plugin-emotion → @emotion/eslint-plugin
jest-emotion → @emotion/jest

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions