emotion

Patch Changes

• fdd46bdf #2112 Thanks @Andarist! - Fixed the latest tree-shakeability improvements by adding "sideEffects": false to all internal package.json files as well. This fixes hoist-non-react-statics not being dropped correctly despite of the latest improvements.

Minor Changes

• c470c855 #2109 Thanks @Andarist! - createEnzymeSerializer export has been removed from the root entrypoint and moved to a dedicated @emotion/jest/enzyme entrypoint. This is unfortunate because it could be considered a breaking change but it has been decided to treat this as a bug fix. It was never the intention to export this from the root entrypoint - enzyme-to-json has been marked as an optional peer dependency of @emotion/jest since the release and it was the package structure that did not match this expectation by mistake.

Patch Changes

• 0e465d1c #2101 Thanks @Andarist! - Improved tree-shakeability of the package. The main benefit is that bundlers should be able now to drop hoist-non-react-statics if you don't actually use our withTheme export.

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename emotion to @emotion/css. Please change any imports of emotion to import @emotion/css or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

• b8476e08 #1675 Thanks @mitchellhamilton! - Move create create-emotion to @emotion/css/create-instance. Please change any imports of create-emotion to import @emotion/css/create-instance or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

• 105de5c8 #1572 Thanks @Andarist! - The key option is now required when creating a custom instance of a cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.

• 5bea60b1 #1807 Thanks @Andarist! - Removed support for interpolating class names returned from css, so this will no longer be possible:

  const cls1 = css`
    color: blue;
  `
  const cls2 = css`
    & .${cls1} {
      color: red;
    }
  `
  

  This has already been deprecated for the lifetime of v10.

• 843bfb11 #1630 Thanks @Andarist! - Removed default export from @emotion/css - it's main purpose was to allow css to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. @emotion/react/macro has been added to account for this use case and appropriate changes has been made to @emotion/babel-plugin to facilitate those changes.

  If you have used @emotion/css directly (it was always reexported from @emotion/react) or you have been using its macro then you should update your code like this:

  -import css from '@emotion/css'
  +import { css } from '@emotion/react'
  
  // or
  -import css from '@emotion/css/macro'
  +import { css } from '@emotion/react/macro'
  

  You can also use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin to do this for you.

• 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. The 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.
  • the prefixer is now just a plugin which happens to be included in the 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.

• cf56694 #2088 Thanks @Andarist! - UMD filenames have been changed.

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

• 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.

• Updated dependencies [c672175b, a8eb4e75, e3d7db87, 8a896a31, 42df3f3b, c5b12d90, 4a891bf6, 5e803106, b8476e08, 1e4a741d, debaad9a, 0a4a22ff, 5c55fd17, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, a085003d, dfe79aca, c7850e61, 105de5c8, 39be057b, b7d21373, 105de5c8, 5d692a6a, c5b12d90, 9e998e37, c6431074, 828111cd, 9e998e37, 9e998e37]:

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

Major Changes

• 923ded01 #1643 Thanks @JakeGinnivan! - Allow isPropValid to take any PropertyKey as an argument (instead of just string).

Minor Changes

• 69446cb5 #1971 Thanks @mjcampagna! - translate got added to the list of the valid props.

Patch Changes

• a085003d #1613 Thanks @Andarist! - Add missing #__PURE__ annotations

Major Changes

• f9feab1a #1575 Thanks @mitchellhamilton! - Removed support for @emotion/styled-base package. It has been moved to @emotion/styled and is available as @emotion/styled/base. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when @emotion/styled-base was not installed explicitly by a user.

• 79036056 #967 Thanks @mitchellhamilton! - Remove support for deprecated innerRef prop

• a72e6dc #1501 Thanks @JakeGinnivan! - TypeScript types have been significantly restructured. These changes:

  • reduce build times when using Emotion, especially in larger projects
  • it's no longer necessary to manually specify generic parameters for your Emotion components in many cases
  • union types as props are better supported and should be inferred properly
  • the css function has been restricted to prevent passing invalid types
  • styled's generic parameter has been changed, if you were specifying the ComponentType you will need to remove that generic parameter
  • styled no longer takes a second ExtraProps parameter - instead of that move it to after the styled call. So instead of writing styled<typeof MyComponent, ExtraProps>(MyComponent)({}) you should now be writing styled(MyComponent)<ExtraProps>({})

  If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred.

• c6431074 #1609 Thanks @tomsseisums! - It's now easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment the builtin Theme interface like this:

  import '@emotion/react'
  
  declare module '@emotion/react' {
    export interface Theme {
      primaryColor: string
      secondaryColor: string
    }
  }
  

• 105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.

• 79036056 #967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools

• 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. The 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.
  • the prefixer is now just a plugin which happens to be included in the 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.

• cf56694 #2088 Thanks @Andarist! - UMD filenames have been changed.

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.

• ad77ed24 #1624 Thanks @JakeGinnivan! - Added CreateStyled overload to handle when shouldForwardProp is a custom type guard for intrinsic props.

  As an example, if you want to override the type of the color prop:

  export const Box = styled('div', {
    shouldForwardProp: (
      propName
    ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> =>
      propName !== 'color'
  })<{ color: Array<string> }>(props => ({
    color: props.color[0]
  }))
  ;<Box color={['green']} />
  

• 18c0d5f4 #1668 Thanks @animecyc! - Custom shouldForwardProp is being preserved now when using .withComponent. Also, when passing an additional shouldForwardProp in .withComponent's options (like this: SomeComponent.withComponent('span', { shouldForwardProp })) it's being composed with the potentially existing shouldForwardProp.

• 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

• 22935470 #1588 Thanks @FezVrasta! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.

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

• Updated dependencies [c672175b, 923ded01, e3d7db87, 8a896a31, c5b12d90, 5e803106, b8476e08, debaad9a, 0a4a22ff, 5c55fd17, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, a085003d, c7850e61, b7d21373, 5d692a6a, c5b12d90, c6431074, 828111cd, 9e998e37, 69446cb5]:

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

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename eslint-plugin-emotion to @emotion/eslint-plugin. Please replace "plugins": ["emotion"] with "plugins": ["@emotion"] and emotion/ with @emotion/ in your rules config in your ESLint config.

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename jest-emotion to @emotion/jest. Please replace "snapshotSerializers": ["jest-emotion"] with "snapshotSerializers": ["@emotion/jest/serializer"] if you're using the snapshot serializer. Also replace any imports of jest-emotion with @emotion/jest or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

• ca599c5f #1901 Thanks @Andarist! - test & print are no longer exported as named exports. If you want to access the default serializer just access the default export. This means that @emotion/jest(previously jest-emotion) can't be used directly in the snapshotSerializers option, you should use @emotion/jest/serializer instead for this.

• ca599c5f #1901 Thanks @Andarist! - Refactored to use new serializers API which has been introduced in Jest 21.

• 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/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.

• 702f3fd2 #1620 Thanks @spudly! - Added the T parameter to the Matchers interface in the TypeScript definitions to make this module compatible with @types/jest@^24.0.20.

Minor Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Improve support for Enzyme's shallow rendering with the addition of the @emotion/jest/enzyme-serializer snapshot serializer.

• ca599c5f #1901 Thanks @Andarist! - Improved printing of nested at-rules.

• ca599c5f #1901 Thanks @Andarist! - Fixed an issue with all styles being recognized as changed in Jest 25 on unrelated changes.

Patch Changes

• e67a5be9 #1604 Thanks @Andarist! - Take specificity into account when matching styles

• 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.

• e67a5be9 #1604 Thanks @Andarist! - Match rules in declarations with component used as a selector

• 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.

• 3abcf673 #2043 Thanks @Andarist! - @types/jest has been moved from the dependencies to the optional peer dependencies as it should not be installed automatically for users not using TypeScript.

• Updated dependencies []:

  • @emotion/[email protected]

Major Changes

• 9e998e37 #1817 Thanks @Andarist! - @import rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.

Minor Changes

• 4a891bf6 #1473 Thanks @jcharry! - The new prepend option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.

• dfe79aca #1696 Thanks @Andarist! - Added hydrate method which can be used for SSRed styles. They become a part of a sheet and can be flushed.

Patch Changes

• 42df3f3b #2028 Thanks @Andarist! - Generated style elements got data-s="1" attribute so @emotion/cache can recognize them as being already owned by another Emotion copy to avoid messing up existing style elements when initializing a new copy.

• 1e4a741d #1697 Thanks @Andarist! - Removed mentions of maxLength option in types & docs as it has been removed some time ago.

Major Changes

• f9feab1a #1575 Thanks @mitchellhamilton! - Removed support for @emotion/styled-base package. It has been moved to @emotion/styled and is available as @emotion/styled/base. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when @emotion/styled-base was not installed explicitly by a user.

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename emotion-server to @emotion/server. Please change any imports of emotion-server to import @emotion/server or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

• b8476e08 #1675 Thanks @mitchellhamilton! - Move create-emotion-server to @emotion/server/create-instance. Please change any imports of create-emotion-server to import @emotion/server/create-instance or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

• 105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.

Patch Changes

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

Major Changes

• 95ea2839 #2014 Thanks @Andarist! - Functions are no longer accepted as values for the style prop. This unifies the behavior with the web version of Emotion as style's equivalent is className prop and functions are not resolved for it.

• 139ea336 #2060 Thanks @efoken! - StyleSheet.create is used now under the hood. This means that when used in combination with React Native Web atomic class names are applied on components instead of inline styles.

• 79036056 #967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools

• 95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.

Minor Changes

• 843bfb11 #1630 Thanks @Andarist! - @emotion/native & @emotion/primitives packages come with macros now. Both can be used as @emotion/native/macro & @emotion/primitives/macro respectively.

• 2d597857 #2058 Thanks @efoken! - Added support for the as prop.

• f1b7c9d6 #1642 Thanks @Andarist! - Added basic support for accepting custom shouldForwardProp option.

Patch Changes

• db16ac35 #2013 Thanks @Andarist! - Fixed an issue with styles being lost for nested factory calls like:

  const bgColor = color => css`
    background-color: ${color};
  `
  
  const Text = styled.Text`
    color: hotpink;
    ${({ backgroundColor }) => bgColor(backgroundColor)};
  `
  

• Updated dependencies [c672175b, 923ded01, c5b12d90, 5e803106, 95ea2839, b8476e08, 0a4a22ff, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, db16ac35, a085003d, c7850e61, 95ea2839, b7d21373, 139ea336, c5b12d90, 79036056, 2d597857, 828111cd, 69446cb5]:

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

Major Changes

• 95ea2839 #2014 Thanks @Andarist! - Functions are no longer accepted as values for the style prop. This unifies the behavior with the web version of Emotion as style's equivalent is className prop and functions are not resolved for it.

• 139ea336 #2060 Thanks @efoken! - StyleSheet.create is used now under the hood. This means that when used in combination with React Native Web atomic class names are applied on components instead of inline styles.

• 79036056 #967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools

• 95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.

Minor Changes

• 2d597857 #2058 Thanks @efoken! - Added support for the as prop.

Patch Changes

• db16ac35 #2013 Thanks @Andarist! - Fixed an issue with styles being lost for nested factory calls like:

  const bgColor = color => css`
    background-color: ${color};
  `
  
  const Text = styled.Text`
    color: hotpink;
    ${({ backgroundColor }) => bgColor(backgroundColor)};
  `
  

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename babel-plugin-emotion to @emotion/babel-plugin. Please replace "plugins": ["emotion"] with "plugins": ["@emotion"] in your Babel config.

• c5b12d90 #1220 Thanks @mitchellhamilton! - Removed support for the instances option, any usage of it should be replaced with the importMap option

• c65c5d88 #1622 Thanks @Andarist! - Drop Babel 6 support

• c7850e61 #1656 Thanks @Andarist! - autoLabel option no longer is a simple boolean. Instead we accept now 3 values: dev-only (the default), always and never.

  Each possible value for this option produces different output code:

  • with dev-only we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
  • with always we always add labels when possible,
  • with never we disable this entirely and no labels are added.

• b7d21373 #2080 Thanks @Andarist! - cssPropOptimization defaults now to true regardless of the @emotion/react import presence.

Minor Changes

• c5b12d90 #1220 Thanks @mitchellhamilton! - Added the importMap option which allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms

• c672175b #1130 Thanks @jtmthf! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.

• 5e803106 #1893 Thanks @Andarist! - Added support for converting assignment expressions to labels in cases like this:

  styles = css``
  Timeline.Item = styled.li``
  Timeline.Item.Anchor = styled.a``
  

• 0a4a22ff #1651 Thanks @Andarist! - Allow labelFormat option to be a function.

• 5c7ec859 #1805 Thanks @Andarist! - Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.

• 828111cd #1639 Thanks @Andarist! - Global gets handled by the Babel plugin now - this gives inline css-less expressions source maps.

Patch Changes

• b0ad4f0c #1602 Thanks @Andarist! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such

• 9e998e37 #1817 Thanks @Andarist! - Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like & :hover the whitespace before colon has a semantic meaning and needs to be preserved.

• Updated dependencies [e3d7db87, 8a896a31, 5c55fd17, a085003d, 5d692a6a, c6431074]:

  • @emotion/[email protected]

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Rename emotion-server to @emotion/server. Please change any imports of emotion-server to import @emotion/server or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

Major Changes

• cbb8b796 #1628 Thanks @Andarist! - emotion-theming has been removed and all its exports were moved to @emotion/react package. Please import them like this import { useTheme, ThemeProvider, withTheme } from '@emotion/react' from now on.

Major Changes

• 105de5c8 #1572 Thanks @Andarist! - From now on key option is required. Please make sure it's unique (and not equal to "css") as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.

• 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. The 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.
  • the prefixer is now just a plugin which happens to be included in the 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.

Minor Changes

• 4a891bf6 #1473 Thanks @jcharry! - The new prepend option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.

Patch Changes

• a8eb4e75 #1998 Thanks @Andarist! - Styles are now correctly extracted from the correct cache (key-sensitive) on the server.

• 105de5c8 #1572 Thanks @Andarist! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.

• 39be057b #1997 Thanks @Andarist! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used keys from the (JS)DOM even for 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()
  })
  

• Updated dependencies [42df3f3b, 4a891bf6, 1e4a741d, debaad9a, dfe79aca, 9e998e37, 9e998e37]:

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

Major Changes

• b8476e08 #1675 Thanks @mitchellhamilton! - Move create-emotion-server to @emotion/server/create-instance. Please change any imports of create-emotion-server to import @emotion/server/create-instance or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

Major Changes

• 95ea2839 #2014 Thanks @Andarist! - Functions are no longer accepted as values for the style prop. This unifies the behavior with the web version of Emotion as style's equivalent is className prop and functions are not resolved for it.

• 139ea336 #2060 Thanks @efoken! - StyleSheet.create is used now under the hood. This means that when used in combination with React Native Web atomic class names are applied on components instead of inline styles.

• 79036056 #967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools

• 95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.

Minor Changes

• 843bfb11 #1630 Thanks @Andarist! - @emotion/native & @emotion/primitives packages come with macros now. Both can be used as @emotion/native/macro & @emotion/primitives/macro respectively.

• 456be9a6 #1634 Thanks @patsissons! - Added TypeScript type definitions.

• 2d597857 #2058 Thanks @efoken! - Added support for the as prop.

• f1b7c9d6 #1642 Thanks @Andarist! - Added basic support for accepting custom shouldForwardProp option.

Patch Changes

• 11fc27f8 #1750 Thanks @Zn4rK! - Match supported components to what is exported from the latest version of React Native (0.61.5).

• db16ac35 #2013 Thanks @Andarist! - Fixed an issue with styles being lost for nested factory calls like:

  const bgColor = color => css`
    background-color: ${color};
  `
  
  const Text = styled.Text`
    color: hotpink;
    ${({ backgroundColor }) => bgColor(backgroundColor)};
  `
  

• Updated dependencies [95ea2839, db16ac35, 95ea2839, 139ea336, 79036056, 2d597857]:

  • @emotion/[email protected]