From 84cf0a4e173ce658fc7d02319ef91608b036b8bb Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 20 Oct 2021 14:22:15 +0200
Subject: [PATCH 01/13] Add insertionPoint option in EmotionCache
---
packages/cache/src/index.js | 6 ++--
packages/cache/types/index.d.ts | 1 +
packages/sheet/README.md | 4 +++
.../__tests__/__snapshots__/index.js.snap | 28 +++++++++++++++++++
packages/sheet/__tests__/index.js | 24 ++++++++++++++++
packages/sheet/src/index.js | 13 +++++++--
6 files changed, 72 insertions(+), 4 deletions(-)
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
index 741cce9f0..afde219a0 100644
--- a/packages/cache/src/index.js
+++ b/packages/cache/src/index.js
@@ -28,7 +28,8 @@ export type Options = {
key: string,
container?: HTMLElement,
speedy?: boolean,
- prepend?: boolean
+ prepend?: boolean,
+ insertionPoint?: HTMLElement
}
let getServerStylisCache = isBrowser
@@ -252,7 +253,8 @@ let createCache = (options: Options): EmotionCache => {
container: ((container: any): HTMLElement),
nonce: options.nonce,
speedy: options.speedy,
- prepend: options.prepend
+ prepend: options.prepend,
+ insertionPoint: options.insertionPoint
}),
nonce: options.nonce,
inserted,
diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
index 12afbd87e..30279c8f9 100644
--- a/packages/cache/types/index.d.ts
+++ b/packages/cache/types/index.d.ts
@@ -37,6 +37,7 @@ export interface Options {
container?: HTMLElement
speedy?: boolean
prepend?: boolean
+ insertionPoint?: HTMLElement
}
export default function createCache(options: Options): EmotionCache
diff --git a/packages/sheet/README.md b/packages/sheet/README.md
index 79b40aafe..7f7a95178 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -51,6 +51,10 @@ This defines how rules are inserted. If it is true, rules will be inserted with
This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option.
+#### insertionPoint
+
+This defines specific dom node after which the rules are inserted into the `container`.
+
### Methods
#### insert
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index cc67d30ce..0f62a1a8c 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`StyleSheet should accept insertionPoint option 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
exports[`StyleSheet should accept prepend option 1`] = `
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index da43e50e1..5b5957ae0 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -117,6 +117,30 @@ describe('StyleSheet', () => {
head.removeChild(otherStyle)
})
+ it('should accept insertionPoint option', () => {
+ const head = safeQuerySelector('head')
+ const firstStyle = document.createElement('style')
+ firstStyle.setAttribute('id', 'first')
+ head.appendChild(firstStyle)
+
+ const thirdStyle = document.createElement('style')
+ thirdStyle.setAttribute('id', 'third')
+ head.appendChild(thirdStyle)
+
+ // the sheet should be inserted between the first and third style node
+ const sheet = new StyleSheet({
+ ...defaultOptions,
+ insertionPoint: firstStyle
+ })
+ sheet.insert(rule)
+ sheet.insert(rule2)
+ expect(document.documentElement).toMatchSnapshot()
+
+ sheet.flush()
+ head.removeChild(firstStyle)
+ head.removeChild(thirdStyle)
+ })
+
it('should be able to hydrate styles', () => {
const fooStyle = document.createElement('style')
fooStyle.textContent = '.foo { color: hotpink; }'
diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js
index eba2c1328..4722f3a04 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -44,7 +44,8 @@ export type Options = {
key: string,
container: HTMLElement,
speedy?: boolean,
- prepend?: boolean
+ prepend?: boolean,
+ insertionPoint?: HTMLElement
}
function createStyleElement(options: {
@@ -70,6 +71,7 @@ export class StyleSheet {
nonce: string | void
prepend: boolean | void
before: Element | null
+ insertionPoint: HTMLElement | void
constructor(options: Options) {
this.isSpeedy =
options.speedy === undefined
@@ -82,13 +84,20 @@ export class StyleSheet {
this.key = options.key
this.container = options.container
this.prepend = options.prepend
+ this.insertionPoint = options.insertionPoint
this.before = null
}
_insertTag = (tag: HTMLStyleElement) => {
let before
if (this.tags.length === 0) {
- before = this.prepend ? this.container.firstChild : this.before
+ if (!!this.insertionPoint) {
+ before = this.insertionPoint.nextSibling
+ } else if (this.prepend) {
+ before = this.container.firstChild
+ } else {
+ before = this.prepend ? this.container.firstChild : this.before
+ }
} else {
before = this.tags[this.tags.length - 1].nextSibling
}
From a8a38cce29ed7a61518dcb69a163ab748ea0c5bf Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 20 Oct 2021 14:29:16 +0200
Subject: [PATCH 02/13] yarn changeset
---
.changeset/sixty-balloons-build.md | 6 ++++++
1 file changed, 6 insertions(+)
create mode 100644 .changeset/sixty-balloons-build.md
diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
new file mode 100644
index 000000000..b137c87ed
--- /dev/null
+++ b/.changeset/sixty-balloons-build.md
@@ -0,0 +1,6 @@
+---
+'@emotion/cache': minor
+'@emotion/sheet': minor
+---
+
+Add insertionPoint option to the EmotionCache, to insert rules after the specified element.
From 5e801e036cca7b13d33b4ff7c326f512d63522d3 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 20 Oct 2021 14:40:31 +0200
Subject: [PATCH 03/13] yarn lint
---
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 4722f3a04..cffe9ae4d 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -91,7 +91,7 @@ export class StyleSheet {
_insertTag = (tag: HTMLStyleElement) => {
let before
if (this.tags.length === 0) {
- if (!!this.insertionPoint) {
+ if (this.insertionPoint) {
before = this.insertionPoint.nextSibling
} else if (this.prepend) {
before = this.container.firstChild
From 221c29822d6ab2c46abea03cea4cae5f59d52ae5 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Thu, 21 Oct 2021 12:09:15 +0200
Subject: [PATCH 04/13] Add tests as per view
---
.../__tests__/__snapshots__/index.js.snap | 21 ++++++++++++
packages/cache/__tests__/index.js | 34 +++++++++++++++++++
.../__tests__/__snapshots__/index.js.snap | 25 ++++++++++++++
packages/sheet/__tests__/index.js | 19 +++++++++++
4 files changed, 99 insertions(+)
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index d0dac4a7a..4ff59e688 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -1,3 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should accept insertionPoint option 1`] = `
+
+
+
+
+
+
+
+
+`;
+
exports[`throws correct error with invalid key 1`] = `"Emotion key must only contain lower case alphabetical characters and - but \\".\\" was passed"`;
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index 48ff19bef..cb1ce10a9 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -1,8 +1,42 @@
// @flow
+/** @jsx jsx */
+import 'test-utils/next-env'
+import { safeQuerySelector } from 'test-utils'
import createCache from '@emotion/cache'
+import { jsx, CacheProvider } from '@emotion/react'
+import renderer from 'react-test-renderer'
test('throws correct error with invalid key', () => {
expect(() => {
createCache({ key: '.' })
}).toThrowErrorMatchingSnapshot()
})
+
+function render(ele) {
+ return renderer.create(ele).toJSON()
+}
+
+it('should accept insertionPoint option', () => {
+ const head = safeQuerySelector('head')
+ const firstStyle = document.createElement('style')
+ firstStyle.setAttribute('id', 'first')
+ head.appendChild(firstStyle)
+
+ const thirdStyle = document.createElement('style')
+ thirdStyle.setAttribute('id', 'third')
+ head.appendChild(thirdStyle)
+
+ // the sheet should be inserted between the first and third style node
+ const cache = createCache({
+ key: 'test-insertion-point',
+ insertionPoint: firstStyle
+ })
+
+ render(
+
+
+
+ )
+
+ expect(document.documentElement).toMatchSnapshot()
+})
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index 0f62a1a8c..f25afa235 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -240,3 +240,28 @@ exports[`StyleSheet should use the container option instead of document.head to
`;
+
+exports[`StyleSheet should work if insertionPoint is last element 1`] = `
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index 5b5957ae0..74b264b38 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -141,6 +141,25 @@ describe('StyleSheet', () => {
head.removeChild(thirdStyle)
})
+ it('should work if insertionPoint is last element', () => {
+ const head = safeQuerySelector('head')
+ const lastStyle = document.createElement('style')
+ lastStyle.setAttribute('id', 'last')
+ head.appendChild(lastStyle)
+
+ // the sheet should be inserted between the first and third style node
+ const sheet = new StyleSheet({
+ ...defaultOptions,
+ insertionPoint: lastStyle
+ })
+ sheet.insert(rule)
+ sheet.insert(rule2)
+ expect(document.documentElement).toMatchSnapshot()
+
+ sheet.flush()
+ head.removeChild(lastStyle)
+ })
+
it('should be able to hydrate styles', () => {
const fooStyle = document.createElement('style')
fooStyle.textContent = '.foo { color: hotpink; }'
From 60bf5bd8d18c72acd7f5f859727ee790c9f235dd Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Thu, 21 Oct 2021 12:28:43 +0200
Subject: [PATCH 05/13] Updated changeset, improved tests
---
.changeset/sixty-balloons-build.md | 23 +++++++++++++++++++
.../__tests__/__snapshots__/index.js.snap | 2 +-
packages/cache/__tests__/index.js | 8 +++----
.../__tests__/__snapshots__/index.js.snap | 2 +-
packages/sheet/__tests__/index.js | 12 +++++-----
5 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
index b137c87ed..50dec0f85 100644
--- a/.changeset/sixty-balloons-build.md
+++ b/.changeset/sixty-balloons-build.md
@@ -4,3 +4,26 @@
---
Add insertionPoint option to the EmotionCache, to insert rules after the specified element.
+
+```
+const head = document.querySelector('head')
+
+const firstStyle = document.createElement('style')
+const lastStyle = document.createElement('style')
+head.appendChild(firstStyle)
+head.appendChild(lastStyle)
+
+// the emotion sheets should be inserted between the first and last style nodes
+const cache = createCache({
+ key: 'my-app',
+ insertionPoint: firstStyle
+})
+
+function App() {
+ return (
+
+
+
+ )
+}
+```
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 4ff59e688..2edaf6a78 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -14,7 +14,7 @@ exports[`should accept insertionPoint option 1`] = `
.test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index cb1ce10a9..717d3eb1b 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -22,11 +22,11 @@ it('should accept insertionPoint option', () => {
firstStyle.setAttribute('id', 'first')
head.appendChild(firstStyle)
- const thirdStyle = document.createElement('style')
- thirdStyle.setAttribute('id', 'third')
- head.appendChild(thirdStyle)
+ const lastStyle = document.createElement('style')
+ lastStyle.setAttribute('id', 'last')
+ head.appendChild(lastStyle)
- // the sheet should be inserted between the first and third style node
+ // the sheet should be inserted between the first and last style nodes
const cache = createCache({
key: 'test-insertion-point',
insertionPoint: firstStyle
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index f25afa235..42b0daefa 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -21,7 +21,7 @@ exports[`StyleSheet should accept insertionPoint option 1`] = `
* { box-sizing: border-box; }
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index 74b264b38..53a78ea26 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -123,11 +123,11 @@ describe('StyleSheet', () => {
firstStyle.setAttribute('id', 'first')
head.appendChild(firstStyle)
- const thirdStyle = document.createElement('style')
- thirdStyle.setAttribute('id', 'third')
- head.appendChild(thirdStyle)
+ const lastStyle = document.createElement('style')
+ lastStyle.setAttribute('id', 'last')
+ head.appendChild(lastStyle)
- // the sheet should be inserted between the first and third style node
+ // the sheet should be inserted between the first and last style nodes
const sheet = new StyleSheet({
...defaultOptions,
insertionPoint: firstStyle
@@ -138,7 +138,7 @@ describe('StyleSheet', () => {
sheet.flush()
head.removeChild(firstStyle)
- head.removeChild(thirdStyle)
+ head.removeChild(lastStyle)
})
it('should work if insertionPoint is last element', () => {
@@ -147,7 +147,7 @@ describe('StyleSheet', () => {
lastStyle.setAttribute('id', 'last')
head.appendChild(lastStyle)
- // the sheet should be inserted between the first and third style node
+ // the sheet should be inserted after the first node
const sheet = new StyleSheet({
...defaultOptions,
insertionPoint: lastStyle
From b13a72c72a4a99ace040d0aabddd1cad9d358042 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Mon, 25 Oct 2021 17:26:21 +0200
Subject: [PATCH 06/13] Update packages/sheet/src/index.js
---
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 cffe9ae4d..cd559a73a 100644
--- a/packages/sheet/src/index.js
+++ b/packages/sheet/src/index.js
@@ -96,7 +96,7 @@ export class StyleSheet {
} else if (this.prepend) {
before = this.container.firstChild
} else {
- before = this.prepend ? this.container.firstChild : this.before
+ before = this.before
}
} else {
before = this.tags[this.tags.length - 1].nextSibling
From 3fc9c88e2f40fb5d9abad2ff6016f527bfd1dfe3 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 14:28:41 +0200
Subject: [PATCH 07/13] Update packages/cache/__tests__/index.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Mateusz BurzyĆski
---
packages/cache/__tests__/index.js | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index 717d3eb1b..5f54dd021 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -18,13 +18,11 @@ function render(ele) {
it('should accept insertionPoint option', () => {
const head = safeQuerySelector('head')
- const firstStyle = document.createElement('style')
- firstStyle.setAttribute('id', 'first')
- head.appendChild(firstStyle)
- const lastStyle = document.createElement('style')
- lastStyle.setAttribute('id', 'last')
- head.appendChild(lastStyle)
+ head.innerHTML = `
+
+
+ `
// the sheet should be inserted between the first and last style nodes
const cache = createCache({
From c8fa22d5208310e0b1a34b18d79ed77cb3f9b689 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 14:36:28 +0200
Subject: [PATCH 08/13] Improve tests
---
.../__tests__/__snapshots__/index.js.snap | 6 +++++
packages/cache/__tests__/index.js | 2 +-
.../__tests__/__snapshots__/index.js.snap | 6 +++++
packages/sheet/__tests__/index.js | 24 ++++++++-----------
4 files changed, 23 insertions(+), 15 deletions(-)
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index 2edaf6a78..b090dc7f9 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -3,6 +3,8 @@
exports[`should accept insertionPoint option 1`] = `
+
+
@@ -13,9 +15,13 @@ exports[`should accept insertionPoint option 1`] = `
.test-insertion-point-83n355{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+
+
+
+
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index 5f54dd021..f8ddfa1b3 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -27,7 +27,7 @@ it('should accept insertionPoint option', () => {
// the sheet should be inserted between the first and last style nodes
const cache = createCache({
key: 'test-insertion-point',
- insertionPoint: firstStyle
+ insertionPoint: document.getElementById('first')
})
render(
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index 42b0daefa..299b903bb 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -3,6 +3,8 @@
exports[`StyleSheet should accept insertionPoint option 1`] = `
+
+
@@ -20,9 +22,13 @@ exports[`StyleSheet should accept insertionPoint option 1`] = `
* { box-sizing: border-box; }
+
+
+
+
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index 53a78ea26..ac9ab226a 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -17,6 +17,11 @@ afterEach(() => {
jest.clearAllMocks()
})
+beforeEach(() => {
+ safeQuerySelector('head').innerHTML = ''
+ safeQuerySelector('body').innerHTML = ''
+})
+
describe('StyleSheet', () => {
it('should be speedy by default in production', () => {
process.env.NODE_ENV = 'production'
@@ -98,8 +103,6 @@ describe('StyleSheet', () => {
expect(sheet.tags).toHaveLength(1)
expect(sheet.tags[0].parentNode).toBe(container)
sheet.flush()
- // $FlowFixMe
- document.body.removeChild(container)
})
it('should accept prepend option', () => {
@@ -114,31 +117,26 @@ describe('StyleSheet', () => {
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
- head.removeChild(otherStyle)
})
it('should accept insertionPoint option', () => {
const head = safeQuerySelector('head')
- const firstStyle = document.createElement('style')
- firstStyle.setAttribute('id', 'first')
- head.appendChild(firstStyle)
- const lastStyle = document.createElement('style')
- lastStyle.setAttribute('id', 'last')
- head.appendChild(lastStyle)
+ head.innerHTML = `
+
+
+ `
// the sheet should be inserted between the first and last style nodes
const sheet = new StyleSheet({
...defaultOptions,
- insertionPoint: firstStyle
+ insertionPoint: document.getElementById('first')
})
sheet.insert(rule)
sheet.insert(rule2)
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
- head.removeChild(firstStyle)
- head.removeChild(lastStyle)
})
it('should work if insertionPoint is last element', () => {
@@ -157,7 +155,6 @@ describe('StyleSheet', () => {
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
- head.removeChild(lastStyle)
})
it('should be able to hydrate styles', () => {
@@ -222,7 +219,6 @@ describe('StyleSheet', () => {
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
- head.removeChild(otherStyle)
})
it('should not crash when flushing when styles are already detached', () => {
From 1c94b6284f95bf2dbf769ce96d9f938978543101 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 14:49:30 +0200
Subject: [PATCH 09/13] Use @testing-library
---
.../__tests__/__snapshots__/index.js.snap | 37 +++++++++----------
packages/cache/__tests__/index.js | 8 +---
2 files changed, 19 insertions(+), 26 deletions(-)
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index b090dc7f9..ef764af09 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -1,30 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should accept insertionPoint option 1`] = `
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
`;
exports[`throws correct error with invalid key 1`] = `"Emotion key must only contain lower case alphabetical characters and - but \\".\\" was passed"`;
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index f8ddfa1b3..e1635a1d1 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -4,7 +4,7 @@ import 'test-utils/next-env'
import { safeQuerySelector } from 'test-utils'
import createCache from '@emotion/cache'
import { jsx, CacheProvider } from '@emotion/react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
test('throws correct error with invalid key', () => {
expect(() => {
@@ -12,10 +12,6 @@ test('throws correct error with invalid key', () => {
}).toThrowErrorMatchingSnapshot()
})
-function render(ele) {
- return renderer.create(ele).toJSON()
-}
-
it('should accept insertionPoint option', () => {
const head = safeQuerySelector('head')
@@ -36,5 +32,5 @@ it('should accept insertionPoint option', () => {
)
- expect(document.documentElement).toMatchSnapshot()
+ expect(document.head).toMatchSnapshot()
})
From 74ab823a70cbaca74d1709eb18aeb8e26c040444 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 15:04:11 +0200
Subject: [PATCH 10/13] Address comments from review
---
.changeset/sixty-balloons-build.md | 15 ++++++++-------
packages/cache/types/index.d.ts | 1 +
packages/sheet/README.md | 26 +++++++++++++++++++++++++-
packages/sheet/types/index.d.ts | 2 ++
4 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
index 50dec0f85..9b8b70c86 100644
--- a/.changeset/sixty-balloons-build.md
+++ b/.changeset/sixty-balloons-build.md
@@ -5,18 +5,19 @@
Add insertionPoint option to the EmotionCache, to insert rules after the specified element.
-```
+```jsx
const head = document.querySelector('head')
-const firstStyle = document.createElement('style')
-const lastStyle = document.createElement('style')
-head.appendChild(firstStyle)
-head.appendChild(lastStyle)
+head.innerHTML = `
+
+`
+
+const metaTag = document.querySelector("meta[name='emotion-insertion-point']")
-// the emotion sheets should be inserted between the first and last style nodes
+// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
- insertionPoint: firstStyle
+ insertionPoint: metaTag
})
function App() {
diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
index 30279c8f9..032744da1 100644
--- a/packages/cache/types/index.d.ts
+++ b/packages/cache/types/index.d.ts
@@ -36,6 +36,7 @@ export interface Options {
key: string
container?: HTMLElement
speedy?: boolean
+ /** @deprecate use `insertionPoint` instead */
prepend?: boolean
insertionPoint?: HTMLElement
}
diff --git a/packages/sheet/README.md b/packages/sheet/README.md
index 7f7a95178..0080d7514 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -53,7 +53,31 @@ This defines where rules are inserted into the `container`. By default they are
#### insertionPoint
-This defines specific dom node after which the rules are inserted into the `container`.
+This defines specific dom node after which the rules are inserted into the `container`. You can use a `meta` tag to specify the specific location:
+
+```jsx
+const head = document.querySelector('head')
+
+head.innerHTML = `
+
+`
+
+const metaTag = document.querySelector("meta[name='emotion-insertion-point']")
+
+// the emotion sheets should be inserted right after the meta tag
+const cache = createCache({
+ key: 'my-app',
+ insertionPoint: metaTag
+})
+
+function App() {
+ return (
+
+
+
+ )
+}
+```
### Methods
diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts
index 2a0ad6b77..d07ebfda4 100644
--- a/packages/sheet/types/index.d.ts
+++ b/packages/sheet/types/index.d.ts
@@ -6,7 +6,9 @@ export interface Options {
key: string
container: HTMLElement
speedy?: boolean
+ /** @deprecate use `insertionPoint` instead */
prepend?: boolean
+ insertionPoint?: HTMLElement
}
export class StyleSheet {
From 218ea87d3c7679cae996f887e9793bfec8d978af Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 15:16:53 +0200
Subject: [PATCH 11/13] Fix some flow issues
---
.changeset/sixty-balloons-build.md | 9 ++++-----
packages/cache/__tests__/index.js | 2 +-
packages/sheet/README.md | 9 ++++-----
packages/sheet/__tests__/index.js | 2 +-
4 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
index 9b8b70c86..c8d9419e9 100644
--- a/.changeset/sixty-balloons-build.md
+++ b/.changeset/sixty-balloons-build.md
@@ -8,16 +8,15 @@ Add insertionPoint option to the EmotionCache, to insert rules after the specifi
```jsx
const head = document.querySelector('head')
-head.innerHTML = `
-
-`
+const emotionInsertionPoint = document.createElement('meta')
+emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
-const metaTag = document.querySelector("meta[name='emotion-insertion-point']")
+head.appendChild(emotionInsertionPoint)
// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
- insertionPoint: metaTag
+ insertionPoint: emotionInsertionPoint
})
function App() {
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index e1635a1d1..df01a6c6f 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -23,7 +23,7 @@ it('should accept insertionPoint option', () => {
// the sheet should be inserted between the first and last style nodes
const cache = createCache({
key: 'test-insertion-point',
- insertionPoint: document.getElementById('first')
+ insertionPoint: safeQuerySelector('first')
})
render(
diff --git a/packages/sheet/README.md b/packages/sheet/README.md
index 0080d7514..10e60e4ff 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -58,16 +58,15 @@ This defines specific dom node after which the rules are inserted into the `cont
```jsx
const head = document.querySelector('head')
-head.innerHTML = `
-
-`
+const emotionInsertionPoint = document.createElement('meta')
+emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
-const metaTag = document.querySelector("meta[name='emotion-insertion-point']")
+head.appendChild(emotionInsertionPoint)
// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
- insertionPoint: metaTag
+ insertionPoint: emotionInsertionPoint
})
function App() {
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index ac9ab226a..b0d074d8c 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -130,7 +130,7 @@ describe('StyleSheet', () => {
// the sheet should be inserted between the first and last style nodes
const sheet = new StyleSheet({
...defaultOptions,
- insertionPoint: document.getElementById('first')
+ insertionPoint: safeQuerySelector('first')
})
sheet.insert(rule)
sheet.insert(rule2)
From ef3412f4d35501407f703bbb6368694b06683313 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 27 Oct 2021 15:26:58 +0200
Subject: [PATCH 12/13] fix selectors
---
packages/cache/__tests__/index.js | 2 +-
packages/sheet/__tests__/index.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
index df01a6c6f..a1c8fd8db 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -23,7 +23,7 @@ it('should accept insertionPoint option', () => {
// the sheet should be inserted between the first and last style nodes
const cache = createCache({
key: 'test-insertion-point',
- insertionPoint: safeQuerySelector('first')
+ insertionPoint: safeQuerySelector('#first')
})
render(
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
index b0d074d8c..5b1b23c43 100644
--- a/packages/sheet/__tests__/index.js
+++ b/packages/sheet/__tests__/index.js
@@ -130,7 +130,7 @@ describe('StyleSheet', () => {
// the sheet should be inserted between the first and last style nodes
const sheet = new StyleSheet({
...defaultOptions,
- insertionPoint: safeQuerySelector('first')
+ insertionPoint: safeQuerySelector('#first')
})
sheet.insert(rule)
sheet.insert(rule2)
From 61fcc7f7c641ca4e38026b6d08d948d7b515150f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?=
Date: Wed, 3 Nov 2021 08:39:56 +0100
Subject: [PATCH 13/13] small tweaks
---
.changeset/sixty-balloons-build.md | 2 ++
packages/sheet/README.md | 4 ++++
2 files changed, 6 insertions(+)
diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
index c8d9419e9..5e57f918e 100644
--- a/.changeset/sixty-balloons-build.md
+++ b/.changeset/sixty-balloons-build.md
@@ -8,8 +8,10 @@ Add insertionPoint option to the EmotionCache, to insert rules after the specifi
```jsx
const head = document.querySelector('head')
+//
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
+emotionInsertionPoint.setAttribute('content', '')
head.appendChild(emotionInsertionPoint)
diff --git a/packages/sheet/README.md b/packages/sheet/README.md
index 10e60e4ff..328e78db3 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -49,6 +49,8 @@ This defines how rules are inserted. If it is true, rules will be inserted with
#### prepend
+**Deprecated:** Please use `insertionPoint` option instead.
+
This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option.
#### insertionPoint
@@ -58,8 +60,10 @@ This defines specific dom node after which the rules are inserted into the `cont
```jsx
const head = document.querySelector('head')
+//
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
+emotionInsertionPoint.setAttribute('content', '')
head.appendChild(emotionInsertionPoint)