feat(optimization): ability to use terse class names to reduce css size

Author: webark

index.js

@@ -73,9 +73,22 @@ module.exports = {
     this.appConfig = app.project.config(app.env);
     this.addonConfig = this.appConfig['ember-component-css'] || {};
     this.classicStyleDir = this.addonConfig.classicStyleDir || 'component-styles';
+    this.terseClassNames = Boolean(this.addonConfig.terseClassNames);
     this.allowedStyleExtensions = app.registry.extensionsForType('css').filter(Boolean);
   },
 
+  config: function(enviroment) {
+    var config = {
+      "ember-component-css": {
+        terseClassNames: false,
+      },
+    };
+    if (enviroment === 'production') {
+      config["ember-component-css"].terseClassNames = true;
+    }
+    return config;
+  },
+
   treeForAddon: function(tree) {
     if (this._namespacingIsEnabled()) {
       var allPodStyles = new Merge(this._allPodStyles, {
@@ -85,6 +98,7 @@ module.exports = {
 
       var podNames = new ExtractNames(allPodStyles, {
         classicStyleDir: this.classicStyleDir,
+        terseClassNames: this.terseClassNames,
         annotation: 'Walk (ember-component-css extract class names from style paths)'
       });
 
@@ -116,6 +130,7 @@ module.exports = {
       podStyles = new ProcessStyles(podStyles, {
         extensions: this.allowedStyleExtensions,
         classicStyleDir: this.classicStyleDir,
+        terseClassNames: this.terseClassNames,
         annotation: 'Filter (ember-component-css process :--component with class names)'
       });
     }

lib/component-names.js

@@ -15,9 +15,16 @@ module.exports = {
 
     return actualPath.substr(0, actualPath.lastIndexOf(terminator)).replace(pathSegementToRemove, '');
   },
-  class: function(modifiedPath, classicStyleDir) {
-    var seperator = '__',
-        className = seperator + this.path(modifiedPath, classicStyleDir).replace(/\//g, seperator);
-    return className + seperator + md5(className).slice(-5);
+
+  class: function(modifiedPath, classicStyleDir, terseClassNames) {
+    var seperator = '__';
+    var componentPath = this.path(modifiedPath, classicStyleDir);
+    var className = seperator + md5(componentPath).slice(-5);
+
+    if (!terseClassNames) {
+      className = seperator + componentPath.replace(/\//g, seperator) + className;
+    }
+
+    return className;
   }
 };

lib/pod-names.js

@@ -23,6 +23,7 @@ function PodNames(inputNode, options) {
   this.currentTree = new FSTree();
   this.podNameJson = {};
   this.classicStyleDir = options.classicStyleDir;
+  this.terseClassNames = options.terseClassNames;
 }
 
 PodNames.prototype.build = function() {
@@ -56,7 +57,7 @@ PodNames.prototype.writePodStyleName = function(patches) {
 
 PodNames.prototype.addClass = function(stylePath) {
   var componentPath = componentNames.path(stylePath, this.classicStyleDir),
-      componentClass = componentNames.class(stylePath, this.classicStyleDir);
+      componentClass = componentNames.class(stylePath, this.classicStyleDir, this.terseClassNames);
   this.podNameJson[componentPath] = componentClass;
 }
 

lib/pod-style.js

@@ -17,11 +17,12 @@ function PodStyles(inputTree, options) {
   });
   this.extensions = options.extensions;
   this.classicStyleDir = options.classicStyleDir;
+  this.terseClassNames = options.terseClassNames;
 }
 
 PodStyles.prototype.processString = function(contents, stylePath) {
   var extension = path.extname(stylePath),
-      className = componentNames.class(stylePath, this.classicStyleDir),
+      className = componentNames.class(stylePath, this.classicStyleDir, this.terseClassNames),
       strategy = 'default';
 
   switch (extension) {