feat: Update concatenation. WIP sourcemaps fix.

- Use broccoli-concat to merge files together, which can better handle
sourcemaps that are present.
- Update BaseImporter to ensure that sourcemaps are included in parsed
CSS content from compiled css files.

Author: Tim Lindvall

packages/@css-blocks/core/src/BlockParser/BlockFactory.ts

@@ -346,8 +346,6 @@ export class BlockFactory {
     const cssContentsAst = this.postcssImpl.parse(file.cssContents);
     const cssDebugIdentifier = this.importer.debugIdentifier(file.identifier, this.configuration);
 
-    // TODO: Sourcemaps?
-
     // Sanity check! Did we actually get contents for both ASTs?
     if (!definitionAst || !definitionAst.nodes) {
       throw new CssBlockError(`Unable to parse definition file into AST!`, {

packages/@css-blocks/core/src/PrecompiledDefinitions/compiled-comments.ts

@@ -16,6 +16,11 @@ export const REGEXP_COMMENT_DEFINITION_REF = /^\/\*#blockDefinitionURL=([\S]+?)\
  */
 export const REGEXP_COMMENT_FOOTER = /^\/\*#css-blocks end\*\/\r?\n?/m;
 
+/**
+ * A regular expression that can be used to find the included sourcemap in the file.
+ */
+export const REGEXP_SOURCEMAP_COMMENT = /(^\/\*#\s*sourceMappingURL=\S+\s*\*\/$|^\/\/#\s*sourceMappingURL=\S+\s*$)/m;
+
 /**
  * Determines if the given URL for a definition is valid.
  *

packages/@css-blocks/core/src/importing/BaseImporter.ts

@@ -1,6 +1,6 @@
 import { Syntax } from "../BlockParser";
 import { ResolvedConfiguration } from "../configuration";
-import { REGEXP_COMMENT_DEFINITION_REF, REGEXP_COMMENT_FOOTER, REGEXP_COMMENT_HEADER } from "../PrecompiledDefinitions/compiled-comments";
+import { REGEXP_COMMENT_DEFINITION_REF, REGEXP_COMMENT_FOOTER, REGEXP_COMMENT_HEADER, REGEXP_SOURCEMAP_COMMENT } from "../PrecompiledDefinitions/compiled-comments";
 
 import { FileIdentifier, ImportedCompiledCssFile, ImportedCompiledCssFileContents, ImportedFile, Importer } from "./Importer";
 
@@ -103,13 +103,32 @@ export abstract class BaseImporter implements Importer {
     }
     const [definitionFullMatch, definitionUrl] = definitionRegexpResult;
     const blockCssContents = fullBlockContents.replace(definitionFullMatch, "");
+    const blockContentsWithSourcemap = this.mergeSourcemapIntoCompiledCssContents(blockCssContents, post);
 
     return {
       pre,
       blockId,
-      blockCssContents,
+      blockCssContents: blockContentsWithSourcemap,
       definitionUrl,
       post,
     };
   }
+
+  /**
+   * Look for sourcemap data in given post-blocks content. If found, append it to the given CSS contents.
+   * @param cssContents - The CSS contents of the Compiled CSS file (what appears between the CSS Blocks comments).
+   * @param postContent - Content that appears in the content after the closing CSS Blocks comment.
+   * @returns The CSS Contents with sourcemap appended, if found. Returns CSS contents alone if not found.
+   */
+  private mergeSourcemapIntoCompiledCssContents(cssContents: string, postContent: string) {
+    const sourcemapRegexpResult = postContent.match(REGEXP_SOURCEMAP_COMMENT);
+
+    // No sourcemap? Just return the CSS contents.
+    if (sourcemapRegexpResult === null) {
+      return cssContents;
+    }
+
+    // Otherwise, append the sourcemap to the end of the CSS contents.
+    return `${cssContents}\n${sourcemapRegexpResult[0]}`;
+  }
 }

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

@@ -56,6 +56,7 @@
     "@glimmer/syntax": "^0.43.0",
     "@opticss/template-api": "^0.7.0",
     "@opticss/util": "^0.7.0",
+    "broccoli-concat": "^4.2.4",
     "broccoli-debug": "^0.6.5",
     "broccoli-funnel": "^3.0.3",
     "broccoli-merge-trees": "^4.2.0",

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

@@ -82,13 +82,15 @@ export class CSSBlocksApplicationPlugin extends Filter {
     debug(`Loaded ${blocksUsed.size} blocks.`);
     debug(`Loaded ${optimizer.analyses.length} analyses.`);
     let cssFileName = cssBlocksOutputFilename(this.cssBlocksOptions);
-    let sourceMapFileName = `${cssFileName}.map`;
     let optLogFileName = `${cssFileName}.optimization.log`;
     let optimizationResult = await optimizer.optimize(cssFileName);
     debug(`Optimized CSS. There were ${optimizationResult.actions.performed.length} optimizations performed.`);
+
+    // Embed the sourcemap into the final css output
+    const finalizedCss = addSourcemapInfoToOptimizedCss(optimizationResult.output.content.toString(), optimizationResult.output.sourceMap?.toString());
+
     this.output.mkdirSync(path.dirname(cssFileName), {recursive: true});
-    this.output.writeFileSync(cssFileName, optimizationResult.output.content.toString(), "utf8");
-    this.output.writeFileSync(sourceMapFileName, optimizationResult.output.sourceMap?.toString(), "utf8");
+    this.output.writeFileSync(cssFileName, finalizedCss, "utf8");
     this.output.writeFileSync(optLogFileName, optimizationResult.actions.logStrings().join("\n"), "utf8");
     debug("Wrote css, sourcemap, and optimization log.");
 
@@ -145,11 +147,10 @@ export class CSSBlocksApplicationPlugin extends Filter {
  * 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.
+ * This plugin will add the compiled CSS content created by the CSSBlocksApplicationPlugin and place
+ * it into the CSS tree at the preferred location.
  */
-export class CSSBlocksStylesProcessorPlugin extends Plugin {
+export class CSSBlocksStylesPreprocessorPlugin extends Plugin {
   appName: string;
   previousSourceTree: FSTree;
   cssBlocksOptions: ResolvedCSSBlocksEmberOptions;
@@ -160,63 +161,56 @@ export class CSSBlocksStylesProcessorPlugin extends Plugin {
     this.cssBlocksOptions = cssBlocksOptions;
   }
   async build() {
-    let mergeIntoAppStyles = true;
-    if (this.cssBlocksOptions.output) {
-      // if the output filename is explicitly declared, we don't merge it with
-      // the application styles.
-      mergeIntoAppStyles = false;
-    }
-    // Read the optimized CSS Blocks styles file, generated previously by the CSSBlocksApplicationPlugin.
+    // Are there any changes to make? If not, bail out early.
     let stylesheetPath = cssBlocksOutputFilename(this.cssBlocksOptions);
-    let applicationStylesheetPath = `app/styles/app.css`;
-    if (!this.input.existsSync(applicationStylesheetPath)) {
-      mergeIntoAppStyles = false;
-      debug(`No app/styles/app.css file found. Blocks content is in ${stylesheetPath}. The application should handle it.`);
-    }
-    let globs: Array<string>;
-    if (mergeIntoAppStyles) {
-      globs = [stylesheetPath, applicationStylesheetPath];
-    } else {
-      globs = [stylesheetPath];
-    }
-    let entries = this.input.entries(".", {globs});
+    let entries = this.input.entries(".", {globs: [stylesheetPath]});
     let currentFSTree = FSTree.fromEntries(entries);
     let patch = this.previousSourceTree.calculatePatch(currentFSTree);
     if (patch.length === 0) {
       return;
     } else {
       this.previousSourceTree = currentFSTree;
     }
+    // Read in the CSS Blocks compiled content that was created previously.
     let blocksFileContents: string;
-    // And read the application CSS that was previously built by Ember and ignored by CSS Blocks.
     if (this.input.existsSync(stylesheetPath)) {
       blocksFileContents = this.input.readFileSync(stylesheetPath, { encoding: "utf8" });
     } else {
       // We always write the output file if this addon is installed, even if
       // there's no css-blocks files.
       blocksFileContents = "";
     }
-    let outputContents: string;
-    let outputPath: string;
-    if (mergeIntoAppStyles) {
-      const appCssFileContents = this.input.readFileSync(applicationStylesheetPath, { encoding: "utf8" });
-      if (blocksFileContents) {
-        outputContents = `${appCssFileContents}\n${blocksFileContents}`;
-      } else {
-        outputContents = appCssFileContents;
-      }
-      outputPath = applicationStylesheetPath;
-    } else {
-      outputContents = blocksFileContents;
-      outputPath = stylesheetPath;
-    }
 
-    // Now, write out the combined result of the application CSS and CSS Blocks contents.
-    this.output.mkdirSync(path.dirname(outputPath), { recursive: true });
-    this.output.writeFileSync(outputPath, outputContents);
+    // Now, write out compiled content to its expected location.
+    // By default, this is app/styles/css-blocks.css.
+    this.output.mkdirSync(path.dirname(stylesheetPath), { recursive: true });
+    this.output.writeFileSync(stylesheetPath, blocksFileContents);
   }
 }
 
+/**
+ * Given CSS and a sourcemap, append an embedded sourcemap (base64 encoded)
+ * to the end of the css.
+ * @param css - The CSS content to be added to.
+ * @param sourcemap - The sourcemap data to add.
+ * @returns - The CSS with embedded sourcemap, or just the CSS if no sourcemap was given.
+ */
+function addSourcemapInfoToOptimizedCss(css: string, sourcemap?: string) {
+  if (!sourcemap) {
+    return css;
+  }
+
+  const encodedSourcemap = Buffer.from(sourcemap).toString("base64");
+  return `${css}\n/*# sourceMappingURL=data:application/json;base64,${encodedSourcemap} */`;
+}
+
+/**
+ * Generate the output path for the compiled CSS Blocks content, using the
+ * preferred filename given by the user. If none is given, the default
+ * path is "app/styles/css-blocks.css".
+ * @param options - The options passed to the Ember plugin.
+ * @returns - The path for the CSS Blocks compiled content.
+ */
 function cssBlocksOutputFilename(options: ResolvedCSSBlocksEmberOptions) {
   let outputName = options.output || "css-blocks.css";
   return `app/styles/${outputName}`;

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

@@ -1,4 +1,5 @@
 import { CSSBlocksEmberOptions, ResolvedCSSBlocksEmberOptions, getConfig } from "@css-blocks/ember-utils";
+import broccoliConcat = require("broccoli-concat");
 import BroccoliDebug = require("broccoli-debug");
 import funnel = require("broccoli-funnel");
 import mergeTrees = require("broccoli-merge-trees");
@@ -7,7 +8,7 @@ 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, CSSBlocksStylesProcessorPlugin } from "./broccoli-plugin";
+import { CSSBlocksApplicationPlugin, CSSBlocksStylesPreprocessorPlugin } from "./broccoli-plugin";
 
 interface AddonEnvironment {
   parent: Addon | EmberApp;
@@ -172,6 +173,10 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
         return tree;
       }
     } else if (type === "css") {
+      // TODO: We shouldn't need to use a custom plugin here anymore.
+      //       Refactor this to use simple broccoli filters and merges.
+      //       (This means the prev. plugin becomes reponsible for putting
+      //       the css file in the right directory.)
       if (!env.isApp) {
         return tree;
       }
@@ -182,12 +187,40 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
         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(env.modulePrefix, env.config, [this.broccoliAppPluginInstance, tree]);
+      const cssBlocksContentsTree = new CSSBlocksStylesPreprocessorPlugin(env.modulePrefix, env.config, [this.broccoliAppPluginInstance, tree]);
       return new BroccoliDebug(mergeTrees([tree, cssBlocksContentsTree], { overwrite: true }), "css-blocks:css-preprocess");
     } else {
       return tree;
     }
   },
+
+  postprocessTree(type, tree) {
+    let env = this.env!;
+
+    if (type === "css") {
+      if (!env.isApp) {
+        return tree;
+      }
+      // TODO: THIS IS WRONG - FIX THESE HARCODED PATHS THIS IS A BLOCKER AAAUGH
+      const concatTree = broccoliConcat(
+        tree,
+        {
+          inputFiles: ["assets/css-blocks.css", "assets/@css-blocks-fixtures-v2/ember-app.css"],
+          outputFile: "assets/@css-blocks-fixtures-v2/ember-app.css",
+          sourceMapConfig: {
+            enabled: true,
+            extensions: ["css"],
+            inline: true,
+            mapCommentType: "block",
+          },
+        },
+      );
+      const mergedTree = mergeTrees([tree, concatTree], { overwrite: true });
+      return new BroccoliDebug(mergedTree, "css-blocks:css-postprocess");
+    }
+
+    return tree;
+  },
 };
 
 type MaybeCSSBlocksTree = MaybeCSSBlocksTreePlugin | string;