feat: Optimized css in ember-app build output.

Author: Tim Lindvall

packages/@css-blocks/ember-app/src/brocolli-plugin.ts

@@ -5,6 +5,7 @@ import { unionInto } from "@opticss/util";
 import mergeTrees = require("broccoli-merge-trees");
 import type { InputNode } from "broccoli-node-api";
 import Filter = require("broccoli-persistent-filter");
+import Plugin = require("broccoli-plugin");
 import type { PluginOptions } from "broccoli-plugin/dist/interfaces";
 import debugGenerator from "debug";
 import * as FSTree from "fs-tree-diff";
@@ -123,3 +124,31 @@ export class CSSBlocksApplicationPlugin extends Filter {
       `);
   }
 }
+
+/**
+ * A plugin that is used during the CSS preprocess step to merge in the CSS Blocks optimized content
+ * with application styles and the existing css tree.
+ *
+ * This plugin expects two broccoli nodes, in the following order...
+ * 1) The result of the CSSBlocksApplicationPlugin.
+ * 2) The css tree, passed in to `preprocessTree()`.
+ *
+ * The result of this plugin will be a file in app/styles/app.css that includes existing content appended
+ * with the contents of css-blocks.css. This should be merged with the existing css tree to overwrite
+ * the app.css file with this one.
+ */
+export class CSSBlocksStylesProcessorPlugin extends Plugin {
+  async build() {
+    // Read the optimized CSS Blocks styles file, generated previously by the CSSBlocksApplicationPlugin.
+    // There should only be one css-blocks.css file.
+    const blocksFileEntry = this.input.at(0).entries(".", {globs: ["**/css-blocks.css"]})[0];
+
+    // And read the application CSS that was previously built by Ember and ignored by CSS Blocks.
+    const blocksFileContents = this.input.at(0).readFileSync(blocksFileEntry.relativePath, { encoding: "utf8" });
+    const appCssFileContents = this.input.at(1).readFileSync("app/styles/app.css", { encoding: "utf8" });
+
+    // Now, write out the combined result of the application CSS and CSS Blocks contents.
+    this.output.mkdirSync("app/styles", { recursive: true });
+    this.output.writeFileSync("app/styles/app.css", `${appCssFileContents}${blocksFileContents}`);
+  }
+}

packages/@css-blocks/ember-app/src/index.ts

@@ -1,11 +1,12 @@
 import BroccoliDebug = require("broccoli-debug");
 import funnel = require("broccoli-funnel");
+import mergeTrees = require("broccoli-merge-trees");
 import EmberApp from "ember-cli/lib/broccoli/ember-app";
 import type Addon from "ember-cli/lib/models/addon";
 import type { AddonImplementation, ThisAddon } from "ember-cli/lib/models/addon";
 import Project from "ember-cli/lib/models/project";
 
-import { CSSBlocksApplicationPlugin } from "./brocolli-plugin";
+import { CSSBlocksApplicationPlugin, CSSBlocksStylesProcessorPlugin } from "./brocolli-plugin";
 
 interface AddonEnvironment {
   parent: Addon | EmberApp;
@@ -19,6 +20,7 @@ interface CSSBlocksApplicationAddon {
   _modulePrefix(): string;
   env: AddonEnvironment | undefined;
   getEnv(parent): AddonEnvironment;
+  broccoliAppPluginInstance: CSSBlocksApplicationPlugin | undefined;
 }
 
 /**
@@ -60,6 +62,12 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
 
   env: undefined,
 
+  /**
+   * The instance of the CSSBlocksApplicationPlugin. This instance is
+   * generated during the JS tree and is needed for the CSS tree.
+   */
+  broccoliAppPluginInstance: undefined,
+
   /**
    * Initalizes this addon instance for use.
    * @param parent - The project or addon that directly depends on this addon.
@@ -128,14 +136,28 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
   preprocessTree(type, tree) {
     // tslint:disable-next-line:prefer-unknown-to-any
     let env = this.env!;
+
     if (type === "js") {
       if (env.isApp) {
-        let appAndAddonTree = new CSSBlocksApplicationPlugin(env.modulePrefix, [env.app.addonTree(), tree], {});
-        let debugTree = new BroccoliDebug(appAndAddonTree, `css-blocks:optimized`);
+        this.broccoliAppPluginInstance = new CSSBlocksApplicationPlugin(env.modulePrefix, [env.app.addonTree(), tree], {});
+        let debugTree = new BroccoliDebug(this.broccoliAppPluginInstance, `css-blocks:optimized`);
         return funnel(debugTree, {srcDir: env.modulePrefix, destDir: env.modulePrefix});
       } else {
         return tree;
       }
+    } else if (type === "css") {
+      // We can't do much if we don't have the result from CSSBlocksApplicationPlugin.
+      // This should never happen because the JS tree is processed before the CSS tree,
+      // but just in case....
+      if (!env.isApp) {
+        return tree;
+      }
+      if (!this.broccoliAppPluginInstance) {
+        throw new Error("[css-blocks/ember-app] The CSS tree ran before the JS tree, so the CSS tree doesn't have the contents for CSS Blocks files. This shouldn't ever happen, but if it does, please file an issue with us!");
+      }
+      // Get the combined CSS file
+      const cssBlocksContentsTree = new CSSBlocksStylesProcessorPlugin([this.broccoliAppPluginInstance, tree]);
+      return new BroccoliDebug(mergeTrees([tree, cssBlocksContentsTree], { overwrite: true }), "css-blocks:css-preprocess");
     } else {
       return tree;
     }