fix: Ember fixture app and addons for testing @css-blocks/ember.

Author: chriseppstein

package.json

@@ -3,7 +3,8 @@
   "private": true,
   "workspaces": [
     "packages/@css-blocks/*",
-    "private-packages/fixtures/*"
+    "private-packages/fixtures/*",
+    "private-packages/fixtures-ember-v2/*"
   ],
   "scripts": {
     "ci": "lerna run test",

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

@@ -39,8 +39,6 @@
     "broccoli-node-api": "^1.7.0",
     "broccoli-test-helper": "^2.0.0",
     "ember-cli-htmlbars": "^4.3.1",
-    "fs-merger": "^3.0.2",
-    "broccoli-output-wrapper": "^3.2.1",
     "typescript": "~3.8.3",
     "watch": "^1.0.2"
   },
@@ -54,12 +52,15 @@
     "@glimmer/syntax": "^0.43.0",
     "@opticss/template-api": "^0.6.3",
     "@opticss/util": "^0.7.0",
-    "broccoli-funnel": "^3.0.0",
+    "broccoli-debug": "^0.6.5",
+    "broccoli-funnel": "^3.0.2",
     "broccoli-merge-trees": "^4.0.0",
+    "broccoli-output-wrapper": "^3.2.1",
     "broccoli-plugin": "^4.0.0",
     "colors": "^1.2.1",
     "debug": "^4.1.1",
     "fs-extra": "^8.0.0",
+    "fs-merger": "^3.0.2",
     "fs-tree-diff": "^2.0.0",
     "glob": "^7.1.2",
     "opticss": "^0.7.0",

packages/@css-blocks/ember/src/AnalyzingRewriteManager.ts

@@ -84,7 +84,7 @@ export class AnalyzingRewriteManager {
     let block = this.templateBlocks[templatePath];
     let template = new HandlebarsTemplate(templatePath, templatePath);
     this.templates.set(templatePath, template);
-    let analysis = new EmberAnalysis(template, this.validationOptions);
+    let analysis = new EmberAnalysis(template, block, this.validationOptions);
     this.analyses.set(templatePath, analysis);
     return new TemplateAnalyzingRewriter(template, block, analysis, this.cssBlocksOpts, syntax);
   }
@@ -108,12 +108,9 @@ export class AnalyzingRewriteManager {
     for (let templatePath of templatePaths) {
       let block = this.templateBlocks[templatePath]!;
       let template = this.templates.get(templatePath);
-      if (!template) {
-        throw new CssBlockError(`Internal Error: Template at ${templatePath} was not yet analyzed.`);
-      }
       let analysis = this.analyses.get(templatePath);
-      if (!analysis) {
-        throw new CssBlockError(`Internal Error: Template at ${templatePath} was not yet analyzed.`);
+      if (!template || !analysis) {
+        continue; // this template didn't change so it didn't get compiled.
       }
       yield {
         template,

packages/@css-blocks/ember/src/BroccoliFileLocator.ts

@@ -17,7 +17,7 @@ export class BroccoliFileLocator implements FileLocator {
     return `broccoli-tree:${relativePathToStylesheet}`;
   }
   possibleTemplatePaths(): Array<string> {
-    return this.fs.entries(".", ["**/*.hbs"]).map(e => e.basePath);
+    return this.fs.entries(".", ["**/*.hbs"]).map(e => e.relativePath);
   }
   possibleStylesheetPathsForTemplate(templatePath: string, extensions: Array<string>): Array<string> {
     let path = templatePath.replace("/templates/", "/styles/");

packages/@css-blocks/ember/src/BroccoliTreeImporter.ts

@@ -33,7 +33,13 @@ export class BroccoliTreeImporter implements Importer {
   identifier(fromIdentifier: string | null, importPath: string, config: Readonly<Configuration>): string {
     if (isBroccoliTreeIdentifier(fromIdentifier)) {
       if (importPath.startsWith("./") || importPath.startsWith("../")) {
-        return pathToIdent(path.resolve(path.dirname(identToPath(fromIdentifier)), importPath));
+        let parsedPath = path.parse(identToPath(fromIdentifier));
+        // We have to make resolve think the path is absolute or else it will
+        // prepend the current working directory.
+        let dir = "/" + parsedPath.dir;
+        // then we take the `/` off again to make it relative to the broccoli tree.
+        let relativePath = path.resolve(dir, importPath).substring(1);
+        return pathToIdent(relativePath);
       } else {
         return this.fallbackImporter.identifier(null, importPath, config);
       }
@@ -47,7 +53,7 @@ export class BroccoliTreeImporter implements Importer {
       let relativePath = identToPath(identifier);
       let contents = this.input.readFileSync(relativePath, "utf8");
       let syntax = syntaxFromExtension(path.extname(relativePath));
-      let defaultName = path.basename(relativePath);
+      let defaultName = path.parse(relativePath).name;
       defaultName = defaultName.replace(/.block$/, "");
       return {
         identifier,

packages/@css-blocks/ember/src/EmberAnalysis.ts

@@ -1,9 +1,12 @@
-import { AnalysisImpl, TemplateValidatorOptions } from "@css-blocks/core";
+import { AnalysisImpl, Block, DEFAULT_EXPORT, TemplateValidatorOptions } from "@css-blocks/core";
 
 import { HandlebarsTemplate, TEMPLATE_TYPE as HANDLEBARS_TEMPLATE } from "./HandlebarsTemplate";
 
 export class EmberAnalysis extends AnalysisImpl<HANDLEBARS_TEMPLATE> {
-  constructor(template: HandlebarsTemplate, options: TemplateValidatorOptions) {
+  constructor(template: HandlebarsTemplate, block: Block | undefined, options: TemplateValidatorOptions) {
     super(template, options);
+    if (block) {
+      this.addBlock(DEFAULT_EXPORT, block);
+    }
   }
 }

packages/@css-blocks/ember/src/TemplateAnalyzingRewriter.ts

@@ -22,7 +22,7 @@ import { HandlebarsTemplate, TEMPLATE_TYPE } from "./HandlebarsTemplate";
 const NOOP_VISITOR = {};
 const DEBUG = debugGenerator("css-blocks:glimmer:analyzing-rewriter");
 
-interface ASTPluginWithDeps extends ASTPlugin {
+export interface ASTPluginWithDeps extends ASTPlugin {
   /**
    * If this method exists, it is called with the relative path to the current
    * file just before processing starts. Use this method to reset the
@@ -37,7 +37,7 @@ interface ASTPluginWithDeps extends ASTPlugin {
    * file. Any relative paths returned by this method are taken to be relative
    * to the file that was processed.
    */
-  dependencies(relativePath: string): string[];
+  dependencies?(relativePath: string): string[];
 }
 
 export class TemplateAnalyzingRewriter implements ASTPluginWithDeps {

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

@@ -1,20 +1,26 @@
 import config from "@css-blocks/config";
 import { AnalysisOptions, Block, BlockCompiler, BlockFactory, Configuration, NodeJsImporter, Options as ParserOptions, OutputMode, resolveConfiguration } from "@css-blocks/core";
-import type { AST, ASTPlugin, ASTPluginEnvironment, NodeVisitor, Syntax } from "@glimmer/syntax";
+import type { ASTPlugin, ASTPluginEnvironment } from "@glimmer/syntax";
 import { ObjectDictionary } from "@opticss/util";
+import BroccoliDebug = require("broccoli-debug");
+import funnel = require("broccoli-funnel");
 import type { InputNode } from "broccoli-node-api";
-import TemplateCompilerPlugin, { HtmlBarsOptions } from "ember-cli-htmlbars/lib/template-compiler-plugin";
+import outputWrapper = require("broccoli-output-wrapper");
+import TemplateCompilerPlugin = require("ember-cli-htmlbars/lib/template-compiler-plugin");
 import type EmberApp from "ember-cli/lib/broccoli/ember-app";
 import type EmberAddon from "ember-cli/lib/models/addon";
 import type { AddonImplementation, ThisAddon, Tree } from "ember-cli/lib/models/addon";
+import type Project from "ember-cli/lib/models/project";
+import FSMerger = require("fs-merger");
 import * as FSTree from "fs-tree-diff";
 import { OptiCSSOptions, postcss } from "opticss";
 import * as path from "path";
 
 import { AnalyzingRewriteManager } from "./AnalyzingRewriteManager";
+import { BroccoliFileLocator } from "./BroccoliFileLocator";
 import { BroccoliTreeImporter, identToPath, isBroccoliTreeIdentifier } from "./BroccoliTreeImporter";
 import { EmberAnalysis } from "./EmberAnalysis";
-import { BroccoliFileLocator } from "./BroccoliFileLocator";
+import { ASTPluginWithDeps } from "./TemplateAnalyzingRewriter";
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
@@ -25,37 +31,33 @@ interface EmberASTPluginEnvironment extends ASTPluginEnvironment {
   };
 }
 
-class Visitor implements NodeVisitor {
-  moduleName: string;
-  syntax: Syntax;
-  constructor(moduleName: string, syntax: Syntax) {
-    this.moduleName = moduleName;
-    this.syntax = syntax;
-  }
-  ElementNode(node: AST.ElementNode) {
-    console.log(`visited ${this.syntax.print(node)}`);
-  }
+function withoutCssBlockFiles(tree: InputNode | undefined) {
+  if (!tree) return tree;
+  return funnel(tree, {
+    exclude: ["**/*.block.{css,scss,sass,less,styl}"],
+  });
 }
-const NOOP_VISITOR = {};
 
 class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin {
   previousSourceTree: FSTree;
   cssBlocksOptions: CSSBlocksEmberOptions;
   parserOpts: Readonly<Configuration>;
   analyzingRewriter: AnalyzingRewriteManager | undefined;
-  constructor(inputTree: InputNode, htmlbarsOptions: HtmlBarsOptions, cssBlocksOptions: CSSBlocksEmberOptions) {
-    htmlbarsOptions.plugins = htmlbarsOptions.plugins || {};
-    htmlbarsOptions.plugins.ast = htmlbarsOptions.plugins.ast || [];
-    htmlbarsOptions.plugins.ast.unshift((env) => this.astPluginBuilder(env));
+  input!: FSMerger.FS;
+  output!: outputWrapper.FSOutput;
+  constructor(inputTree: InputNode, htmlbarsOptions: TemplateCompilerPlugin.HtmlBarsOptions, cssBlocksOptions: CSSBlocksEmberOptions) {
     super(inputTree, htmlbarsOptions);
     this.cssBlocksOptions = cssBlocksOptions;
     this.parserOpts = resolveConfiguration(cssBlocksOptions.parserOpts);
     this.previousSourceTree = new FSTree();
   }
-  astPluginBuilder(env: EmberASTPluginEnvironment) {
+  astPluginBuilder(env: EmberASTPluginEnvironment): ASTPluginWithDeps {
     let moduleName = env.meta?.["moduleName"];
     if (!moduleName) {
-      throw new Error("[internal error] moduleName expected.");
+      return {
+        name: "css-blocks-noop",
+        visitor: {},
+      };
     }
     if (!this.analyzingRewriter) {
       throw new Error("[internal error] analyzing rewriter expected.");
@@ -67,7 +69,14 @@ class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin {
     // write additional output files to the output tree.
     return this.analyzingRewriter.templateAnalyzerAndRewriter(moduleName, env.syntax);
   }
+
   async build() {
+    if (!this.input) {
+      this.input = new FSMerger(this.inputPaths).fs;
+    }
+    if (!this.output) {
+      this.output = outputWrapper(this);
+    }
     let cssBlockEntries = this.input.entries(".", [BLOCK_GLOB]);
     let currentFSTree = FSTree.fromEntries(cssBlockEntries);
     let patch = this.previousSourceTree.calculatePatch(currentFSTree);
@@ -85,12 +94,22 @@ class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin {
     // the blocks and associate them to their corresponding templates.
     await this.analyzingRewriter.discoverTemplatesWithBlocks();
     // Compiles the handlebars files, runs our plugin for each file
-    await super.build();
+    // we have to wrap this RSVP Promise that's returned in a native promise or
+    // else await won't work.
+    let builder = new Promise((resolve, reject) => {
+      try {
+        let buildResult = super.build() || Promise.resolve();
+        buildResult.then(resolve, reject);
+      } catch (e) {
+        reject(e);
+      }
+    });
+    await builder;
     // output compiled block files and template analyses
     let blocks = new Set<Block>();
     let blockOutputPaths = new Map<Block, string>();
     let analyses = new Array<EmberAnalysis>();
-    for (let analyzedTemplate of this.analyzingRewriter.analyzedTemplates()) {
+    for (let analyzedTemplate of this.analyzingRewriter!.analyzedTemplates()) {
       let { block, analysis } = analyzedTemplate;
       analyses.push(analysis);
       blocks.add(block);
@@ -105,15 +124,15 @@ class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin {
       if (!block.stylesheet) {
         throw new Error("[internal error] block stylesheet expected.");
       }
-      // TODO generate definition file too
-      let compiledAST = compiler.compile(block, block.stylesheet, this.analyzingRewriter.reservedClassNames());
+      // TODO generate definition file too1
+      let compiledAST = compiler.compile(block, block.stylesheet, this.analyzingRewriter!.reservedClassNames());
       // TODO disable source maps in production?
       let result = compiledAST.toResult({ to: outputPath, map: { inline: true } });
-      this.output.writeFileSync(outputPath, result.css, "utf8");
+      this.output.writeFileSync(outputPath, wrapCSSWithDelimiterComments(block.guid, result.css), "utf8");
     }
     for (let analysis of analyses) {
       let analysisOutputPath = analysisPath(analysis.template.relativePath);
-      this.output.mkdirSync(analysisOutputPath, { recursive: true });
+      this.output.mkdirSync(path.dirname(analysisOutputPath), { recursive: true });
       this.output.writeFileSync(
         analysisOutputPath,
         JSON.stringify(analysis.serialize(blockOutputPaths)),
@@ -123,6 +142,12 @@ class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin {
   }
 }
 
+// This is a placeholder, eventually the block compiler should add this.
+function wrapCSSWithDelimiterComments(guid: string, css: string) {
+  return `/*#css-blocks ${guid}*/\n${css}\n/*#css-blocks end*/\n`;
+}
+
+
 function analysisPath(templatePath: string): string {
   let analysisPath = path.parse(templatePath);
   delete analysisPath.base;
@@ -132,7 +157,7 @@ function analysisPath(templatePath: string): string {
 
 function getOutputPath(block: Block): string {
   if (isBroccoliTreeIdentifier(block.identifier)) {
-    return identToPath(block.identifier);
+    return identToPath(block.identifier).replace(".block", "");
   } else {
     throw new Error("Implement me!");
   }
@@ -154,17 +179,18 @@ export interface CSSBlocksEmberOptions {
 }
 
 interface CSSBlocksAddon {
+  templateCompiler?: CSSBlocksTemplateCompilerPlugin;
   findSiblingAddon<AddonType>(this: ThisAddon<CSSBlocksAddon>, name: string): ThisAddon<AddonType> | undefined;
   getOptions(this: ThisAddon<CSSBlocksAddon>): CSSBlocksEmberOptions;
   optionsForCacheInvalidation(this: ThisAddon<CSSBlocksAddon>): ObjectDictionary<unknown>;
   astPluginBuilder(env: EmberASTPluginEnvironment): ASTPlugin;
   _options?: CSSBlocksEmberOptions;
 }
 interface HTMLBarsAddon {
-  getTemplateCompiler(inputTree: Tree, htmlbarsOptions: HtmlBarsOptions): TemplateCompilerPlugin;
+  getTemplateCompiler(inputTree: Tree, htmlbarsOptions: TemplateCompilerPlugin.HtmlBarsOptions): TemplateCompilerPlugin;
 }
 
-function isAddon(parent: EmberAddon | EmberApp): parent is EmberAddon {
+function isAddon(parent: EmberAddon | EmberApp | Project): parent is EmberAddon {
   return !!parent["findOwnAddonByName"];
 }
 
@@ -173,36 +199,52 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksAddon> = {
 
   init(parent, project) {
     this._super.init.call(this, parent, project);
-    this.app = this._findHost();
   },
 
   findSiblingAddon(name) {
     if (isAddon(this.parent)) {
       return this.parent.findOwnAddonByName(name);
     } else {
-      this.project.findAddonByName(name);
+      return this.project.findAddonByName(name);
     }
   },
 
   included(parent) {
     this._super.included.apply(this, [parent]);
+    this.app = this._findHost();
+    let parentName = typeof parent.name === "string" ? parent.name : parent.name();
     this._options = this.getOptions();
     let htmlBarsAddon = this.findSiblingAddon<HTMLBarsAddon>("ember-cli-htmlbars");
     if (!htmlBarsAddon) {
-      throw new Error(`Using @css-blocks/ember on ${this.parent.name} also requires ember-cli-htmlbars to be an addon for ${this.parent.name}`);
+      throw new Error(`Using @css-blocks/ember on ${parentName} also requires ember-cli-htmlbars to be an addon for ${parentName} (ember-cli-htmlbars should be a dependency in package.json, not a devDependency)`);
     }
-    htmlBarsAddon.getTemplateCompiler = (inputTree: Tree, htmlbarsOptions: HtmlBarsOptions) => {
-      return new CSSBlocksTemplateCompilerPlugin(inputTree, htmlbarsOptions, this._options!);
+    if (!htmlBarsAddon.getTemplateCompiler) {
+      throw new Error("This version of ember-cli-htmlbars is not compatible with @css-blocks/ember. Please upgrade.");
+    }
+    htmlBarsAddon.getTemplateCompiler = (inputTree: Tree, htmlbarsOptions: TemplateCompilerPlugin.HtmlBarsOptions) => {
+      this.templateCompiler = new CSSBlocksTemplateCompilerPlugin(inputTree, htmlbarsOptions, this._options!);
+      return this.templateCompiler;
     };
   },
 
-  astPluginBuilder(env: EmberASTPluginEnvironment): ASTPlugin {
-    let {meta, syntax } = env;
-    let moduleName = meta?.moduleName;
-    return {
-      name: `CSS Blocks AST Plugin for ${moduleName}`,
-      visitor: moduleName ? new Visitor(moduleName, syntax) : NOOP_VISITOR,
-    };
+  astPluginBuilder(env) {
+    return this.templateCompiler!.astPluginBuilder(env);
+  },
+
+  preprocessTree(type, tree) {
+    if (type !== "css") return tree;
+    // We compile CSS Block files in the template tree, so in the CSS Tree all
+    // we need to do is prune them out of the build before the tree gets
+    // built.
+    return withoutCssBlockFiles(tree);
+  },
+
+  postprocessTree(type, tree) {
+    if (type !== "template") return tree;
+    tree = withoutCssBlockFiles(tree);
+    let parentName = typeof this.parent.name === "string" ? this.parent.name : this.parent.name();
+    let isAddon = typeof this.parent.name === "string";
+    return new BroccoliDebug(tree, `css-blocks:template-output:${parentName}:${isAddon ? "addon" : "app"}`);
   },
 
   setupPreprocessorRegistry(type, registry) {
@@ -250,7 +292,7 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksAddon> = {
     }
     options.parserOpts.outputMode = OutputMode.BEM_UNIQUE;
 
-    if (typeof options.output !== "string") {
+    if (options.output !== undefined && typeof options.output !== "string") {
       throw new Error(`Invalid css-blocks options in 'ember-cli-build.js': Output must be a string. Instead received ${options.output}.`);
     }
     return options;