Skip to content

Version Packages #2046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Nov 12, 2020
Merged

Version Packages #2046

merged 2 commits into from
Nov 12, 2020

Conversation

@github-actions
Copy link
Contributor

@github-actions github-actions bot commented Oct 18, 2020 •
edited
Loading

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/[email protected]

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

@emotion/[email protected]

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

@emotion/[email protected]

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]

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

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

Minor Changes

@emotion/[email protected]

Major Changes

Minor Changes

Patch Changes

@emotion/[email protected]

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

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/[email protected]

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

Patch Changes

@emotion/[email protected]

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

@emotion/[email protected]

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

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/[email protected]

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/[email protected]

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/[email protected]

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

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

@emotion/[email protected]

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

@emotion/[email protected]

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.

[email protected]

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/[email protected]

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.

[email protected]

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.

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

[email protected]

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.

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

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

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

[email protected]

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/[email protected]

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/[email protected]

[email protected]

Patch Changes

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

codesandbox-ci bot commented Oct 18, 2020 •
edited
Loading

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 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 github-actions bot changed the title Version Packages (rc) Version Packages Nov 10, 2020
@github-actions github-actions bot force-pushed the changeset-release/next branch 6 times, most recently from 511553b to 0ec8273 Compare November 11, 2020 23:57
@github-actions github-actions bot force-pushed the changeset-release/next branch from 0ec8273 to c4ce789 Compare November 12, 2020 00:23
@Andarist Andarist merged commit b99c44c into next Nov 12, 2020
@Andarist Andarist deleted the changeset-release/next branch November 12, 2020 00:41
@dependabot dependabot bot mentioned this pull request Mar 11, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Andarist