emotion

Major Changes

• 9e998e37 #1817 Thanks @Andarist! - insertStyles no longer calls cache.insert with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users.

Patch Changes

• debaad9a #1999 Thanks @RoystonS! - Fixed TypeScript definition of the EmotionCache by replacing the non-existent stylis method with insert that is available at runtime.

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.

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.

Major Changes

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

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]

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

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

Patch Changes

• 32c8528a #2084 Thanks @Andarist! - Only use '@babel/plugin-transform-react-jsx-development' based on the development option when runtime is set to "automatic". The classic runtime is not compatible with this plugin.

Minor Changes

• c55fadb4 #2074 Thanks @Andarist! - runtime option has been deprecated. It still works and will continue to work in Emotion 10 but we have found out that including JSX plugin twice in the Babel configuration leads to hard to debug problems and it's not always obvious that some presets include it. If you want to configure runtime: "automatic" just replace @emotion/babel-preset-css-prop with @babel/preset-react and babel-plugin-emotion. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset

Patch Changes

• fe30cbd6 #2066 Thanks @Andarist! - Fixed an issue with React giving warning about static children not having unique keys when using the classic jsx factory. This example illustrates the situation in which this has been incorrectly happening:

  <div css={{ color: 'hotpink' }}>
    <div />
    <div />
  </div>
  

Minor Changes

• 71514b06 #1970 Thanks @FLGMwt! - Support for the new JSX runtimes has been added. They require compatible React versions and shouldn't be manually used.

  To use them you can use the new @jsxImportSource @emotion/core pragma instead of the old @jsx jsx or you can use @emotion/babel-preset-css-prop with { runtime: 'automatic' } option to have it handled automatically for you for the whole project.

Minor Changes

• 71514b06 #1970 Thanks @FLGMwt! - A new runtime option has been added that can be configured to 'automatic' to opt into the new JSX runtimes. To use this a compatible React version has to be used.

Major Changes

• 9c4ebc16 #2030 Thanks @Andarist! - Release candidate version.

Patch Changes

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

Major Changes

• 9c4ebc16 #2030 Thanks @Andarist! - Release candidate version.

Patch Changes

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

Major Changes

• 9c4ebc16 #2030 Thanks @Andarist! - Release candidate version.

Major Changes

• 9c4ebc16 #2030 Thanks @Andarist! - Release candidate version.

Major Changes

• 9c4ebc16 #2030 Thanks @Andarist! - Release candidate version.