emotion

Patch Changes

• #2534 57be9e8c Thanks @srmagura! - Changed the implementation of the runtime label extraction in elements using the css prop (that only happens in development) to one that should yield more consistent results across browsers. This fixes some minor issues with React reporting hydration mismatches that wouldn't happen in production.

Minor Changes

• #2542 eb013d25 Thanks @eps1lon! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

Patch Changes

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

Minor Changes

• #2521 516fe45 Thanks @mnajdova! - Added insertionPoint option to the Sheet's constructor. It can be used to insert rules after the specified element.

Minor Changes

• #2521 516fe458 Thanks @mnajdova! - Added insertionPoint option to the createCache. It can be used to insert rules after the specified element. For example, to use it with the CacheProvider from @emotion/react you can do this:

  const head = document.querySelector('head')
  
  // <meta name="emotion-insertion-point" content="">
  const emotionInsertionPoint = document.createElement('meta')
  emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
  emotionInsertionPoint.setAttribute('content', '')
  
  head.appendChild(emotionInsertionPoint)
  
  // the emotion sheets should be inserted right after the meta tag
  const cache = createCache({
    key: 'my-app',
    insertionPoint: emotionInsertionPoint
  })
  
  function App() {
    return (
      <CacheProvider value={cache}>
        <Main />
      </CacheProvider>
    )
  }
  

Patch Changes

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

Minor Changes

• #2542 eb013d25 Thanks @eps1lon, @Andarist! - Adjusted the serialization logic to unwrap rendered elements from Fragments that had to be added to fix hydration mismatches caused by React.useId usage (the upcoming API of the React 18).

Minor Changes

• #2542 eb013d25 Thanks @eps1lon! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

Patch Changes

• #2551 99fcea04 Thanks @Andarist! - Shorten the path of the "private" isolated-hoist-non-react-statics-do-not-use-this-in-your-code entrypoint to avoid exeeding path limitations on Windows.

• Updated dependencies [9e82a991, 516fe458]:

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

Patch Changes

• #2540 9861a18b Thanks @fabb! - Added enterKeyHint prop to the allowlist of forwardable props.

Patch Changes

• #2447 f2eda829 Thanks @mdesantis! - Fixed an issue with sheet.flush() crashing if its style elements were already detached by something else.

Patch Changes

• #2498 e5beae8e Thanks @Andarist! - Fixed an edge case issue with incorrect rules being generated. When a context selector (&) was used not at the beginning of a selector (which is not valid SCSS but is allowed by the Stylis parser that we are using) within a group of selectors containing a pseudoclass then it was not replaced correctly with the current context selector.

• Updated dependencies [e5beae8e, 9ae4a91a, f2eda829]:

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

Minor Changes

• #2456 500cdd82 Thanks @billyjanitsch! - Support typings for Jest v27

Patch Changes

• #2457 218e4f78 Thanks @jcleefw! - Add RegExp as a valid type for the target option accepted by toHaveStyleRule.

Patch Changes

• #2498 e5beae8e Thanks @Andarist! - Fixed an edge case issue with incorrect rules being generated. When a context selector (&) was used not at the beginning of a selector (which is not valid SCSS but is allowed by the Stylis parser that we are using) within a group of selectors containing a pseudoclass then it was not replaced correctly with the current context selector.

• #2500 eda5e687 Thanks @Jarred-Sumner! - Fix error loading @emotion/react in alternative JS environments

• Updated dependencies [e5beae8e, 9ae4a91a, f2eda829]:

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

Patch Changes

• #2353 d7d768e0 Thanks @iChenLei! - implement automatic adding of jsxImportSource pragma definition

Patch Changes

• #2498 e5beae8e Thanks @Andarist! - Fixed an edge case issue with incorrect rules being generated. When a context selector (&) was used not at the beginning of a selector (which is not valid SCSS but is allowed by the Stylis parser that we are using) within a group of selectors containing a pseudoclass then it was not replaced correctly with the current context selector.

• #2493 9ae4a91a Thanks @Andarist! - Improved the declared types related to Stylis. This should improve the compatibility with the types published in @types/stylis.

• Updated dependencies [f2eda829]:

  • @emotion/[email protected]

Patch Changes

• #2441 24557d9d Thanks @garronej! - Exposed __unsafe_useEmotionCache which can be used to access the current Emotion's cache in an easier way than before. Using this might break 0-config SSR and is not recommended to be used unless there you know what you are doing and you are OK with the mentioned downside.

• #2424 cd25b62d Thanks @tills13! - Use theme context when rendering components at all times. This removes a conditional usage of a React hook that could break Rules of Hooks in some scenarios.

• #2428 a69929d6 Thanks @eps1lon! - Added display names to public React contexts in development builds. This helps to recognize them in React Developer Tools.

• Updated dependencies [405af5ca]:

  • @emotion/[email protected]

Patch Changes

• #2393 405af5ca Thanks @layershifter! - Do not log failed rule insertions in the speedy mode for even more vendor-prefixed pseudo-elements/classes like :-moz-focus-inner, :-moz-focusring, and :-ms-clear.

Patch Changes

• #2361 38f9d44f Thanks @danieldelcore, @mitchellhamilton! - Fixed moving of client-side inserted style tags from Emotion 10 when intending to hydrate Emotion 11 styles resulting in losing styles in production

Minor Changes

• #2334 7d9e74f8 Thanks @mnajdova! - Added extractCriticalToChunks that allows the Global component to remove styles on unmount unlike extractCritical along with constructStyleTagsFromChunks to render the chunks to style tags.

Patch Changes

• #2334 7d9e74f8 Thanks @Andarist! - The Global component no longer replaces style elements from server-rendering on first mount and instead reuses the server-side rendered style element

• Updated dependencies [38f9d44f]:

  • @emotion/[email protected]

Minor Changes

• 36a51c27 #2340 Thanks @Andarist! - Added support for label extraction from object methods.

Patch Changes

• 36a51c27 #2340 Thanks @Andarist! - Fixed a crash when extracting labels from object properties with string literal keys in certain situations.

• Updated dependencies [662f0e0f, 830dd0e6]:

  • @emotion/[email protected]

Patch Changes

• 4e911edb #2336 Thanks @iChenLei! - Use displayName when printing shallowly rendered elements with css prop.