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`] = ` + + + + + + + + + + +`; 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;} + + ` // 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`] = ` + + + + + + + + ` // 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`] = ` - - - - - + + + + +