emotion

Patch Changes

• 8a88e771 #1880 Thanks @Jimmydalecleveland! - Improved stability of the generated snapshots - styles are extracted now based on the order in which the associated with them class names appear in the serialized elements rather than based on the order of the actual rules in the document.

• ae8c1d9d #1902 Thanks @Andarist! - Added support for handling regular React elements (objects returned from React.createElement) in the serializer and toHaveStyleRule matcher. It's possible to get those elements when traversing Enzyme's trees.

Minor Changes

• 5d692a6a #1956 Thanks @eps1lon! - Upgraded csstype dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.

Patch Changes

• dc1a0c5e #1962 Thanks @Andarist! - From now on an empty <style/> element gets inserted eagerly into the DOM in the constructor in non-production environments. This helps to grab used keys from the (JS)DOM even for sheets/caches that have not inserted any actual rules to the document yet. It allows @emotion/jest to find those and serialize Emotion classes properly in situations like this:

  import styled from '@emotion/styled/macro'
  import { render } from '@testing-library/react'
  
  const Div = styled.div``
  
  test('foo', () => {
    const { container } = render(<Div />)
    expect(container).toMatchSnapshot()
  })
  

Minor Changes

• 620f7327 #1954 Thanks @Andarist! - Reworked TypeScript types around types for React Native's core components. All of them, and all wrapped class components, should now accept ref prop properly.

Patch Changes

• Updated dependencies []:
  • @emotion/[email protected]

Minor Changes

• 5d692a6a #1956 Thanks @eps1lon! - Upgraded csstype dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.

Patch Changes

• Updated dependencies [dc1a0c5e, 5d692a6a]:
  • @emotion/[email protected]
  • @emotion/[email protected]
  • @emotion/[email protected]
  • @emotion/[email protected]

Patch Changes

• Updated dependencies [5d692a6a]:
  • @emotion/[email protected]

Patch Changes

• Updated dependencies [dc1a0c5e]:
  • @emotion/[email protected]

Patch Changes

• Updated dependencies []:
  • @emotion/[email protected]
  • @emotion/[email protected]

Patch Changes

• Updated dependencies [5d692a6a]:
  • @emotion/[email protected]

Patch Changes

• 2cf3b16b #1973 Thanks @santialbo! - Fixed label extraction from the stack traces in node for components wrapped in React.forwardRef. This has affected only development builds.

Patch Changes

• 4979ebb2 #1966 Thanks @chnakamura! - Fixed label extraction from the stack traces in Chrome in certain scenarios. This has affected only development builds.

Patch Changes

• Updated dependencies []:
  • @emotion/[email protected]

Patch Changes

• 6d32d82b #1848 Thanks @osdiab! - Added speedy method to the TS type declaration of the sheet object available on Emotion instances. In addition to that - StyleSheet type is no longer exported from this package and instead CSSStyleSheet is available now. The StyleSheet type might still be imported from @emotion/sheet, but it has no speedy method and thus it's not the same as what is available in this package as CSSStyleSheet.

Minor Changes

• 4d3b60d0 #1874 Thanks @connor-baer! - Added basic TS type support for as prop on styled components. It's possible to pass any component to it but it has no effect on other accepted props. This means that it's not 100% type-safe so use it sparingly and with care.

Patch Changes

• 58dc08a6 #1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making @types/react an optional peer dependency.

• Updated dependencies [58dc08a6, f57a7229]:

  • @emotion/[email protected]

Patch Changes

• 58dc08a6 #1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making @types/react an optional peer dependency.

• f57a7229 #1941 Thanks @Andarist! - The way in which we provide TypeScript support for css prop has changed. Based on usage of our jsx pragma we are able to add support for css prop only for components that support className prop (as our jsx factory function takes provided css prop, resolves it and pass the generated className to the rendered component). This has been implemented using technique described here. What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the css prop when using different libraries with the css prop support, such as styled-components.

  However, it's not possible to leverage css prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our @emotion/babel-preset-css-prop) we have added special file that can be imported once to add support for the css prop globally, for all components. Use it like this:

  import {} from '@emotion/react/types/css-prop'
  

  In this particular case we are forced to extend the existing React.Attributes interface. Previously we've been extending both React.DOMAttributes<T> and JSX.IntrinsicAttributes. This change is really minor and shouldn't affect any consuming code.

• Updated dependencies [4d3b60d0, 58dc08a6, 6d32d82b]:

  • @emotion/[email protected]
  • @emotion/[email protected]
  • @emotion/[email protected]

Major Changes

• cd77efbf #1920 Thanks @Andarist! - The root entry (@emotion/jest) no longer has default and serializer exports. You can still import createSerializer from it to create your own serializer if needed.

• cd77efbf #1920 Thanks @Andarist! - @emotion/jest/enzyme entrypoint has been renamed to @emotion/jest/enzyme-serializer. It's main purpose is compatibility with Jest's snapshotSerializers option, so it no longer has a default export - it only has test & serialize exports.. You can import createEnzymeSerializer from the root entry (@emotion/jest) and create your own serializer if needed.

• cd77efbf #1920 Thanks @Andarist! - @emotion/jest/serializer's main purpose is compatibility with Jest's snapshotSerializers option, so it no longer has a default export - it only has test & serialize exports. You can import createSerializer from the root entry (@emotion/jest) and create your own serializer if needed.

Patch Changes

• Updated dependencies [58dc08a6, f57a7229, 6d32d82b]:
  • @emotion/[email protected]
  • @emotion/[email protected]

Patch Changes

• Updated dependencies [6d32d82b]:
  • @emotion/[email protected]

Patch Changes

• Updated dependencies []:
  • @emotion/[email protected]

Patch Changes

• Updated dependencies [58dc08a6, f57a7229]:
  • @emotion/[email protected]

Major Changes

• 9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀

  It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:

  • plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.
  • vendor-prefixing was previously customizable using prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
  • Prefixer is now just a plugin which happens to be put in default stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.
  • @import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.

Patch Changes

• Updated dependencies [91046a8c, 9e998e37, 9e998e37]:
  • @emotion/[email protected]
  • @emotion/[email protected]