diff --git a/.changeset/sixty-balloons-build.md b/.changeset/sixty-balloons-build.md
new file mode 100644
index 000000000..5e57f918e
--- /dev/null
+++ b/.changeset/sixty-balloons-build.md
@@ -0,0 +1,31 @@
+---
+'@emotion/cache': minor
+'@emotion/sheet': minor
+---
+
+Add insertionPoint option to the EmotionCache, to insert rules after the specified element.
+
+```jsx
+const head = document.querySelector('head')
+
+//
+const emotionInsertionPoint = document.createElement('meta')
+emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
+emotionInsertionPoint.setAttribute('content', '')
+
+head.appendChild(emotionInsertionPoint)
+
+// the emotion sheets should be inserted right after the meta tag
+const cache = createCache({
+ key: 'my-app',
+ insertionPoint: emotionInsertionPoint
+})
+
+function App() {
+ return (
+
+
+
+ )
+}
+```
diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
index d0dac4a7a..ef764af09 100644
--- a/packages/cache/__tests__/__snapshots__/index.js.snap
+++ b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -1,3 +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 48ff19bef..a1c8fd8db 100644
--- a/packages/cache/__tests__/index.js
+++ b/packages/cache/__tests__/index.js
@@ -1,8 +1,36 @@
// @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 { render } from '@testing-library/react'
test('throws correct error with invalid key', () => {
expect(() => {
createCache({ key: '.' })
}).toThrowErrorMatchingSnapshot()
})
+
+it('should accept insertionPoint option', () => {
+ const head = safeQuerySelector('head')
+
+ head.innerHTML = `
+
+
+ `
+
+ // the sheet should be inserted between the first and last style nodes
+ const cache = createCache({
+ key: 'test-insertion-point',
+ insertionPoint: safeQuerySelector('#first')
+ })
+
+ render(
+
+
+
+ )
+
+ expect(document.head).toMatchSnapshot()
+})
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..032744da1 100644
--- a/packages/cache/types/index.d.ts
+++ b/packages/cache/types/index.d.ts
@@ -36,7 +36,9 @@ export interface Options {
key: string
container?: HTMLElement
speedy?: boolean
+ /** @deprecate use `insertionPoint` instead */
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..328e78db3 100644
--- a/packages/sheet/README.md
+++ b/packages/sheet/README.md
@@ -49,8 +49,39 @@ 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
+
+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')
+
+//
+const emotionInsertionPoint = document.createElement('meta')
+emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
+emotionInsertionPoint.setAttribute('content', '')
+
+head.appendChild(emotionInsertionPoint)
+
+// the emotion sheets should be inserted right after the meta tag
+const cache = createCache({
+ key: 'my-app',
+ insertionPoint: emotionInsertionPoint
+})
+
+function App() {
+ return (
+
+
+
+ )
+}
+```
+
### Methods
#### insert
diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
index cc67d30ce..299b903bb 100644
--- a/packages/sheet/__tests__/__snapshots__/index.js.snap
+++ b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`StyleSheet should accept insertionPoint option 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`StyleSheet should accept prepend option 1`] = `
@@ -212,3 +246,28 @@ exports[`StyleSheet should use the container option instead of document.head to
`;
+
+exports[`StyleSheet should work if insertionPoint is last element 1`] = `
+
+
+
+
+
+
+
+