chore(ssr): cleanup 'generateCss()' logic

Author: ThomasBurleson

src/lib/server/server-provider.ts

@@ -19,46 +19,6 @@ import {
   ServerMatchMedia
 } from '@angular/flex-layout';
 
-let nextId = 0;
-const IS_DEBUG_MODE = false;
-
-/**
- * create @media queries based on a virtual stylesheet
- * * Adds a unique class to each element and stores it
- *   in a shared classMap for later reuse
- * @param stylesheet the virtual stylesheet that stores styles for each
- *        element
- * @param mediaQuery the given @media CSS selector for the current breakpoint
- * @param classMap the map of HTML elements to class names to avoid duplications
- */
-function generateCss(stylesheet: Map<HTMLElement, Map<string, string|number>>,
-                     mediaQuery: string,
-                     classMap: Map<HTMLElement, string>) {
-  let styleText = IS_DEBUG_MODE ? `
-        @media ${mediaQuery} {` : `@media ${mediaQuery}{`;
-  stylesheet.forEach((styles, el) => {
-    let className = classMap.get(el);
-    if (!className) {
-      className = `${CLASS_NAME}${nextId++}`;
-      classMap.set(el, className);
-    }
-    el.classList.add(className);
-    styleText += IS_DEBUG_MODE ? `
-          .${className} {` : `.${className}{`;
-    styles.forEach((v, k) => {
-      if (v) {
-        styleText += IS_DEBUG_MODE ? `
-              ${k}: ${v};` : `${k}:${v};`;
-      }
-    });
-    styleText += IS_DEBUG_MODE ? `
-          }` : '}';
-  });
-  styleText += IS_DEBUG_MODE ? `
-        }\n` : '}';
-
-  return styleText;
-}
 
 /**
  * Activate all of the registered breakpoints in sequence, and then
@@ -139,3 +99,68 @@ export const SERVER_PROVIDERS = [
     useClass: ServerMatchMedia
   }
 ];
+
+
+let nextId = 0;
+const IS_DEBUG_MODE = false;
+
+export type StyleSheet = Map<HTMLElement, Map<string, string|number>>;
+export type ClassMap = Map<HTMLElement, string>;
+
+/**
+ * create @media queries based on a virtual stylesheet
+ * * Adds a unique class to each element and stores it
+ *   in a shared classMap for later reuse
+ * @param stylesheet the virtual stylesheet that stores styles for each
+ *        element
+ * @param mediaQuery the given @media CSS selector for the current breakpoint
+ * @param classMap the map of HTML elements to class names to avoid duplications
+ */
+function generateCss(stylesheet: StyleSheet, mediaQuery: string, classMap: ClassMap) {
+  let css = '';
+  stylesheet.forEach((styles, el) => {
+    let keyVals = '', className = getClassName(el, classMap);
+
+    styles.forEach((v, k) => {
+      keyVals += v ? format(`${k}:${v};`) : '';
+    });
+
+    // Build list of CSS styles; each with a className
+    css += format(`.${className} {`, keyVals, '}');
+  });
+
+  // Group 1 or more styles (each with className) in a specific mediaQuery
+  return format(`@media ${mediaQuery} {`, css, '}');
+}
+
+/**
+ * For debugging purposes, prefix css segment with linefeed(s) for easy
+  * debugging purposes.
+ */
+function format(...list: string[]): string {
+  let result = '';
+  list.forEach((css, i) => {
+    result += IS_DEBUG_MODE ? formatSegment(css, i != 0) : css;
+  });
+  return result;
+}
+
+function formatSegment(css: string, asPrefix: boolean = true): string {
+  return asPrefix ? '\n' + css : css + '\n';
+}
+
+/**
+ * Get className associated with CSS styling
+ * If not found, generate global className and set
+ * association.
+ */
+function  getClassName(stylesheet, classMap) {
+  let className = classMap.get(stylesheet);
+   if (!className) {
+     className = `${CLASS_NAME}${nextId++}`;
+     classMap.set(stylesheet, className);
+   }
+   stylesheet.classList.add(className);
+
+   return className;
+}