Add prepend option to createCache

emotion-js · Aug 15, 2019 · 1fe49ea · 1fe49ea
1 parent 1ea9b3a
commit 1fe49ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/cache/README.md b/packages/cache/README.md
@@ -56,3 +56,9 @@ The prefix before class names. It will also be set as the value of the `data-emo
 `HTMLElement`
 
 A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
+
+### `prepend`
+
+`boolean`
+
+A string representing whether to prepend rather than append style tags into the specified container DOM node.
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
@@ -19,7 +19,8 @@ export type Options = {
   prefix?: PrefixOption,
   key?: string,
   container?: HTMLElement,
-  speedy?: boolean
+  speedy?: boolean,
+  prepend?: boolean
 }
 
 let rootServerStylisCache = {}
@@ -240,7 +241,8 @@ let createCache = (options?: Options): EmotionCache => {
       key,
       container,
       nonce: options.nonce,
-      speedy: options.speedy
+      speedy: options.speedy,
+      prepend: options.prepend
     }),
     nonce: options.nonce,
     inserted,

diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js
@@ -43,7 +43,8 @@ export type Options = {
   nonce?: string,
   key: string,
   container: HTMLElement,
-  speedy?: boolean
+  speedy?: boolean,
+  prepend?: boolean
 }
 
 function createStyleElement(options: {
@@ -66,6 +67,7 @@ export class StyleSheet {
   container: HTMLElement
   key: string
   nonce: string | void
+  prepend: boolean | void
   before: Element | null
   constructor(options: Options) {
     this.isSpeedy =
@@ -78,6 +80,7 @@ export class StyleSheet {
     // key is the value of the data-emotion attribute, it's used to identify different sheets
     this.key = options.key
     this.container = options.container
+    this.prepend = options.prepend
     this.before = null
   }
   insert(rule: string) {
@@ -92,7 +95,15 @@ export class StyleSheet {
       } else {
         before = this.tags[this.tags.length - 1].nextSibling
       }
-      this.container.insertBefore(tag, before)
+      if (this.prepend) {
+        if (before) {
+          this.container.insertBefore(tag, before)
+        } else {
+          this.container.insertBefore(tag, this.container.firstChild)
+        }
+      } else {
+        this.container.insertBefore(tag, before)
+      }
       this.tags.push(tag)
     }
     const tag = this.tags[this.tags.length - 1]