All new changes are now documented in CHANGELOG.md files in each package's directory.
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
- The css prop works without
babel-plugin-emotion- The css prop receives the theme
- Labels are added to the css prop without
babel-plugin-emotionin 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
- 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
- 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 react@>=16.3
- The
channelandcreateBroadcastexports from emotion-theming have been removed - The
extractStaticoption to babel-plugin-emotion has been removed - jest-emotion no longer accepts an emotion instance
create-emotion-serveraccepts a cache instead of an emotion instance- The css prop doesn't work via the babel plugin.
jsxcan 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-emotiondoesn't return a caches property and instead returns a cache property which is the same return value as@emotion/cache- The
importedNamesoption to babel-plugin-emotion is gone - The
hoistoption is gone, hoisting always happens
native,primitives-core,primitivesjest-emotion- #777 add serializer file. (@kentcdodds)
- Billy Vong (billyvg)
- Kent C. Dodds (kentcdodds)
- Emma Hamilton (emmatown)
- Nitin Tulswani (nitin42)
create-emotion,emotion- #695 Generate the same class names for server and client if source maps are different. (@mgroenhoff)
- Iacopo (pasix)
- Melvin Groenhoff (mgroenhoff)
- Emma Hamilton (emmatown)
create-emotion-styled,preact-emotioncreate-emotion-styled,create-emotion,emotion,preact-emotion,react-emotion- #729 Enable css prop in Preact with TypeScript. (@aaronjensen)
- Other
babel-plugin-emotion,emotion-theming,emotion,jest-emotion,site
babel-plugin-emotion,create-emotion-server,create-emotion-styled,create-emotion,emotion-server,emotion-theming,emotion,eslint-plugin-emotion,jest-emotion,preact-emotion,react-emotion
- Aaron Jensen (aaronjensen)
- Alexandre Paixao (alex-pex)
- Brisha Pote (bpote)
- Junyoung Clare Jang (Ailrun)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)
- Nitin Tulswani (nitin42)
babel-plugin-emotion,create-emotionjest-emotion
jest-emotion- #731 Fix jest-emotion for preact. (@aaronjensen)
babel-plugin-emotion
create-emotion-server- #725 create-emotion-server: refactor inline for performance. (@apapirovski)
emotion-theming
- Aaron Jensen (aaronjensen)
- Anatoli Papirovski (apapirovski)
- Junyoung Clare Jang (Ailrun)
- Konrad Kruk (konradk)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
create-emotion-styled,emotion-server,emotion-theming,emotion,preact-emotion,react-emotion
- Junyoung Clare Jang (Ailrun)
create-emotion-styled,create-emotion,emotion-theming,emotion,preact-emotion,react-emotion
- Emma Hamilton (emmatown)
react-emotionpreact-emotioncreate-emotion-styled,create-emotioncreate-emotion-styledjest-emotion- #662 Add toHaveStyleRule to jest-emotion. (@danreeves)
create-emotion-styled,react-emotion- #670 compose shouldForwardProp. (@brentertz)
- #659 Forward .defaultProps when reusing __emotion_base. (@Andarist)
emotioncreate-emotion
babel-plugin-emotion,create-emotion,emotion-server,emotionjest-emotion
site- Other
create-emotion-server,emotion-server,emotion-theming,emotion,react-emotion- #692 Add Typescript definitions for 'create-emotion-server' and 'emotion-server'. (@mgroenhoff)
create-emotioncreate-emotion-styled,emotion-theming,preact-emotion,react-emotion- #694 Add react/preact as peer-dependencies to react-emotion/preact-emotion. (@mgroenhoff)
- Other
babel-plugin-emotion,sitecreate-emotion,emotionreact-emotion- #635 Add StyledComponent to allowed Interpolation types. (@mvestergaard)
- Brent Ertz (brentertz)
- Christian Gill (gillchristian)
- Dan Reeves (danreeves)
- Daniel Ruf (DanielRuf)
- Junyoung Clare Jang (Ailrun)
- Mark Chambers (marksy)
- Mateusz BurzyΕski (Andarist)
- Mathias Vestergaard (mvestergaard)
- Melvin Groenhoff (mgroenhoff)
- Emma Hamilton (emmatown)
- Scott Martin Hutcheson (smhutch)
- osdevisnot (osdevisnot)
create-emotion,emotion
- Andrew Hutchings (ahutchings)
- Emma Hamilton (emmatown)
jest-emotion- #622 Add support to jest-emotion for printing DOM Elements (#619). (@rszewczyk)
emotion-themingcreate-emotion-styled,react-emotion
babel-plugin-emotion,create-emotion-server,create-emotion-styled,create-emotion,emotion-utils,emotion,sitecreate-emotion,emotion- #624 Closes #623 (remove redundant HTML attribute). (@karol-majewski)
create-emotion-styled,emotion-utils
- Billy Vong (billyvg)
- Claudio Procida (claudiopro)
- Karol Majewski (karol-majewski)
- Kye Hohenberger (tkh44)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
- Rob Szewczyk (rszewczyk)
- Thomas Ingram (ravinggenius)
create-emotion,emotion-server,emotion,react-emotion
create-emotion-styled
- Emma Hamilton (emmatown)
create-emotionemotion- #596 Remove fontface type. (@renanrboliveira)
react-emotioncreate-emotion-styled,react-emotionbabel-plugin-emotion
- Alexandre PAIXAO (alex-pex)
- Felix Jung (felixjung)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
- Rajan Singh (woahitsraj)
- Renan R. Oliveira (renanrboliveira)
- Utopiaα² (utopiaio)
- Ward Peeters (wardpeet)
- Other
emotion,site
create-emotion-styled,create-emotion,emotionemotion-utils
- Alex LaFroscia (alexlafroscia)
- Chris Bolin (chrisbolin)
- Jordan Schroter (jschr)
- Emma Hamilton (emmatown)
- Sergey Galchenko (sgal)
Emotion 9 introduces instances, jest-emotion, two new SSR methods, a bunch of fixes and a brand new website!! Instances allow you to customize prefixing options, run plugins during CSS processing, set nonces for CSP and they're totally optional so if you don't need instances keep on using emotion. jest-emotion offers a better out of the box experience and has the potential for more features in the future. emotion-server has new methods for inlining CSS in HTML right before it's needed and adds support for streaming.
jest-emotionemotion-server
- Emotion no longer has
fontFace, you can useinjectGlobalto insert font faces instead.
-import { fontFace } from 'emotion'
+import { injectGlobal } from 'emotion'
-fontFace`
- font-family: 'Oxygen';
- font-style: normal;
- font-weight: 400;
- src: local('Oxygen Regular'), local('Oxygen-Regular'),
- url(https://fonts.gstatic.com/s/oxygen/v6/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)
- format('woff2');
- unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc,
- U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
-`
+injectGlobal`
+ @font-face {
+ font-family: 'Oxygen';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Oxygen Regular'), local('Oxygen-Regular'),
+ url(https://fonts.gstatic.com/s/oxygen/v6/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)
+ format('woff2');
+ unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc,
+ U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
+ }
+`- If you used jest-glamor-react in emotion 8, you can switch to jest-emotion by installing it and changing your test setup as shown below.
npm install --save jest-emotion-import { sheet } from 'emotion'
-import serializer from 'jest-glamor-react'
+import * as emotion from 'emotion'
+import { createSerializer } from 'jest-emotion'
-expect.addSnapshotSerializer(serializer(sheet))
+expect.addSnapshotSerializer(createSerializer(emotion))- Emotion doesn't automatically insert semicolons in styles now. We recommend using Prettier to ensure that your styles are formatted correctly.
- That's It!! You might want to check the more detailed list of breaking changes below just in case though.
emotionfontFaceis gone, it can be replaced withinjectGlobalwith a regular css@font-facerule.- The
registeredandinsertedcaches are no longer exports of emotion (they're now on thecachesobject which is exported by emotion) but these aren't documented and should never be relied on externally so this shouldn't cause a problem. - Semicolons are not automatically added in style blocks.
StyleSheetis no longer used for SSR, this is completely internal(except that emotion exports an instance of this assheet) so it shouldn't cause any problems.
emotion-serverextractCriticalno longer returns a rules property, this was never documented so it shouldn't cause any problems.
babel-plugin-emotion,create-emotion-server,create-emotion-styled,create-emotion,emotion-server,emotion-theming,emotion-utils,emotion,jest-emotion,preact-emotion,react-emotion,site
babel-plugin-emotion,emotion,react-emotion- #503 [babel-plugin-emotion][react-emotion] Adds Support for Components as Selectors Using the Object Syntax #501. (@smlmrkhlms)
emotionemotion-themingjest-emotion
emotionbabel-plugin-emotion,emotion-server,emotion,react-emotion- #498 used a simpler hashing strategy when a file system is available. (@probablyup)
create-emotion- #550 Check for
documentinstead ofwindow. (@alexlafroscia)
- #550 Check for
emotion-utils
- Evan Scott (probablyup)
- Mark Holmes (smlmrkhlms)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
- Yegor Borisenco (pimmey)
- Dara Hak (darahak)
- Divyanshu Maithani (divyanshu013)
- Haroen Viaene (Haroenv)
- Mouad Debbar (mdebbar)
- Oliver Turner (oliverturner)
- ARChilton
- ryota-murakami (ryota-murakami)
- Alex LaFroscia (alexlafroscia)
- Devin Otway (TroutZen)
create-emotion-styled,emotion,site
create-emotion- #550 Check for
documentinstead ofwindow. (@alexlafroscia)
- #550 Check for
emotion-utils
- Alex LaFroscia (alexlafroscia)
- Devin Otway (TroutZen)
- Emma Hamilton (emmatown)
create-emotion-styled,create-emotion,emotion-utils,emotion,react-emotion
- Other
- #533 Reusable Media Queries with String Styles wasn't working. (@ARChilton)
- #529 Update examples in Readme. (@divyanshu013)
- #509 fix Readme markdown list syntax. (@ryota-murakami)
- #505 Fixed jest-glamor-react -> jest-emotion upgrade description. (@Andarist)
sitebabel-plugin-emotion
create-emotion-styled,create-emotion,emotion-server,emotion,sitebabel-plugin-emotion,benchmarks,emotion- Other
- Dara Hak (darahak)
- Divyanshu Maithani (divyanshu013)
- Haroen Viaene (Haroenv)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
- Mouad Debbar (mdebbar)
- Oliver Turner (oliverturner)
- ARChilton
- ryota-murakami (ryota-murakami)
babel-plugin-emotion,create-emotion,emotion-theming,emotion,jest-emotion,react-emotion
- Emma Hamilton (emmatown)
babel-plugin-emotion,create-emotion-server,create-emotion-styled,create-emotion,emotion-server,emotion-theming,emotion-utils,emotion,jest-emotion,preact-emotion,react-emotion,site
babel-plugin-emotion,emotion,react-emotion- #503 [babel-plugin-emotion][react-emotion] Adds Support for Components as Selectors Using the Object Syntax #501. (@smlmrkhlms)
emotionemotion-theming
emotionbabel-plugin-emotion,emotion-server,emotion,react-emotion- #498 used a simpler hashing strategy when a file system is available. (@probablyup)
- Evan Scott (probablyup)
- Mark Holmes (smlmrkhlms)
- Mateusz BurzyΕski (Andarist)
- Emma Hamilton (emmatown)
- Yegor Borisenco (pimmey)
babel-plugin-emotion,emotion-server,emotion-theming,emotion-utils,emotion,react-emotion,site- #474 Reimplement component selectors. (@probablyup)
babel-plugin-emotionemotion
- Bogdan Chadkin (TrySound)
- Evan Scott (probablyup)
- Emma Hamilton (emmatown)
babel-plugin-emotion,emotion,react-emotion- #465 Add SVG attributes. (@sleepycat)
babel-plugin-emotion,emotion
emotion-themingemotion-theming,emotion-utils,emotion,preact-emotion,react-emotion
react-emotion- #443 Don't filter props on string tags started with Uppercase letter. (@asvetliakov)
babel-plugin-emotion,emotion-server,emotion,react-emotion
babel-plugin-emotion,benchmarks,emotion-server,emotion-theming,emotion-utils,emotion,preact-emotion,react-emotion,site
emotion-theming- #445 docs(emotion-theming): fix typo in README of packages/emotion-theming. (@cherealnice)
- Other
- #444 docs(css): fix import in example. (@justinobney)
- #441 Object style docs. (@tkh44)
- #439 Add docs for media queries and reusable media queries. (@dstaley)
- #438 Add blazity.com to In the Wild section π₯. (@hmeissner)
- #435 add design-system-utils to ecosystem. (@mrmartineau)
- #429 Updates README Ecosystem with ShevyJS. (@kyleshevlin)
babel-plugin-emotion
emotion-theming,emotion,react-emotion- #421 Switched to using dtslint from just running tsc --noEmit for typescript tests. (@cameron-martin)
- Alexey Svetliakov (asvetliakov)
- Cameron Martin (cameron-martin)
- Dan Cherouny (cherealnice)
- Dylan Staley (dstaley)
- Hugo Meissner (hmeissner)
- Ismael MartΓnez (ismamz)
- Justin Obney (justinobney)
- Kye Hohenberger (tkh44)
- Kyle Shevlin (kyleshevlin)
- Kyle Warren (malectro)
- Emma Hamilton (emmatown)
- ZΞNDΞR (mrmartineau)
react-emotion- #426 Added TypeScript definitions for innerRef. (@cameron-martin)
emotion- #416 Added TypeScript definitions for css prop. (@cameron-martin)
babel-plugin-emotion,benchmarks
- #423 Fix incorrect usage of css variable in docs. (@ekeric13)
- #413 Fix a typo in docs on composition. (@ervasive)
- #412 Remove dead links. (@greggb)
babel-plugin-emotion,benchmarks,emotion-server,emotion-theming,emotion-utils,emotion,preact-emotion,react-emotion,sitereact-emotion- #420 Fix component type in TS typings. (@asvetliakov)
emotion-theming,react-emotion- #419 Typescript typings: Added emotion-theming typings and fixed react-emotion typings. (@asvetliakov)
emotion- #417 Added TypeScript definitions for the newly-added cx function.. (@cameron-martin)
- Alexey Svetliakov (asvetliakov)
- Cameron Martin (cameron-martin)
- Eric Kennedy (ekeric13)
- Gregg Brewster (greggb)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)
- Ruslan Vasiliev (ervasive)
- #410 added gatsbythemes.com to the list In The Wild in the README. (@saschajullmann)
- Kye Hohenberger (tkh44)
- Sascha Jullmann (saschajullmann)
emotionreact-emotion- #398 Add types to react-emotion. (@renatorib)
emotion-theming,emotion- Other
- #407 Clarify Babel plugin usage in install docs. (@wKovacs64)
- Gregg Brewster (greggb)
- Justin Hall (wKovacs64)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)
- Renato Ribeiro (renatorib)
emotion- #379 Added TypeScript types and tests for the emotion package.. (@cameron-martin)
babel-plugin-emotion,emotion,react-emotion,stylis-plugin-emotionemotion
- Cameron Martin (cameron-martin)
- Hosmel Quintana (hosmelq)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
babel-plugin-emotion,emotion-theming,react-emotion
babel-plugin-emotion,emotion-theming,react-emotion,site- #292 Migrate "theming" library. (@probablyup)
- Evan Scott (probablyup)
- Kye Hohenberger (tkh44)
- Kye Hohenberger (tkh44)
- #348 Document CSS prop incompatibility with babel-plugin-transform-react-inline-elements. (@apostolos)
emotion,react-emotion- #346 Allow interpolation return value to be a function. . (@tkh44)
- #327 Use cross-env to pass env vars across platforms. (@apostolos)
babel-plugin-emotion,emotion-server,emotion,react-emotion
react-emotion,site- #232 Allow Styled tags to be updated via withComponent. (@ifyoumakeit)
emotionbabel-plugin-emotion,emotion,site
emotion- Other
- Dave Garwacke (ifyoumakeit)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
babel-plugin-emotion,emotion-server,emotion-utils,emotion,preact-emotion,react-emotion
babel-plugin-emotion,emotion-server,emotion-utils,emotion,preact-emotion,react-emotion
- Emma Hamilton (emmatown)
babel-plugin-emotion,emotion-server,emotion,react-emotion
- Emma Hamilton (emmatown)
- Kye Hohenberger (tkh44)
(This is a WIP changelog)
- composes is gone and replaced with random interpolations (there's a codemod)
- Nested class selectors default to
& .classinstead of&.classif the&is omitted
- Better performance
- All edge cases with prefixing are gone
- css prop specificity (#308)
- Don't convert tagged template literals to objects
- Emma Hamilton (emmatown)
babel-plugin-emotion- #290 Configurable imports. (@ChristopherBiscardi)
babel-plugin-emotion,emotion,react-emotionbabel-plugin-emotion- #298 upgrade to babel-macros 1.0.0. (@kentcdodds)
- Christopher Biscardi (ChristopherBiscardi)
- Kent C. Dodds (kentcdodds)
- Emma Hamilton (emmatown)
- #198 add docs for using withProps from recompose. (@divyagnan)
- Other
- #294 Add module name mapping for emotion-utils to .flowconfig. (@bigslycat)
babel-plugin-emotion- #293 Fix flowtype errors in babel-plugin-emotion. (@bigslycat)
babel-plugin-emotion,emotion-utils,emotion,preact-emotion,react-emotionbabel-plugin-emotion,emotion-server,emotion-utils,emotion,preact-emotion,react-emotion- #276 chore: update packages to deeplink into their respective directories. (@probablyup)
- Christopher Biscardi (ChristopherBiscardi)
- Divyagnan Kandala (divyagnan)
- Evan Scott (probablyup)
- Emma Hamilton (emmatown)
- Pavel (bigslycat)
- Siddharth Kshetrapal (siddharthkp)
- Emma Hamilton (emmatown)
babel-plugin-emotion,emotion-server,emotionbabel-plugin-emotion,emotion-server,emotion-utils,emotion,react-emotion- Other
- #252 Add documentation for nested selectors. (@silvenon)
- #250 Remove Vue from the babel-macros doc. (@emmatown)
- #243 Pass filename to PostCSS correctly. (@emmatown)
- #236 Filter props on composed components. (@emmatown)
- #237 adding theming to dev dependencies. (@areai51)
- #238 Make the styled content function return an object. (@emmatown)
- Emma Hamilton (emmatown)
- Emma Hamilton (emmatown)
- #227 Prop filtering. (@emmatown)
- #228 Spread out fragments earlier so that we can do redic nesting. (@tkh44)
- #225 Remove theming. (@tkh44)
- #224 Handle case where css float property is converted to
cssFloatby autoprefixer camelCase function. (@tkh44) - #223 Small fix for #221. (@tkh44)
- Kye Hohenberger (tkh44)
- #205 Fix prefixed selectors in objects. (@emmatown)
- #204 Fix shorthand property syntax in object styles and use spread syntax instead of transform in tests. (@emmatown)
- #203 Component as selector fix. (@emmatown)
- #207 Fix logo alignment on npm. (@emmatown)
- #206 Remove attr from Usage with CSS Modules docs. (@emmatown)
- #190 [Update] import
styledfrom 'emotion/react'. (@bogas04)
- Emma Hamilton (emmatown)
- #192 Use postcss-nested and postcss-safe-parser instead of styled-components fork and pass filename to postcss. (@emmatown)
- #191 More tests, use fns from utils and rework core. (@emmatown)
- #193 Use spread over Object.assign. (@bogas04)
- #177 fresh regex every time extractCritical is called. (@threepointone)
- #182 Move fbjs imports for warning and camelizeStyleName. (@emmatown)
- #176 Update jest-glamor-react. (@emmatown)
- #175 Clean up css operations. (@tkh44)
- Sunil Pai (threepointone)
- Kye Hohenberger (tkh44)
- Emma Hamilton (emmatown)