feat(ember-cli): Ember cli classic (#185).

 - Make ember-cli work with classic ember apps (non-module-unification).
  - Still works for non-Ember Glimmer apps.
  - Added BEM_UNIQUE output mode where BEM classes are guaranteed unique within the same process.
  - Analyzer.analyze method accepts working directory instead of constructor. Allows Broccoli to pass working directory at runtime without creating the analyzer instance.
  - Abstract stylesheet resolver from Broccoli plugin to support both Glimmer and Ember with minimal code forks. Depend on experimental fork of glimmer-analyzer for now.
  - Transport objects are now backed by a proper Class interface instead of a POJO.
  - Abstract the addon's env configuration with getEnv and getOptions methods.
  - Use sync fs methods in broccoli and ember-cli for better build perf.
  - Glimmer helpers re-named to sensible private values.
  - Build @css-blocks/glimmer to CJS *and* AMD so Ember can import the runtime.
  - Helper runtimes are automagically injected by ember-cli addon.
  - Abstract helper names out of runtime tests for maintainability.
  - Ember-CLI Template Discovery Test suite for addons, engines (eager and lazy), and apps (real and dummy). Lazy engines and some app features are failing and skipped.
  - Bump ember-cli and associated packages to 3.3.0.
  - Have Travis test with node versions 8 and 10.
  - Add global disable option.
  - Auto-discover common preprocessor extensions for Ember's `app.css` output file.
  - Add failing test case for node modules resolution use case.

Author: amiller-gh

.travis.yml

@@ -6,7 +6,10 @@ language: node_js
 
 node_js:
   - "8"
+<<<<<<< HEAD
   - "9"
+=======
+>>>>>>> test: Have Travis use node versions 8 and 10.
   - "10"
 
 env:

package.json

@@ -27,7 +27,7 @@
     "chai": "^3.5.0",
     "husky": "^0.14.3",
     "istanbul": "^0.4.5",
-    "lerna": "^3.0.0-beta.1",
+    "lerna": "^2.11.0",
     "loader-utils": "^1.1.0",
     "markdown-toc": "^1.2.0",
     "mocha": "^3.4.2",
@@ -36,7 +36,6 @@
     "mock-require": "^2.0.2",
     "outdent": "^0.4.1",
     "perfectionist": "^2.4.0",
-    "postcss": "^6.0.21",
     "prettier": "^1.8.2",
     "remap-istanbul": "^0.9.5",
     "source-map-support": "^0.4.15",
@@ -45,7 +44,7 @@
     "tslint": "^5.9.1",
     "typedoc": "^0.11.0",
     "typedoc-plugin-monorepo": "^0.1.0",
-    "typescript": "^2.8.1",
+    "typescript": "~2.8.0",
     "watch": "^1.0.2"
   },
   "workspaces": [

packages/@css-blocks/broccoli/package.json

@@ -21,14 +21,15 @@
     "lintfix": "tslint -t msbuild --project . -c tslint.cli.json --fix",
     "coverage": "istanbul cover -i dist/src/**/*.js --dir ./build/coverage node_modules/mocha/bin/_mocha -- dist/test --opts test/mocha.opts",
     "remap": "remap-istanbul -i build/coverage/coverage.json -o coverage -t html",
-    "watch": "watch 'yarn run test' src test types-local --wait=1"
+    "watch": "watch 'yarn run test' src test --wait=1"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "@css-blocks/code-style": "^0.18.0",
-    "@css-blocks/glimmer": "^0.19.0"
+    "@css-blocks/glimmer": "^0.19.0",
+    "watch": "^1.0.2"
   },
   "dependencies": {
     "@css-blocks/core": "^0.19.0",
@@ -44,7 +45,6 @@
     "debug": "^3.1.0",
     "fs-extra": "^5.0.0",
     "opticss": "^0.3.0",
-    "postcss": "^6.0.21",
     "recursive-readdir": "^2.2.2",
     "walk-sync": "^0.3.2"
   }

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

@@ -1,69 +1,99 @@
 import * as fs from "fs-extra";
 import * as path from "path";
 
-import { Analyzer, BlockCompiler, StyleMapping } from "@css-blocks/core";
+import { Analyzer, Block, BlockCompiler, StyleMapping } from "@css-blocks/core";
 import { TemplateTypes } from "@opticss/template-api";
-import { OptiCSSOptions, Optimizer } from "opticss";
-import * as postcss from "postcss";
+
+import * as debugGenerator from "debug";
+import { OptiCSSOptions, Optimizer, postcss } from "opticss";
 import * as readdir from "recursive-readdir";
 
 import { BroccoliPlugin } from "./utils";
 
+const debug = debugGenerator("css-blocks:broccoli");
+
+export interface Transport {
+  id: string;
+  mapping?: StyleMapping<keyof TemplateTypes>;
+  blocks?: Set<Block>;
+  analyzer?: Analyzer<keyof TemplateTypes>;
+  css?: string;
+}
+
 export interface BroccoliOptions {
   entry: string[];
   output: string;
+  root: string;
   analyzer: Analyzer<keyof TemplateTypes>;
-  transport: {[key: string]: object};
+  transport: Transport;
   optimization?: Partial<OptiCSSOptions>;
 }
 
 class BroccoliCSSBlocks extends BroccoliPlugin {
 
   private analyzer: Analyzer<keyof TemplateTypes>;
-  private entry: string[];
+  private entries: string[];
   private output: string;
-  private transport: { [key: string]: object };
+  private root: string;
+  private transport: Transport;
   private optimizationOptions: Partial<OptiCSSOptions>;
-
   // tslint:disable-next-line:prefer-whatever-to-any
   constructor(inputNode: any, options: BroccoliOptions) {
     super([inputNode], { name: "broccoli-css-blocks" });
 
-    this.entry = options.entry;
-    this.output = options.output;
-    this.analyzer = options.analyzer;
+    this.entries = options.entry.slice(0);
+    this.output = options.output || "css-blocks.css";
     this.transport = options.transport;
     this.optimizationOptions = options.optimization || {};
-
-    if (!this.output) {
-      throw new Error("CSS Blocks Broccoli Plugin requires an output file name.");
-    }
+    this.analyzer = options.analyzer;
+    this.root = options.root || process.cwd();
+    this.transport.css = this.transport.css ? this.transport.css : "";
   }
 
   async build() {
     let options = this.analyzer.cssBlocksOptions;
     let blockCompiler = new BlockCompiler(postcss, options);
     let optimizer = new Optimizer(this.optimizationOptions, this.analyzer.optimizationOptions);
 
+    // When no entry points are passed, we treat *every* template as an entry point.
+    let discover = !this.entries.length;
+
     // This build step is *mostly* just a pass-through of all files!
     // QUESTION: Tom, is there a better way to do this in Broccoli?
     let files = await readdir(this.inputPaths[0]);
     for (let file of files) {
       file = path.relative(this.inputPaths[0], file);
-      await fs.ensureDir(path.join(this.outputPath, path.dirname(file)));
+
+      // If we're in Classic or Pods mode, every hbs file is an entry point.
+      if (discover && path.extname(file) === ".hbs") { this.entries.push(file); }
+
+      fs.ensureDirSync(path.join(this.outputPath, path.dirname(file)));
       try {
-        await fs.symlink(
+        fs.symlinkSync(
           path.join(this.inputPaths[0], file),
           path.join(this.outputPath, file),
         );
       } catch (e) {
         // tslint:disable-next-line:no-console
         console.log("Error linking", path.join(this.inputPaths[0], file), "to output directory.");
       }
+
     }
 
+    // The glimmer-analyzer package tries to require() package.json
+    // in the root of the directory it is passed. We pass it our broccoli
+    // tree, so it needs to contain package.json too.
+    // TODO: Ideally this is configurable in glimmer-analyzer. We can
+    //       contribute that option back to the project. However,
+    //       other template integrations may want this available too...
+    fs.writeFileSync(
+      path.join(this.outputPath, "package.json"),
+      fs.readFileSync(path.join(this.root, "package.json")),
+    );
+
     // Oh hey look, we're analyzing.
-    await this.analyzer.analyze(...this.entry);
+    this.analyzer.reset();
+    await this.analyzer.analyze(this.outputPath, this.entries);
 
     // Compile all Blocks and add them as sources to the Optimizer.
     // TODO: handle a sourcemap from compiling the block file via a preprocessor.
@@ -76,9 +106,9 @@ class BroccoliCSSBlocks extends BroccoliPlugin {
         let filename = filesystemPath || options.importer.debugIdentifier(block.identifier, options);
 
         // If this Block has a representation on disk, remove it from our output tree.
-        // TODO: This isn't working right now because `importer.filesystemPath` doesn't return the expected path...
         if (filesystemPath) {
-          await fs.remove(path.join(this.outputPath, path.relative(options.rootDir, filesystemPath)));
+          debug(`Removing block file ${filesystemPath} from output.`);
+          fs.unlinkSync(filesystemPath);
         }
 
         // Add the compiled Block file to the optimizer.
@@ -101,13 +131,9 @@ class BroccoliCSSBlocks extends BroccoliPlugin {
     this.transport.mapping = styleMapping;
     this.transport.blocks = blocks;
     this.transport.analyzer = this.analyzer;
-    this.transport.css = optimized.output;
+    this.transport.css += optimized.output.content.toString();
 
-    // Write our compiled CSS to the output tree.
-    await fs.writeFile(
-      path.join(this.outputPath, this.output),
-      optimized.output.content.toString(),
-    );
+    debug(`Compilation Finished: ${this.transport.id}`);
 
   }
 

packages/@css-blocks/broccoli/test/plugin-test.ts

@@ -1,5 +1,7 @@
-import { GlimmerAnalyzer } from "@css-blocks/glimmer";
 import * as assert from "assert";
+import * as path from "path";
+
+import { GlimmerAnalyzer } from "@css-blocks/glimmer";
 import { TempDir, buildOutput, createTempDir } from "broccoli-test-helper";
 
 import { BroccoliCSSBlocks } from "../src/index";
@@ -32,38 +34,47 @@ describe("Broccoli Plugin Test", function () {
             components: {
               [entryComponentName]: {
                 "template.hbs": `<div><h1 class="foo">Welcome to Glimmer!</h1></div>`,
-                "stylesheet.block.css": `:scope {
-                  color: red;
-                }
+                "stylesheet.css": `
+                  :scope {
+                    color: red;
+                  }
 
-                .foo {
-                  color: green;
-                }`,
+                  .foo {
+                    color: green;
+                  }
+                `,
               },
             },
           },
         },
       });
 
-      let analyzer = new GlimmerAnalyzer(input.path());
-      let transport = {};
+      let transport = { id: "test-transport" };
+      let analyzer = new GlimmerAnalyzer({}, {}, {
+        app: { name: "test" },
+        types: {
+          stylesheet: { definitiveCollection: "components" },
+          template: { definitiveCollection: "components" },
+        },
+        collections: {
+          components: { group: "ui", types: [ "template", "stylesheet" ] },
+        },
+      });
 
       let compiler = new BroccoliCSSBlocks(input.path(), {
         entry: [entryComponentName],
+        root: path.join(__dirname, "../.."),
         output: "css-blocks.css",
         transport,
         analyzer,
       });
-
-      let output = await buildOutput(compiler);
-      let files = output.read();
+      await buildOutput(compiler);
 
       assert.ok(Object.keys(transport).length, "Transport Object populated");
       assert.ok(transport["mapping"], "Mapping property is populated in Transport Object");
       assert.ok(transport["blocks"], "Blocks property is populated in Transport Object");
       assert.ok(transport["analyzer"], "Analyzer property is populated in Transport Object");
       assert.ok(transport["css"], "CSS property is populated in Transport Object");
-      assert.ok(files["css-blocks.css"], "CSS File generated");
     });
   });
 });

packages/@css-blocks/core/src/Analyzer/Analyzer.ts

@@ -50,7 +50,7 @@ export abstract class Analyzer<K extends keyof TemplateTypes> {
     this.dynamicStyles = new MultiMap();
   }
 
-  abstract analyze(...entryPoints: string[]): Promise<Analyzer<K>>;
+  abstract analyze(dir: string, entryPoints: string[]): Promise<Analyzer<K>>;
   abstract get optimizationOptions(): TemplateIntegrationOptions;
 
   // TODO: We don't really want to burn the world here.

packages/@css-blocks/core/src/BlockCompiler/ConflictResolver.ts

@@ -422,7 +422,7 @@ export class ConflictResolver {
     }
 
     // Wrap our list of CompoundSelectors in ParsedSelector containers and return.
-    return mergedSelectors.map(sel => new ParsedSelector(sel));
+    return mergedSelectors.map(sel => new ParsedSelector(sel, sel.toString()));
   }
   sourceLocation(block: Block, node: postcss.Node): SourceLocation | undefined {
     let blockPath = this.config.importer.debugIdentifier(block.identifier, this.config);

packages/@css-blocks/core/src/BlockTree/AttrValue.ts

@@ -89,6 +89,8 @@ export class AttrValue extends Style<AttrValue, Block, Attribute, never> {
     switch (config.outputMode) {
       case OutputMode.BEM:
         return `${this.parent.cssClass(config)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
+      case OutputMode.BEM_UNIQUE:
+        return `${this.parent.cssClass(config)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
       default:
         return assertNever(config.outputMode);
     }

packages/@css-blocks/core/src/BlockTree/Attribute.ts

@@ -169,8 +169,9 @@ export class Attribute extends Inheritable<Attribute, Block, BlockClass, AttrVal
   cssClass(config: ResolvedConfiguration) {
     switch (config.outputMode) {
       case OutputMode.BEM:
-        let cssClassName = this.blockClass.cssClass(config);
-        return `${cssClassName}--${this.token.name}`;
+        return `${this.blockClass.cssClass(config)}--${this.token.name}`;
+      case OutputMode.BEM_UNIQUE:
+        return `${this.blockClass.cssClass(config)}--${this.token.name}`;
       default:
         return assertNever(config.outputMode);
     }

packages/@css-blocks/core/src/BlockTree/Block.ts

@@ -1,3 +1,5 @@
+import * as crypto from "crypto";
+
 import { MultiMap, ObjectDictionary } from "@opticss/util";
 import { whatever } from "@opticss/util";
 import {
@@ -20,6 +22,24 @@ import { BlockClass } from "./BlockClass";
 import { Inheritable } from "./Inheritable";
 import { Styles } from "./Styles";
 
+// Random seed for `get_guid`. Consistent for life of process.
+const RAND_SEED = Math.floor(Math.random() * 1000);
+
+/**
+ * Generates a 5 digit, process-wide globally unique
+ * identifier from a given input identifier. This
+ * generated identifier hash will remain consistent
+ * for the life of the process that spawned it.
+ * @prop  identifier  string  Input Block identifier.
+ * @returns This Block's guid hash.
+ */
+function gen_guid(identifier: string): string {
+  return crypto.createHash("md5")
+    .update(identifier + RAND_SEED)
+    .digest("hex")
+    .slice(0, 5);
+}
+
 export class Block
   extends Inheritable<Block, Block, never, BlockClass> {
 
@@ -29,6 +49,8 @@ export class Block
   private _implements: Block[] = [];
   private hasHadNameReset = false;
 
+  public readonly guid: string;
+
   /**
    * array of paths that this block depends on and, if changed, would
    * invalidate the compiled css of this block. This is usually only useful in
@@ -45,6 +67,7 @@ export class Block
     this._dependencies = new Set<string>();
     this.rootClass = new BlockClass(ROOT_CLASS, this);
     this.stylesheet = stylesheet;
+    this.guid = gen_guid(identifier);
     this.addClass(this.rootClass);
   }
 

packages/@css-blocks/core/src/BlockTree/BlockClass.ts

@@ -198,11 +198,9 @@ export class BlockClass extends Style<BlockClass, Block, Block, Attribute> {
   public cssClass(config: ResolvedConfiguration): string {
     switch (config.outputMode) {
       case OutputMode.BEM:
-        if (this.isRoot) {
-          return `${this.block.name}`;
-        } else {
-          return `${this.block.name}__${this.name}`;
-        }
+        return this.isRoot ? `${this.block.name}` : `${this.block.name}__${this.name}`;
+      case OutputMode.BEM_UNIQUE:
+        return this.isRoot ? `${this.block.name}_${this.block.guid}` : `${this.block.name}_${this.block.guid}__${this.name}`;
       default:
         return assertNever(config.outputMode);
     }

packages/@css-blocks/core/src/configuration/OutputMode.ts

@@ -3,4 +3,5 @@
  */
 export enum OutputMode {
   BEM = "BEM",
+  BEM_UNIQUE = "BEM_UNIQUE",
 }