Skip to content
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

chore: custom sheet #2677

Merged
merged 7 commits into from
Mar 10, 2022
Merged

chore: custom sheet #2677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
04b265c
chore: add custom sheet
Jack-Works Mar 9, 2022
e638c6d
chore: add changeset
Jack-Works Mar 9, 2022
8f6c32f
chore: remove unused import
Jack-Works Mar 9, 2022
c3a2df3
chore: apply patch
Jack-Works Mar 10, 2022
1bb5167
fix inline snapshots
Andarist Mar 10, 2022
4b790e4
Fix Flow error
Andarist Mar 10, 2022
ea74c7a
tweak changeset
Andarist Mar 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/green-dingos-design.md
View file
Open in desktop
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
View file
Open in desktop
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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've noticed that you were constructing different sheet classes in the constructor of your custom implementation but perhaps that's not really needed. You can easily differentiate hashed/main and global sheets by just checking the options.key.endsWith('-global'). Based on that you can just assign some private property and branch the logic in the insert method. This way you only have to write a single StyleSheet class which might simplify your implementation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, I need to get the un-global version of the sheet so that's the easiest way, any way, thanks!

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
View file
Open in desktop
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({
Jack-Works marked this conversation as resolved.
Show resolved Hide resolved
key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
Expand Down