Version Packages #2046

github-actions · 2020-10-18T11:27:39Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated.

Releases

@emotion/babel-plugin@11.0.0

Major Changes

c5b12d90 #1220 Thanks @mitchellhamilton! - Removed support for the instances option, any usage of it should be replaced with the importMap option
b8476e08 #1675 Thanks @mitchellhamilton! - Rename babel-plugin-emotion to @emotion/babel-plugin. Please replace "plugins": ["emotion"] with "plugins": ["@emotion"] in your Babel config.
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

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.
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
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/serialize@1.0.0

@emotion/babel-preset-css-prop@11.0.0

Major Changes

c5b12d90 #1220 Thanks @mitchellhamilton! - Removed support for the instances option, any usage of it should be replaced with the importMap option
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.
9e3671c4 #2076 Thanks @Andarist! - Removed runtime option that was introduced to this preset and deprecated shortly after that. If you want to configure runtime: "automatic", replace @emotion/babel-preset-css-prop with @babel/preset-react and @emotion/babel-plugin. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset

Minor Changes

c672175b #1130 Thanks @jtmthf! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
0a4a22ff #1651 Thanks @Andarist! - Allow labelFormat option to be a function.
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

Patch Changes

Updated dependencies [c672175b, c5b12d90, 5e803106, b8476e08, 0a4a22ff, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, c7850e61, b7d21373, c5b12d90, 828111cd]:
- @emotion/babel-plugin@11.0.0

@emotion/cache@11.0.0

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/sheet@1.0.0
- @emotion/utils@1.0.0

@emotion/css@11.0.0

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.
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.
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.
a293f907 #1600 Thanks @mitchellhamilton! - UMD filenames have been changed.
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.
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.
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

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/babel-plugin@11.0.0
- @emotion/cache@11.0.0
- @emotion/serialize@1.0.0
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0

@emotion/eslint-plugin@11.0.0

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.

Minor Changes

8b59959f #1659 Thanks @Andarist! - Respect syntax-preference rule when using css prop.
b8476e08 #1675 Thanks @mitchellhamilton! - Added @emotion/pkg-renaming rule for Emotion 11 migration.
58e8c110 #2034 Thanks @Andarist! - ESLint 7 has been added to the peer dependency range (ESLint 6 keeps being supported).

@emotion/is-prop-valid@1.0.0

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

@emotion/jest@11.0.0

Major Changes

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.
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.
ca599c5f #1901 Thanks @Andarist! - Refactored to use new serializers API which has been introduced in Jest 21.
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.
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.

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

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.
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.
Updated dependencies []:
- @emotion/css-prettifier@1.0.0

@emotion/native@11.0.0

Major Changes

95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.
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

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/primitives-core@11.0.0

@emotion/primitives@11.0.0

Major Changes

95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.
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

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/babel-plugin@11.0.0
- @emotion/is-prop-valid@1.0.0
- @emotion/primitives-core@11.0.0

@emotion/primitives-core@11.0.0

Major Changes

95ea2839 #2014 Thanks @Andarist! - Updated css-to-react-native dependency to the 3.x version - it comes with some breaking changes listed here.
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

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)};
`

@emotion/react@11.0.0

Major Changes

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
  }
}
```
a8c99429 #1600 Thanks @mitchellhamilton! - 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.
105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.
b8476e08 #1675 Thanks @mitchellhamilton! - Rename @emotion/core to @emotion/react. Please change any imports of @emotion/core to import @emotion/react or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.
a293f907 #1600 Thanks @mitchellhamilton! - UMD filenames have been changed.
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.
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.
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.

Minor Changes

c672175b #1130 Thanks @jtmthf! - Support functions in arrays passed to css prop and Global's styles prop. This allows for composition of theme-accepting functions.
828111cd #1639 Thanks @Andarist! - Global imported from macro entry (@emotion/react/macro) gets source maps generated now when inline css-less expression is used as value of the styles prop.
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

7dea6d7a #1734 Thanks @Andarist! - Fixed styles inserted by <Global/> component not inheriting speedy option from a cache passed to a wrapping <CacheProvider/>.
58dc08a6 #1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making @types/react an optional peer dependency.
5c55fd17 #1653 Thanks @Andarist! - Fix to what location generated source maps are pointing in case of composed styles.
f57a7229 #1941 Thanks @Andarist! - The way in which we provide TypeScript support for the css prop has changed. Based on the usage of our JSX factories, we can add support for css prop only for components that support className prop (as our JSX factory functions take the provided css prop, resolve it and pass the generated className to the rendered component).

For the classic runtime 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 css prop support, such as styled-components.

For the automatic runtime this has been implemented by exporting JSX namespace from the appropriate entries but this is only supported in TypeScript 4.1 or higher.

However, if you are stuck with older version of TypeScript or using the classic runtime implicitly by using our @emotion/babel-preset-css-prop then it's not possible to leverage leverage css prop support being added conditionally based on a type of rendered component. For those cases we have added a special file that can be imported once to add support for the css prop globally, for all components. Use it like this:
```
/// <reference types="@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.
a085003d #1613 Thanks @Andarist! - Add missing #__PURE__ annotations
75e2f9e1 #1810 Thanks @Andarist! - Add a dev-only warning about styles created with css from @emotion/react being passed to cx from <ClassNames/>.
d62d9101 #1677 Thanks @ajs139! - Warn if @emotion/react is initialized more than once in the same development environment.
Updated dependencies [a8eb4e75, e3d7db87, 8a896a31, 42df3f3b, 4a891bf6, 1e4a741d, debaad9a, 5c55fd17, a085003d, dfe79aca, 105de5c8, 39be057b, 105de5c8, 5d692a6a, 9e998e37, c6431074, 9e998e37, 9e998e37]:
- @emotion/cache@11.0.0
- @emotion/serialize@1.0.0
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0

@emotion/serialize@1.0.0

Major Changes

c6431074 #1609 Thanks @tomsseisums! - Reworked Interpolation-related types. Correct types should now be provided to all flavours of Emotion.

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

e3d7db87 #1732 Thanks @Andarist! - An additional semicolon is now inserted after interpolated arrays to cover cases when it doesn't have a trailing semi itself and thus breaking composition with styles coming after it.
8a896a31 #1611 Thanks @Andarist! - Throw error about invalid content property values instead of just logging error to the console.
5c55fd17 #1653 Thanks @Andarist! - Fix to what location generated source maps are pointing in case of composed styles.
a085003d #1613 Thanks @Andarist! - Add missing #__PURE__ annotations
Updated dependencies [debaad9a, 9e998e37]:
- @emotion/utils@1.0.0

@emotion/server@11.0.0

Major Changes

105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.
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.

Patch Changes

Updated dependencies [debaad9a, 9e998e37]:
- @emotion/utils@1.0.0

@emotion/sheet@1.0.0

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.

@emotion/styled@11.0.0

Major Changes

79036056 #967 Thanks @mitchellhamilton! - Remove support for deprecated innerRef prop
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
  }
}
```
a8c99429 #1600 Thanks @mitchellhamilton! - 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.
105de5c8 #1572 Thanks @Andarist! - [data-emotion] attribute on SSRed styled has changed. You should never rely on it though.
a293f907 #1600 Thanks @mitchellhamilton! - UMD filenames have been changed.
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! - 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.

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.

a8c99429 #1600 Thanks @mitchellhamilton! - 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

58dc08a6 #1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making @types/react an optional peer dependency.
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.
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/babel-plugin@11.0.0
- @emotion/is-prop-valid@1.0.0
- @emotion/serialize@1.0.0
- @emotion/utils@1.0.0

@emotion/utils@1.0.0

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.

babel-plugin-emotion@11.0.0

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.

@emotion/core@11.0.0

Major Changes

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

create-emotion@11.0.0

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.

create-emotion-server@11.0.0

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.

emotion@11.0.0

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.

emotion-server@11.0.0

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.

emotion-theming@11.0.0

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.

eslint-plugin-emotion@11.0.0

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.

jest-emotion@11.0.0

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.

@emotion/styled-base@11.0.0

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.

@emotion/css-prettifier@1.0.0

benchmarks@0.8.28

Patch Changes

Updated dependencies [c672175b, c5b12d90, 5e803106, b8476e08, 0a4a22ff, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, c7850e61, b7d21373, c5b12d90, 828111cd]:
- @emotion/babel-plugin@11.0.0

codesandbox-ci · 2020-10-18T11:30:15Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e6aac69:

Sandbox	Source
Emotion	Configuration

github-actions bot force-pushed the changeset-release/next branch from 85eb922 to 6da5207 Compare October 18, 2020 11:27

github-actions bot force-pushed the changeset-release/next branch 13 times, most recently from 3553f23 to bbee79a Compare November 10, 2020 23:43

github-actions bot changed the title ~~Version Packages (rc)~~ Version Packages Nov 10, 2020

github-actions bot force-pushed the changeset-release/next branch 6 times, most recently from 511553b to 0ec8273 Compare November 11, 2020 23:57

Version Packages

c4ce789

github-actions bot force-pushed the changeset-release/next branch from 0ec8273 to c4ce789 Compare November 12, 2020 00:23

Reorder changelog entries

e6aac69

Andarist merged commit b99c44c into next Nov 12, 2020

Andarist deleted the changeset-release/next branch November 12, 2020 00:41

dependabot bot mentioned this pull request Mar 11, 2021

chore(deps): bump @emotion/core and theme-ui reflexjs/reflexjs#153

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Version Packages #2046

Version Packages #2046

github-actions bot commented Oct 18, 2020 •

edited

codesandbox-ci bot commented Oct 18, 2020 •

edited

Version Packages #2046

Version Packages #2046

Conversation

github-actions bot commented Oct 18, 2020 • edited

Releases

@emotion/babel-plugin@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/babel-preset-css-prop@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/cache@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/css@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/eslint-plugin@11.0.0

Major Changes

Minor Changes

@emotion/is-prop-valid@1.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/jest@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/native@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/primitives@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/primitives-core@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/react@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/serialize@1.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/server@11.0.0

Major Changes

Patch Changes

@emotion/sheet@1.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/styled@11.0.0

Major Changes

Minor Changes

Patch Changes

@emotion/utils@1.0.0

Major Changes

Patch Changes

babel-plugin-emotion@11.0.0

Major Changes

@emotion/core@11.0.0

Major Changes

create-emotion@11.0.0

Major Changes

create-emotion-server@11.0.0

Major Changes

emotion@11.0.0

Major Changes

emotion-server@11.0.0

Major Changes

emotion-theming@11.0.0

Major Changes

github-actions bot commented Oct 18, 2020 •

edited

codesandbox-ci bot commented Oct 18, 2020 •

edited