Factor out flattenDeep from injectAndGetClassName

In my profiling, calling flattenDeep in here takes 1437ms out of
3418ms, and that's with already flattened arrays. By refactoring this
code, we can actually avoid a lot of the work done here and make this
faster. This change drops css() down from 3418ms to 2045ms.

Author: lencioni

src/inject.js

@@ -3,12 +3,16 @@ import asap from 'asap';
 
 import OrderedElements from './ordered-elements';
 import {generateCSS} from './generate';
-import {flattenDeep, hashObject} from './util';
+import {hashObject} from './util';
 
 /* ::
 import type { SheetDefinition, SheetDefinitions } from './index.js';
 import type { MaybeSheetDefinition } from './exports.js';
 import type { SelectorHandler } from './generate.js';
+type ProcessedStyleDefinitions = {
+  classNameBits: Array<string>,
+  definitionBits: Array<Object>,
+};
 */
 
 // The current <style> tag we are inserting into, or null if we haven't
@@ -136,24 +140,26 @@ let injectionBuffer = "";
 let isBuffering = false;
 
 const injectGeneratedCSSOnce = (key, generatedCSS) => {
-    if (!alreadyInjected[key]) {
-        if (!isBuffering) {
-            // We should never be automatically buffering on the server (or any
-            // place without a document), so guard against that.
-            if (typeof document === "undefined") {
-                throw new Error(
-                    "Cannot automatically buffer without a document");
-            }
+    if (alreadyInjected[key]) {
+        return;
+    }
 
-            // If we're not already buffering, schedule a call to flush the
-            // current styles.
-            isBuffering = true;
-            asap(flushToStyleTag);
+    if (!isBuffering) {
+        // We should never be automatically buffering on the server (or any
+        // place without a document), so guard against that.
+        if (typeof document === "undefined") {
+            throw new Error(
+                "Cannot automatically buffer without a document");
         }
 
-        injectionBuffer += generatedCSS;
-        alreadyInjected[key] = true;
+        // If we're not already buffering, schedule a call to flush the
+        // current styles.
+        isBuffering = true;
+        asap(flushToStyleTag);
     }
+
+    injectionBuffer += generatedCSS;
+    alreadyInjected[key] = true;
 }
 
 export const injectStyleOnce = (
@@ -163,13 +169,15 @@ export const injectStyleOnce = (
     useImportant /* : boolean */,
     selectorHandlers /* : SelectorHandler[] */ = []
 ) => {
-    if (!alreadyInjected[key]) {
-        const generated = generateCSS(
-            selector, definitions, selectorHandlers,
-            stringHandlers, useImportant);
-
-        injectGeneratedCSSOnce(key, generated);
+    if (alreadyInjected[key]) {
+        return;
     }
+
+    const generated = generateCSS(
+        selector, definitions, selectorHandlers,
+        stringHandlers, useImportant);
+
+    injectGeneratedCSSOnce(key, generated);
 };
 
 export const reset = () => {
@@ -211,6 +219,25 @@ export const addRenderedClassNames = (classNames /* : string[] */) => {
     });
 };
 
+const processStyleDefinitions = (
+  styleDefinitions /* : any[] */,
+  result /* : ProcessedStyleDefinitions */
+) /* : void */ => {
+    for (let i = 0; i < styleDefinitions.length; i += 1) {
+        // Filter out falsy values from the input, to allow for
+        // `css(a, test && c)`
+        if (styleDefinitions[i]) {
+            if (Array.isArray(styleDefinitions[i])) {
+                // We've encountered an array, so let's recurse
+                processStyleDefinitions(styleDefinitions[i], result);
+            } else {
+                result.classNameBits.push(styleDefinitions[i]._name);
+                result.definitionBits.push(styleDefinitions[i]._definition);
+            }
+        }
+    }
+};
+
 /**
  * Inject styles associated with the passed style definition objects, and return
  * an associated CSS class name.
@@ -226,28 +253,23 @@ export const injectAndGetClassName = (
     styleDefinitions /* : MaybeSheetDefinition[] */,
     selectorHandlers /* : SelectorHandler[] */
 ) /* : string */ => {
-    styleDefinitions = flattenDeep(styleDefinitions);
+    const processedStyleDefinitions /* : ProcessedStyleDefinitions */ = {
+        classNameBits: [],
+        definitionBits: [],
+    };
+    // Mutates processedStyleDefinitions
+    processStyleDefinitions(styleDefinitions, processedStyleDefinitions);
 
-    const classNameBits = [];
-    const definitionBits = [];
-    for (let i = 0; i < styleDefinitions.length; i += 1) {
-        // Filter out falsy values from the input, to allow for
-        // `css(a, test && c)`
-        if (styleDefinitions[i]) {
-            classNameBits.push(styleDefinitions[i]._name);
-            definitionBits.push(styleDefinitions[i]._definition);
-        }
-    }
     // Break if there aren't any valid styles.
-    if (classNameBits.length === 0) {
+    if (processedStyleDefinitions.classNameBits.length === 0) {
         return "";
     }
-    const className = classNameBits.join("-o_O-");
+    const className = processedStyleDefinitions.classNameBits.join("-o_O-");
 
     injectStyleOnce(
         className,
         `.${className}`,
-        definitionBits,
+        processedStyleDefinitions.definitionBits,
         useImportant,
         selectorHandlers
     );

src/util.js

@@ -21,9 +21,6 @@ export const mapObj = (
     return mappedObj;
 }
 
-export const flattenDeep = (list /* : any[] */) /* : any[] */ =>
-    list.reduce((memo, x) => memo.concat(Array.isArray(x) ? flattenDeep(x) : x), []);
-
 const UPPERCASE_RE = /([A-Z])/g;
 const UPPERCASE_RE_TO_KEBAB = (match /* : string */)  /* : string */ => `-${match.toLowerCase()}`;
 

tests/util_test.js

@@ -1,16 +1,8 @@
 import {assert} from 'chai';
 
-import {flattenDeep, kebabifyStyleName} from '../src/util.js';
+import {kebabifyStyleName} from '../src/util.js';
 
 describe('Utils', () => {
-    describe('flattenDeep', () => {
-        it('flattens arrays at any level', () => {
-            assert.deepEqual(
-                flattenDeep([[1, [2, 3, []]], 4, [[5], [6, [7]]]]),
-                [1, 2, 3, 4, 5, 6, 7]);
-        });
-    });
-
     describe('kebabifyStyleName', () => {
         it('kebabifies camelCase', () => {
             assert.equal(kebabifyStyleName('fooBarBaz'), 'foo-bar-baz');