feat: add css aliases to mounting options

Author: bahmutov

lib/index.d.ts

@@ -15,14 +15,41 @@ interface ReactModule {
  * local CSS files and custom styles.
  */
 interface StyleOptions {
+  /**
+   * Creates <link href="..." /> element for each stylesheet
+   */
   stylesheets: string | string[]
+  /**
+   * Single CSS stylesheet URL
+   */
+  stylesheet: string
+  /**
+   * Creates <style>...</style> element and inserts given CSS
+   */
   style: string
+  /**
+   * Creates <style>...</style> element for each given CSS text
+   */
+  styles: string | string[]
+  /**
+   * Loads each file and creates a <style>...</style> element
+   * with the loaded CSS
+   */
   cssFiles: string | string[]
+  /**
+   * Single CSS file to load into a <style></style> element
+   */
+  cssFile: string
 }
 
 interface MountReactComponentOptions {
   alias: string
   ReactDom: typeof ReactDOM
+  /**
+   * Log the mounting command into Cypress Command Log,
+   * true by default.
+   */
+  log: boolean
 }
 
 type MountOptions = Partial<StyleOptions & MountReactComponentOptions>

lib/utils.ts

@@ -18,10 +18,12 @@ function insertStylesheets(
 /**
  * Inserts a single stylesheet element
  */
-function insertStyles(style: string, document: Document, el: HTMLElement) {
-  const styleElement = document.createElement('style')
-  styleElement.appendChild(document.createTextNode(style))
-  document.body.insertBefore(styleElement, el)
+function insertStyles(styles: string[], document: Document, el: HTMLElement) {
+  styles.forEach(style => {
+    const styleElement = document.createElement('style')
+    styleElement.appendChild(document.createTextNode(style))
+    document.body.insertBefore(styleElement, el)
+  })
 }
 
 function insertSingleCssFile(
@@ -59,26 +61,43 @@ export const injectStylesBeforeElement = (
   document: Document,
   el: HTMLElement,
 ) => {
-  // insert any custom global styles before the component
+  // first insert all stylesheets as Link elements
+  const stylesheets = options.stylesheet ? [options.stylesheet] : []
+
   if (typeof options.stylesheets === 'string') {
     options.stylesheets = [options.stylesheets]
   }
-  if (Array.isArray(options.stylesheets)) {
-    insertStylesheets(options.stylesheets, document, el)
+  if (options.stylesheets) {
+    stylesheets.concat(options.stylesheets)
   }
 
-  if (options.style) {
-    insertStyles(options.style, document, el)
+  insertStylesheets(stylesheets, document, el)
+
+  // insert any styles as <style>...</style> elements
+  const styles = []
+  if (typeof options.style === 'string') {
+    styles.push(options.style)
+  }
+  if (typeof options.styles === 'string') {
+    styles.push(options.styles)
+  } else if (Array.isArray(options.styles)) {
+    styles.concat(options.styles)
   }
 
-  if (Array.isArray(options.cssFiles)) {
-    return insertLocalCssFiles(options.cssFiles, document, el)
+  insertStyles(styles, document, el)
+
+  // now load any css files by path and add their content
+  // as <style>...</style> elements
+  const cssFiles = []
+
+  if (typeof options.cssFile === 'string') {
+    cssFiles.push(options.cssFile)
   }
 
   if (typeof options.cssFiles === 'string') {
-    return insertSingleCssFile(options.cssFiles, document, el)
+    cssFiles.push(options.cssFiles)
+  } else if (Array.isArray(options.cssFiles)) {
+    cssFiles.concat(options.cssFiles)
   }
-
-  // force this function to have a return value from all branches
-  return cy.wrap(null)
+  return insertLocalCssFiles(cssFiles, document, el)
 }