Add compile-time option for class minification

Author: Gil Birman

README.md

@@ -594,6 +594,11 @@ css(styles2.globals);
 
 It isn't determinate whether divs will be red or blue.
 
+## Minify class names
+
+Minify class names by setting the environment variable `process.env.APHRODITE_KEYS` 
+to the string value `MINIFIED`. 
+
 # Tools
 
 - [Aphrodite output tool](https://output.jsbin.com/qoseye) - Paste what you pass to `StyleSheet.create` and see the generated CSS

src/exports.js

@@ -21,9 +21,8 @@ const StyleSheet = {
     create(sheetDefinition /* : SheetDefinition */) {
         return mapObj(sheetDefinition, ([key, val]) => {
             return [key, {
-                // TODO(emily): Make a 'production' mode which doesn't prepend
-                // the class name here, to make the generated CSS smaller.
-                _name: `${key}_${hashObject(val)}`,
+                _name: process.env.APHRODITE_KEYS !== 'MINIFIED' ?
+                    `${key}_${hashObject(val)}` : `_${hashObject(val)}`,
                 _definition: val
             }];
         });

tests/index_test.js

@@ -229,6 +229,32 @@ describe('StyleSheet.create', () => {
 
         assert.ok(sheet.empty._name);
     });
+
+    describe('process.env.APHRODITE_KEYS === \'MINIFIED\'', () => {
+        beforeEach(() => {
+            process.env.APHRODITE_KEYS = 'MINIFIED';
+        });
+
+        afterEach(() => {
+            delete process.env.APHRODITE_KEYS;
+        });
+
+        it('hashes style names correctly', () => {
+            const sheet = StyleSheet.create({
+                test: {
+                    color: 'red',
+                    height: 20,
+
+                    ':hover': {
+                        color: 'blue',
+                        width: 40,
+                    },
+                },
+            });
+
+            assert.equal(sheet.test._name, '_j5rvvh');
+        });
+    })
 });
 
 describe('rehydrate', () => {