Add minify global function to force style names minification

README.md

@@ -1,8 +1,8 @@
 # Aphrodite: Inline Styles that work
 
-[![npm version](https://badge.fury.io/js/aphrodite.svg)](https://badge.fury.io/js/aphrodite) 
-[![Build Status](https://travis-ci.org/Khan/aphrodite.svg?branch=master)](https://travis-ci.org/Khan/aphrodite) 
-[![Coverage Status](https://coveralls.io/repos/github/Khan/aphrodite/badge.svg?branch=master)](https://coveralls.io/github/Khan/aphrodite?branch=master) 
+[![npm version](https://badge.fury.io/js/aphrodite.svg)](https://badge.fury.io/js/aphrodite)
+[![Build Status](https://travis-ci.org/Khan/aphrodite.svg?branch=master)](https://travis-ci.org/Khan/aphrodite)
+[![Coverage Status](https://coveralls.io/repos/github/Khan/aphrodite/badge.svg?branch=master)](https://coveralls.io/github/Khan/aphrodite?branch=master)
 [![Gitter chat](https://img.shields.io/gitter/room/Khan/aphrodite.svg)](https://gitter.im/Khan/aphrodite)
 
 [![gzip size][gzip-badge]][unpkg-dist]
@@ -185,6 +185,23 @@ to avoid this behaviour, then instead of importing `aphrodite`, import
 import { StyleSheet, css } from 'aphrodite/no-important';
 ```
 
+## Minifying style names
+
+By default, Aphrodite will minify style names down to their hashes in production
+(`process.env.NODE_ENV === 'production'`). You can override this behavior by
+calling `minify` with `true` or `false` before calling `StyleSheet.create`.
+
+This is useful if you want to facilitate debugging in production for example.
+
+```js
+import { StyleSheet, minify } from 'aphrodite';
+
+// Always keep the full style names
+minify(false);
+
+// ... proceed to use StyleSheet.create etc.
+```
+
 ## Font Faces
 
 Creating custom font faces is a special case. Typically you need to define a global `@font-face` rule. In the case of Aphrodite we only want to insert that rule if it's actually being referenced by a class that's in the page. We've made it so that the `fontFamily` property can accept a font-face object (either directly or inside an array). A global `@font-face` rule is then generated based on the font definition.

src/exports.js

@@ -17,13 +17,26 @@ type Extension = {
 export type MaybeSheetDefinition = SheetDefinition | false | null | void
 */
 
+// True to minify classnames.
+// False to not minify classnames.
+// Unset to minify only in 'production' environment
+let forceMinify = undefined;
+const shouldMinify = () => {
+    if (forceMinify !== undefined) {
+        return forceMinify;
+    } else {
+        return process.env.NODE_ENV === 'production';
+    }
+}
+
+
 const StyleSheet = {
     create(sheetDefinition /* : SheetDefinition */) {
         return mapObj(sheetDefinition, ([key, val]) => {
             const stringVal = JSON.stringify(val);
             return [key, {
                 _len: stringVal.length,
-                _name: process.env.NODE_ENV === 'production' ?
+                _name: shouldMinify() ?
                     hashString(stringVal) : `${key}_${hashString(stringVal)}`,
                 _definition: val
             }];
@@ -131,6 +144,10 @@ const makeExports = (
         StyleSheetServer,
         StyleSheetTestUtils,
 
+        minify(shouldMinify /* : boolean */) {
+            forceMinify = shouldMinify;
+        },
+
         css(...styleDefinitions /* : MaybeSheetDefinition[] */) {
             return injectAndGetClassName(
                 useImportant, styleDefinitions, selectorHandlers);

tests/index_test.js

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   StyleSheetServer,
   StyleSheetTestUtils,
+  minify,
   css
 } from '../src/index.js';
 import { reset } from '../src/inject.js';
@@ -257,6 +258,76 @@ describe('StyleSheet.create', () => {
     })
 });
 
+describe('minify', () => {
+    describe('true', () => {
+        beforeEach(() => {
+            minify(true);
+        });
+
+        afterEach(() => {
+            minify(undefined);
+        });
+
+        it('minifies style names', () => {
+            const sheet = StyleSheet.create({
+                test: {
+                    color: 'red',
+                    height: 20,
+
+                    ':hover': {
+                        color: 'blue',
+                        width: 40,
+                    },
+                },
+            });
+
+            assert.equal(sheet.test._name, 'j5rvvh');
+        });
+    })
+
+    describe('false', () => {
+        beforeEach(() => {
+            minify(false);
+        });
+
+        afterEach(() => {
+            minify(undefined);
+        });
+
+        it('does not minifies style names', () => {
+            const sheet = StyleSheet.create({
+                test: {
+                    color: 'red',
+                    height: 20,
+
+                    ':hover': {
+                        color: 'blue',
+                        width: 40,
+                    },
+                },
+            });
+
+            assert.equal(sheet.test._name, 'test_j5rvvh');
+        });
+
+        it('does not minifies style names, even with process.env.NODE_ENV === \'production\'', () => {
+            const sheet = StyleSheet.create({
+                test: {
+                    color: 'red',
+                    height: 20,
+
+                    ':hover': {
+                        color: 'blue',
+                        width: 40,
+                    },
+                },
+            });
+
+            assert.equal(sheet.test._name, 'test_j5rvvh');
+        });
+    })
+});
+
 describe('rehydrate', () => {
     beforeEach(() => {
         global.document = jsdom.jsdom();