feat: Pass CSS Blocks options through Broccoli/Ember-CLI.

Author: amiller-gh

packages/@css-blocks/broccoli/src/index.ts

@@ -3,7 +3,7 @@ import * as path from "path";
 
 import { Analyzer, BlockCompiler, StyleMapping } from "@css-blocks/core";
 import { TemplateTypes } from "@opticss/template-api";
-import { Optimizer } from "opticss";
+import { OptiCSSOptions, Optimizer } from "opticss";
 import * as postcss from "postcss";
 import * as readdir from "recursive-readdir";
 
@@ -14,6 +14,7 @@ export interface BroccoliOptions {
   output: string;
   analyzer: Analyzer<keyof TemplateTypes>;
   transport: {[key: string]: object};
+  optimization?: Partial<OptiCSSOptions>;
 }
 
 class BroccoliCSSBlocks extends BroccoliPlugin {
@@ -22,7 +23,7 @@ class BroccoliCSSBlocks extends BroccoliPlugin {
   private entry: string[];
   private output: string;
   private transport: { [key: string]: object };
-  private optimizationOptions: object = {};
+  private optimizationOptions: Partial<OptiCSSOptions>;
 
   // tslint:disable-next-line:prefer-whatever-to-any
   constructor(inputNode: any, options: BroccoliOptions) {
@@ -32,6 +33,7 @@ class BroccoliCSSBlocks extends BroccoliPlugin {
     this.output = options.output;
     this.analyzer = options.analyzer;
     this.transport = options.transport;
+    this.optimizationOptions = options.optimization || {};
 
     if (!this.output) {
       throw new Error("CSS Blocks Broccoli Plugin requires an output file name.");

packages/@css-blocks/ember-cli/index.js

@@ -38,15 +38,19 @@ module.exports = {
   included(app) {
 
     this._super.included.apply(this, arguments);
+
     let options = app.options["css-blocks"] || {};
+    let parserOpts = options.parserOpts || {};
+    let analysisOpts = options.analysisOpts || {};
+    let optimizerOpts = options.optimization || {};
 
     // Ember-cli is *mostly* used with Glimmer. However, it can technically be
     // configured to use other template types. Here we default to the Glimmer
     // analyzer, but if a `getAnalyzer` function is provided we defer to the
     // user-supplied analyzer.
     let analyzer = options.getAnalyzer ?
       options.getAnalyzer(app) :
-      new GlimmerAnalyzer(new Project(app.project.root, MODULE_CONFIG));
+      new GlimmerAnalyzer(new Project(app.project.root, MODULE_CONFIG), parserOpts, analysisOpts);
 
     // TODO: Better options validation.
     if (typeof options.entry !== "string") {
@@ -66,7 +70,8 @@ module.exports = {
       entry: [options.entry],
       output: options.output,
       analyzer,
-      transport: this.transport // I hate shared memory...
+      transport: this.transport, // I hate shared memory...
+      optimization: optimizerOpts,
     });
 
     // Remove all source css-blocks stylesheets

packages/@css-blocks/playground/config/environment.js

@@ -7,4 +7,4 @@ module.exports = function(environment) {
   };
 
   return ENV;
-};
+};

packages/@css-blocks/playground/ember-cli-build.js

@@ -3,15 +3,20 @@
 const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;
 
 module.exports = function(defaults) {
-
   let app = new GlimmerApp(defaults, {
-
     'css-blocks': {
       entry: "GlimmerTest",
-      output: "src/ui/styles/css-blocks.css"
+      output: "src/ui/styles/css-blocks.css",
+      parserOpts: {},
+      analysisOpts: {},
+      optimization: {
+        rewriteIdents: true,
+        mergeDeclarations: true,
+        removeUnusedStyles: true,
+        conflictResolution: true,
+        enabled: process.env.EMBER_ENV !== 'development',
+      },
     }
-
   });
-
   return app.toTree();
-};
+};