chore: refactor style injection

Author: bahmutov

.vscode/settings.json

@@ -18,7 +18,9 @@
     "titleBar.inactiveForeground": "#15202b99",
     "statusBar.background": "#7e9c00",
     "statusBarItem.hoverBackground": "#556900",
-    "statusBar.foreground": "#15202b"
+    "statusBar.foreground": "#15202b",
+    "statusBar.border": "#7e9c00",
+    "titleBar.border": "#7e9c00"
   },
   "peacock.color": "#7e9c00",
   "javascript.updateImportsOnFileMove.enabled": "never",

lib/index.d.ts

@@ -9,6 +9,24 @@ interface ReactModule {
   source: string
 }
 
+/**
+ * Additional styles to inject into the document.
+ * A component might need 3rd party libraries from CDN,
+ * local CSS files and custom styles.
+ */
+interface StyleOptions {
+  stylesheets: string | string[]
+  style: string
+  cssFile: string
+}
+
+interface MountReactComponentOptions {
+  alias: string
+  ReactDom: typeof ReactDOM
+}
+
+type MountOptions = Partial<StyleOptions & MountReactComponentOptions>
+
 /**
  * The `type` property from the transpiled JSX object.
  * @example

lib/index.ts

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import ReactDOM, { unmountComponentAtNode } from 'react-dom'
 import getDisplayName from './getDisplayName'
+import { injectStylesBeforeElement } from './utils'
 
 function checkMountModeEnabled() {
   // @ts-ignore
@@ -11,50 +12,13 @@ function checkMountModeEnabled() {
   }
 }
 
-interface MountOptions {
-  alias?: string
-  ReactDom?: typeof ReactDOM
-  stylesheets?: string | string[]
-  style?: string
-  cssFile?: string
-}
-
 /**
  * Inject custom style text or CSS file or 3rd party style resources
  */
 const injectStyles = (options: MountOptions) => () => {
   const document = cy.state('document')
-
   const el = document.getElementById('cypress-jsdom')
-
-  // insert any custom global styles before the component
-  if (typeof options.stylesheets === 'string') {
-    options.stylesheets = [options.stylesheets]
-  }
-  if (Array.isArray(options.stylesheets)) {
-    // console.log('adding stylesheets')
-    options.stylesheets.forEach(href => {
-      const link = document.createElement('link')
-      link.type = 'text/css'
-      link.rel = 'stylesheet'
-      link.href = href
-      document.body.insertBefore(link, el)
-    })
-  }
-
-  if (options.style) {
-    const style = document.createElement('style')
-    style.appendChild(document.createTextNode(options.style))
-    document.body.insertBefore(style, el)
-  }
-
-  if (options.cssFile) {
-    return cy.readFile(options.cssFile).then(css => {
-      const style = document.createElement('style')
-      style.appendChild(document.createTextNode(css))
-      document.body.appendChild(style)
-    })
-  }
+  return injectStylesBeforeElement(options, document, el)
 }
 
 /**

lib/utils.ts

@@ -0,0 +1,38 @@
+/**
+ * Injects custom style text or CSS file or 3rd party style resources
+ * into the given document.
+ */
+export const injectStylesBeforeElement = (
+  options: Partial<StyleOptions>,
+  document: Document,
+  el: HTMLElement,
+) => {
+  // insert any custom global styles before the component
+  if (typeof options.stylesheets === 'string') {
+    options.stylesheets = [options.stylesheets]
+  }
+  if (Array.isArray(options.stylesheets)) {
+    // console.log('adding stylesheets')
+    options.stylesheets.forEach(href => {
+      const link = document.createElement('link')
+      link.type = 'text/css'
+      link.rel = 'stylesheet'
+      link.href = href
+      document.body.insertBefore(link, el)
+    })
+  }
+
+  if (options.style) {
+    const style = document.createElement('style')
+    style.appendChild(document.createTextNode(options.style))
+    document.body.insertBefore(style, el)
+  }
+
+  if (options.cssFile) {
+    return cy.readFile(options.cssFile).then(css => {
+      const style = document.createElement('style')
+      style.appendChild(document.createTextNode(css))
+      document.body.insertBefore(style, el)
+    })
+  }
+}