Skip to content

Commit

Permalink
Change Global component to use the StyleSheet constructor of the …
Browse files Browse the repository at this point in the history
…current `cache.sheet` (#2677)

* chore: add custom sheet

* chore: add changeset

* chore: remove unused import

* chore: apply patch

* fix inline snapshots

* Fix Flow error

* tweak changeset

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
  • Loading branch information
Jack-Works and Andarist authored Mar 10, 2022
1 parent 4266aa0 commit ff3cb16
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 4 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-dingos-design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@emotion/react': patch
---

Change `Global` component to use the `StyleSheet` constructor of the current `cache.sheet`. This is useful when `cache.sheet` is not the default implementation. Thanks to that the inner sheet constructed by `Global` can share the behavior with its "main" sheet that is hold by the `cache`.
54 changes: 52 additions & 2 deletions packages/react/__tests__/custom-cache.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// @flow
/** @jsx jsx */
import 'test-utils/next-env'
import createCache from '@emotion/cache'
import { jsx, CacheProvider } from '@emotion/react'
import { CacheProvider, Global, jsx } from '@emotion/react'
import { StyleSheet } from '@emotion/sheet'
import renderer from 'react-test-renderer'
import { safeQuerySelector } from 'test-utils'
import 'test-utils/next-env'

function stylisPlugin(element) {
if (element.type === 'decl' && element.value.startsWith('color:')) {
Expand All @@ -15,6 +17,11 @@ function render(ele) {
return renderer.create(ele).toJSON()
}

beforeEach(() => {
safeQuerySelector('head').innerHTML = ''
safeQuerySelector('body').innerHTML = ''
})

test('with custom plugins', () => {
let cache = createCache({
key: 'custom-plugins',
Expand All @@ -38,3 +45,46 @@ test('with custom plugins', () => {
/>
`)
})

test('Global should "inherit" sheet class from the cache', () => {
// https://github.com/emotion-js/emotion/issues/2675
let cache = createCache({
key: 'test',
speedy: false
})
class MySheet extends StyleSheet {
insert(rule) {
super.insert(`/** ${this.key} */${rule}`)
}
}
cache.sheet = new MySheet({
key: 'test',
container: safeQuerySelector('head')
})

render(
<CacheProvider value={cache}>
<div css={{ color: 'hotpink' }} />
<Global styles={{ body: { width: '0' } }} />
</CacheProvider>
)

expect(safeQuerySelector('head')).toMatchInlineSnapshot(`
<head>
<style
data-emotion="test-global"
data-s=""
>
/** test-global */body{width:0;}
</style>
<style
data-emotion="test"
data-s=""
>
/** test */.test-1lrxbo5{color:hotpink;}
</style>
</head>
`)
})
4 changes: 2 additions & 2 deletions packages/react/src/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { ThemeContext } from './theming'
import { insertStyles } from '@emotion/utils'
import { isBrowser } from './utils'

import { StyleSheet } from '@emotion/sheet'
import { serializeStyles } from '@emotion/serialize'

type Styles = Object | Array<Object>
Expand Down Expand Up @@ -91,7 +90,8 @@ export let Global: React.AbstractComponent<GlobalProps> =
useInsertionEffect(() => {
const key = `${cache.key}-global`

let sheet = new StyleSheet({
// use case of https://github.com/emotion-js/emotion/issues/2675
let sheet = new cache.sheet.constructor({
key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
Expand Down

0 comments on commit ff3cb16

Please sign in to comment.