Generate theme classes for parent theme in sub theme's mixin

Author: HeroicEric

index.js

@@ -8,5 +8,9 @@ module.exports = {
 
   postprocessTree: function(type, tree) {
     return type === 'css' ? csso(tree) : tree;
+  },
+
+  isDevelopingAddon: function() {
+    return true;
   }
 };

lib/scss-preprocessor/broccoli-import-theme-components.js

@@ -12,7 +12,8 @@ function Import(inputTree, options) {
   this.include = options.include;
   this.main = options.main;
   this.themeName = options.themeName || 'ui-base';
-  this.themePrefix = options.themePrefix || 'ui-base';
+  this.themePrefix = options.themePrefix || 'base';
+  this.parentTheme = options.parentTheme;
 }
 
 Import.prototype = Object.create(Filter.prototype);
@@ -53,19 +54,57 @@ Import.prototype.addThemeComponentClasses = function(content) {
   var inputPath = this.inputPaths[0];
   var importFiles = walkSync(inputPath, { globs: this.include });
   var themePrefix = this.themePrefix;
+  var parentThemeComponentFiles = this.parentTheme ?
+    this.parentTheme.toScssComponentFilesArray() : [];
 
-  var componentClasses = importFiles.reduce(function(string, filePath) {
-    var name = path.basename(filePath).replace(themePrefix + '--', '').replace('.scss', '');
+  var themeComponents = importFiles.map(function(filePath) {
+    return path.basename(filePath).replace(themePrefix + '--', '').replace('.scss', '');
+  });
 
-    return string += '  &--' + name + ' {\n    @include ' + name + '($theme);\n  }\n\n';
-  }, '');
+  var parentThemeComponents = parentThemeComponentFiles.map(function(filePath) {
+    return filePath.replace('components\/', '').replace('.scss', '');
+  });
 
-  var themeMixin = '@mixin ' + this.themeName + '($theme...) {\n' +
-    '  $theme: keywords($theme);\n\n' +
-    componentClasses +
-  '}';
+  var themeClasses = parentThemeComponents.reduce(function(array, component) {
+    if (themeComponents.indexOf(component) === -1) {
+      var importStatement = '  &--' + component + ' {\n    @include ' + component + '($theme);\n  }\n';
+      array = array.concat(importStatement);
+    }
+
+    return array;
+  }, []);
+
+  themeClasses = themeComponents.reduce(function(array, component) {
+    var importStatement;
+
+    if (themePrefix === 'base') {
+      importStatement = '    .' + component + ' {\n      @include ' + component + '($theme);\n    }\n';
+    } else {
+      importStatement = '  &--' + component + ' {\n    @include ' + themePrefix + '--' + component + '($theme);\n  }\n';
+    }
+
+    return array.concat(importStatement);
+  }, themeClasses);
+
+  var themeMixin = this.buildThemeMixin(themeClasses);
 
   return themeMixin;
 };
 
+Import.prototype.buildThemeMixin = function(themeClasses) {
+  if (this.themePrefix === 'base') {
+    return '@mixin ' + this.themeName + '($theme...) {\n' +
+      '  $theme: keywords($theme);\n\n' +
+      '  @at-root {\n' +
+      themeClasses.join('\n') +
+      '  }\n' +
+    '}';
+  } else {
+    return '@mixin ' + this.themeName + '($theme...) {\n' +
+      '  $theme: keywords($theme);\n\n' +
+      themeClasses.join('\n') +
+    '}';
+  }
+};
+
 module.exports = Import;

lib/scss-preprocessor/index.js

@@ -31,6 +31,7 @@ module.exports = function(tree, options) {
       main: themeMain,
       themeName: theme.name,
       themePrefix: theme.prefix,
+      parentTheme: theme.parentTheme,
       include: [path.join(theme.name, componentsNamespace, '*.scss')]
     });
 
@@ -62,8 +63,5 @@ module.exports = function(tree, options) {
   var scssTree = funnel(tree, { include: ['**/*.scss'] });
   scssTree = mergeTrees([scssTree].concat(themeTrees), { overwrite: true });
 
-  var stew = require('broccoli-stew');
-  var loggedTree = stew.debug(scssTree, { name: 'derp' });
-
-  return loggedTree;
+  return scssTree;
 };