diff --git a/.changeset/dry-frogs-perform.md b/.changeset/dry-frogs-perform.md new file mode 100644 index 000000000..8804a2ee4 --- /dev/null +++ b/.changeset/dry-frogs-perform.md @@ -0,0 +1,5 @@ +--- +'@emotion/react': patch +--- + +Fixed styles inserted by `` component not inheriting `speedy` option from a cache passed to a wrapping ``. diff --git a/packages/react/__tests__/css.js b/packages/react/__tests__/css.js index 007f2189c..248d27f3d 100644 --- a/packages/react/__tests__/css.js +++ b/packages/react/__tests__/css.js @@ -1,8 +1,9 @@ // @flow /** @jsx jsx */ import 'test-utils/next-env' +import { safeQuerySelector } from 'test-utils' import * as React from 'react' -import { jsx, css, CacheProvider, ThemeProvider } from '@emotion/react' +import { jsx, css, Global, CacheProvider, ThemeProvider } from '@emotion/react' import { render } from '@testing-library/react' import renderer from 'react-test-renderer' import createCache from '@emotion/cache' @@ -14,6 +15,7 @@ console.warn = jest.fn() afterEach(() => { jest.clearAllMocks() + safeQuerySelector('body').innerHTML = '' }) const SomeComponent = (props: { lol: true }) => (props.lol ? 'yes' : 'no') @@ -173,6 +175,19 @@ test('can set speedy via custom cache', () => { expect(cache.sheet.tags).toHaveLength(1) }) +test('speedy option from a custom cache is inherited for styles', () => { + let cache = createCache({ + container: safeQuerySelector('body'), + speedy: true + }) + renderer.create( + + > + + ) + expect(safeQuerySelector('body style').textContent).toEqual('') +}) + test('autoLabel without babel', () => { let SomeComp = props => { return ( diff --git a/packages/react/src/global.js b/packages/react/src/global.js index 0ab8bf125..45c202675 100644 --- a/packages/react/src/global.js +++ b/packages/react/src/global.js @@ -92,7 +92,8 @@ export let Global: React.AbstractComponent< let sheet = new StyleSheet({ key: `${cache.key}-global`, nonce: cache.sheet.nonce, - container: cache.sheet.container + container: cache.sheet.container, + speedy: cache.sheet.isSpeedy }) // $FlowFixMe let node: HTMLStyleElement | null = document.querySelector(