From 45152bc3b3e8565a19312c429b7d5e3c68340814 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Sat, 16 Apr 2022 15:23:24 -0400
Subject: [PATCH 1/9] Allow any Node, including ShadowRoot, as container
---
.../__tests__/__snapshots__/index.js.snap | 33 +++++++++++++++++++
packages/cache/__tests__/index.js | 21 ++++++++++++
packages/cache/src/index.js | 5 ++-
packages/cache/types/index.d.ts | 2 +-
.../__tests__/__snapshots__/index.js.snap | 21 ++++++++++++
packages/sheet/__tests__/index.js | 17 ++++++++++
packages/sheet/src/index.js | 4 +--
packages/sheet/types/index.d.ts | 4 +--
8 files changed, 99 insertions(+), 8 deletions(-)
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index ef764af09..a887077e2 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should accept container option 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ color: blue;
+}
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`should accept insertionPoint option 1`] = `
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index a1c8fd8db..15751f216 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -34,3 +34,24 @@ it('should accept insertionPoint option', () => {
expect(document.head).toMatchSnapshot()
})
+
+it('should accept container option', () => {
+ const body = safeQuerySelector('body')
+
+ body.innerHTML = `
+
+ `
+
+ const cache = createCache({
+ key: 'test-container',
+ container: safeQuerySelector('#container')
+ })
+
+ render(
+
+
+
+ )
+
+ expect(document.body).toMatchSnapshot()
+})
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
index afde219a0..4545d8037 100644
--- a/packages/cache/src/index.js
+++ b/packages/cache/src/index.js
@@ -92,8 +92,7 @@ let createCache = (options: Options): EmotionCache => {
}
}
let inserted = {}
- // $FlowFixMe
- let container: HTMLElement
+ let container: Node
const nodesToHydrate = []
if (isBrowser) {
container = options.container || ((document.head: any): HTMLHeadElement)
@@ -250,7 +249,7 @@ let createCache = (options: Options): EmotionCache => {
key,
sheet: new StyleSheet({
key,
- container: ((container: any): HTMLElement),
+ container: ((container: any): Node),
nonce: options.nonce,
speedy: options.speedy,
prepend: options.prepend,
diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
index 032744da1..7822587db 100644
--- a/packages/cache/types/index.d.ts
+++ b/packages/cache/types/index.d.ts
@@ -34,7 +34,7 @@ export interface Options {
nonce?: string
stylisPlugins?: Array
key: string
- container?: HTMLElement
+ container?: Node
speedy?: boolean
/** @deprecate use `insertionPoint` instead */
prepend?: boolean
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index 299b903bb..95926e0f0 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -271,3 +271,24 @@ exports[`StyleSheet should work if insertionPoint is last element 1`] = `
`;
+
+exports[`StyleSheet should work with a ShadowRoot container 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`StyleSheet should work with a ShadowRoot container 2`] = `
+HTMLCollection [
+ ,
+]
+`;
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index 5b1b23c43..5cebf0b8c 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -105,6 +105,23 @@ describe('StyleSheet', () => {
sheet.flush()
})
+ it('should work with a ShadowRoot container', () => {
+ const div = document.createElement('div')
+ // $FlowFixMe
+ document.body.appendChild(div)
+ const container = div.attachShadow({ mode: 'open' })
+ const sheet = new StyleSheet({ ...defaultOptions, container })
+ expect(sheet.container).toBe(container)
+ sheet.insert(rule)
+ expect(document.documentElement).toMatchSnapshot()
+ // The shadowRoot is not serialized in the snapshot, so we need to take a
+ // separate snapshot of the shadowRoot's children.
+ expect(container.children).toMatchSnapshot()
+ expect(sheet.tags).toHaveLength(1)
+ expect(sheet.tags[0].parentNode).toBe(container)
+ sheet.flush()
+ })
+
it('should accept prepend option', () => {
const head = safeQuerySelector('head')
const otherStyle = document.createElement('style')
diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js
index cd559a73a..b3a8d40cf 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -42,7 +42,7 @@ function sheetForTag(tag: HTMLStyleElement): CSSStyleSheet {
export type Options = {
nonce?: string,
key: string,
- container: HTMLElement,
+ container: Node,
speedy?: boolean,
prepend?: boolean,
insertionPoint?: HTMLElement
@@ -66,7 +66,7 @@ export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: HTMLStyleElement[]
- container: HTMLElement
+ container: Node
key: string
nonce: string | void
prepend: boolean | void
diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts
index d07ebfda4..1a8ab5988 100644
--- a/packages/sheet/types/index.d.ts
+++ b/packages/sheet/types/index.d.ts
@@ -4,7 +4,7 @@
export interface Options {
nonce?: string
key: string
- container: HTMLElement
+ container: Node
speedy?: boolean
/** @deprecate use `insertionPoint` instead */
prepend?: boolean
@@ -15,7 +15,7 @@ export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: Array
- container: HTMLElement
+ container: Node
key: string
nonce?: string
before?: Element | null
From 69ae447a4c1641729d86ae51a12832107414c9c8 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Sat, 16 Apr 2022 15:36:34 -0400
Subject: [PATCH 2/9] Add changeset
---
.changeset/five-balloons-sneeze.md | 6 ++++++
1 file changed, 6 insertions(+)
create mode 100644 .changeset/five-balloons-sneeze.md
diff --git a/.changeset/five-balloons-sneeze.md b/.changeset/five-balloons-sneeze.md
new file mode 100644
index 000000000..075e68cda
--- /dev/null
+++ b/.changeset/five-balloons-sneeze.md
@@ -0,0 +1,6 @@
+---
+'@emotion/cache': patch
+'@emotion/sheet': patch
+---
+
+The cache's `container` can be a `ShadowRoot`, or any other kind of `Node`
From f0101b544f74d6b5db2708a53b484190328214e5 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Sat, 16 Apr 2022 15:39:52 -0400
Subject: [PATCH 3/9] Update container types in documentation to `Node`
---
packages/cache/README.md | 2 +-
packages/sheet/README.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/cache/README.md b/packages/cache/README.md
index 1429cc68b..5a3889a21 100644
--- a/packages/cache/README.md
+++ b/packages/cache/README.md
@@ -51,7 +51,7 @@ The prefix before class names. It will also be set as the value of the `data-emo
### `container`
-`HTMLElement`
+`Node`
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.
diff --git a/packages/sheet/README.md b/packages/sheet/README.md
index 328e78db3..e4c5ba83b 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -25,7 +25,7 @@ sheet.insert('html { color: hotpink; }')
type Options = {
nonce?: string
key: string
- container: HTMLElement
+ container: Node
speedy?: boolean
prepend?: boolean
}
From cf93bddc828692a9733f7509e867a067bf453bc2 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Sat, 23 Apr 2022 08:46:48 -0400
Subject: [PATCH 4/9] Update packages/sheet/src/index.js
Co-authored-by: Sam Magura
---
packages/sheet/src/index.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js
index b3a8d40cf..8cef3a6aa 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -66,7 +66,8 @@ export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: HTMLStyleElement[]
- container: Node
+ // Using Node instead of HTMLElement since container may be a ShadowRoot
+ container: Node
key: string
nonce: string | void
prepend: boolean | void
From b2bd9074caec2737012342cc1380bcaec2a5a303 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Sat, 23 Apr 2022 08:47:01 -0400
Subject: [PATCH 5/9] Update .changeset/five-balloons-sneeze.md
Co-authored-by: Sam Magura
---
.changeset/five-balloons-sneeze.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.changeset/five-balloons-sneeze.md b/.changeset/five-balloons-sneeze.md
index 075e68cda..4b76bc1a5 100644
--- a/.changeset/five-balloons-sneeze.md
+++ b/.changeset/five-balloons-sneeze.md
@@ -3,4 +3,4 @@
'@emotion/sheet': patch
---
-The cache's `container` can be a `ShadowRoot`, or any other kind of `Node`
+`@emotion/cache` and `@emotion/sheet` now allow `container` to be a `ShadowRoot`, or any other kind of `Node`. This change only affects the TypeScript types.
From c4b6d265dee8dd6c0f5e927ee70a1915324e8733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?=
Date: Sun, 24 Apr 2022 12:09:50 +0200
Subject: [PATCH 6/9] remove a trailing whitespace
---
packages/sheet/src/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js
index 8cef3a6aa..3828c2697 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -67,7 +67,7 @@ export class StyleSheet {
ctr: number
tags: HTMLStyleElement[]
// Using Node instead of HTMLElement since container may be a ShadowRoot
- container: Node
+ container: Node
key: string
nonce: string | void
prepend: boolean | void
From dd5b5734138b257dceb5bb86b49e779c1160b055 Mon Sep 17 00:00:00 2001
From: Petra Jaros
Date: Thu, 28 Apr 2022 14:18:20 -0400
Subject: [PATCH 7/9] `before` should be a `ChildNode`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Since `Node['firstChild']` is `ChildNode`, not `Element`.
Co-authored-by: Mateusz Burzyński
---
packages/sheet/types/index.d.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts
index 1a8ab5988..4e0c258e2 100644
--- a/packages/sheet/types/index.d.ts
+++ b/packages/sheet/types/index.d.ts
@@ -18,7 +18,7 @@ export class StyleSheet {
container: Node
key: string
nonce?: string
- before?: Element | null
+ before?: ChildNode | null
constructor(options?: Options)
insert(rule: string): void
flush(): void
From 083417f1e2d9d6249e91f5787f3db0425d37c879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?=
Date: Thu, 28 Apr 2022 23:34:06 +0200
Subject: [PATCH 8/9] Add `.d.ts` test
---
packages/sheet/types/tests.ts | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/packages/sheet/types/tests.ts b/packages/sheet/types/tests.ts
index 50720597d..68dcab673 100644
--- a/packages/sheet/types/tests.ts
+++ b/packages/sheet/types/tests.ts
@@ -51,3 +51,9 @@ styleSheet.flush()
styleSheet.flush(undefined as any)
// $ExpectError
styleSheet.flush(...(undefined as any as Array))
+
+const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' })
+const shadowStyleSheet = new StyleSheet({
+ key: 'abc',
+ container: shadowRoot
+})
From 21d4bd887ba6eb99f6f25885830de6b4707617b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?=
Date: Thu, 28 Apr 2022 23:35:14 +0200
Subject: [PATCH 9/9] tweak changeset
---
.changeset/five-balloons-sneeze.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.changeset/five-balloons-sneeze.md b/.changeset/five-balloons-sneeze.md
index 4b76bc1a5..8eefc5f3e 100644
--- a/.changeset/five-balloons-sneeze.md
+++ b/.changeset/five-balloons-sneeze.md
@@ -3,4 +3,4 @@
'@emotion/sheet': patch
---
-`@emotion/cache` and `@emotion/sheet` now allow `container` to be a `ShadowRoot`, or any other kind of `Node`. This change only affects the TypeScript types.
+TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.