emotion v10.0.0 Release Notes

Release Date: 2018-10-27 // over 2 years ago
  • ๐Ÿ’… Emotion 10 is a big change that we're really excited about with improvements to the css prop, a Global component for dynamic global styles, zero config SSR, lots of small fixes and improvements and more with an incremental adoption strategy. For a higher-level overview, read the Medium article on Emotion 10. For a migration guide, visit the migrating to Emotion 10 page on emotion.sh

    :rocket: Enhancement

    • ๐Ÿ”Œ The css prop works without babel-plugin-emotion
      • The css prop receives the theme
      • Labels are added to the css prop without babel-plugin-emotion in some cases
    • โž• Add the Global and ClassNames components
    • ๐Ÿ’… styled uses forwardRef
    • โž• Add the as prop to styled
    • Providing options can be done via the CacheProvider
    • The autoLabel and sourceMap options are enabled in development with the Babel Macros
    • 0๏ธโƒฃ The autoLabel and sourceMap options are on by default in development in babel-plugin-emotion
    • โž• Add warning for kebab-case css properties in objects
    • โž• Add keyframes to snapshots with jest-emotion
    • โž• Add codemod rules for Emotion 10
    • ๐Ÿ›  Fix SSR with _ in labels
    • โž• Add warnings for unsafe pseudo classes

    :boom: Breaking Change

    • create-emotion no longer accepts a global context object
    • ๐Ÿ‘Œ Support for preact-emotion has been dropped(note that the emotion package still works with preact)
    • ๐Ÿ‘ Emotion only supports [email protected]>=16.3
    • ๐Ÿšš The channel and createBroadcast exports from emotion-theming have been removed
    • ๐Ÿšš The extractStatic option to babel-plugin-emotion has been removed
    • jest-emotion no longer accepts an emotion instance
    • create-emotion-server accepts a cache instead of an emotion instance
    • ๐Ÿ‘• The css prop doesn't work via the babel plugin. jsx can be manually imported from @emotion/core(which can be automated with eslint-plugin-emotion) or babel-plugin-jsx-pragmatic can be used.
    • โš  Functions in interpolations are stringified in css and cx calls(probably won't affect you very much, there's a warning about it in v9)
    • create-emotion doesn't return a caches property and instead returns a cache property which is the same return value as @emotion/cache
    • ๐Ÿ”Œ The importedNames option to babel-plugin-emotion is gone
    • The hoist option is gone, hoisting always happens