feat: End-to-end sourcemaps for ember v2 pipeline.

- Use raw Compiled CSS contents in the build pipeline. Trying to use
something else causes misaligment with embedded sourcemap char data.
- Remove some sourcemap logic from the prev. commit that's no longer
necessary.

Author: Tim Lindvall

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

@@ -364,6 +364,7 @@ export class BlockFactory {
 
     // Merge the rules from the CSS contents into the Block.
     block.precompiledStylesheet = cssContentsAst;
+    block.precompiledStylesheetUnedited = file.rawCssContents;
     this._mergeCssRulesIntoDefinitionBlock(block, cssContentsAst, file);
 
     // And we're done!

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

@@ -83,6 +83,12 @@ export class Block
    * If this is set, the stylesheet property is only the definition file contents.
    */
   public precompiledStylesheet: postcss.Root | undefined;
+  /**
+   * The full contents of the compiled CSS this block was built from, if available.
+   * This content is copied verbatim from the file system and has not been transformed
+   * or processed by PostCSS in any way.
+   */
+  public precompiledStylesheetUnedited: string | undefined;
   public blockReferencePaths: Map<string, Block>;
   private _resolveImplementedBlocksResult: Set<Block> | undefined;
 

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

@@ -16,11 +16,6 @@ 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, REGEXP_SOURCEMAP_COMMENT } from "../PrecompiledDefinitions/compiled-comments";
+import { REGEXP_COMMENT_DEFINITION_REF, REGEXP_COMMENT_FOOTER, REGEXP_COMMENT_HEADER } from "../PrecompiledDefinitions/compiled-comments";
 
 import { FileIdentifier, ImportedCompiledCssFile, ImportedCompiledCssFileContents, ImportedFile, Importer } from "./Importer";
 
@@ -103,32 +103,14 @@ 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: blockContentsWithSourcemap,
+      blockCssContents,
       definitionUrl,
       post,
+      raw: contents,
     };
   }
-
-  /**
-   * 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/core/src/importing/Importer.ts

@@ -86,6 +86,13 @@ export interface ImportedCompiledCssFileContents {
    * File contents after the CSS Blocks footer comment.
    */
   post: string;
+
+  /**
+   * The unedited full file contents. This content will be added to the
+   * ImportedCompiledCssFile object so that it's accessible to build
+   * plugins later on.
+   */
+  raw: string;
 }
 
 /**
@@ -141,6 +148,14 @@ export interface ImportedCompiledCssFile {
    * an error.
    */
   defaultName: string;
+
+  /**
+   * The unedited file contents of the Compiled CSS file.
+   * In many cases when integrating blocks into a build pipeline,
+   * you can use this to build instead of rebuilding from the
+   * Block representation or the cssContents property.
+   */
+  rawCssContents: string;
 }
 
 /**

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

@@ -197,6 +197,7 @@ export class NodeJsImporter extends BaseImporter {
         definitionContents: dfnData,
         definitionIdentifier,
         defaultName: this.defaultName(identifier, config),
+        rawCssContents: contents,
       };
     } else {
       return {

packages/@css-blocks/core/test/util/MockImportRegistry.ts

@@ -61,6 +61,7 @@ export class MockImporter extends NodeJsImporter {
         definitionContents: source.dfnContents,
         blockId: blockId,
         defaultName: this.defaultName(resolvedPath, configuration),
+        rawCssContents: source.contents,
       };
     } else if (source.hasEmbeddedDfnData) {
       const parsedSourceContents = this.segmentizeCompiledBlockCSS(source.contents);
@@ -77,6 +78,7 @@ export class MockImporter extends NodeJsImporter {
         definitionContents,
         blockId: blockId,
         defaultName: this.defaultName(resolvedPath, configuration),
+        rawCssContents: source.contents,
       };
     } else {
       return {

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

@@ -64,11 +64,13 @@ export class CSSBlocksApplicationPlugin extends Filter {
     let compiler = new BlockCompiler(postcss, config);
     let reservedClassnames = analyzer.reservedClassNames();
     for (let block of blocksUsed) {
-      let content: postcss.Result;
+      let content: postcss.Result | string;
       let filename = importer.debugIdentifier(block.identifier, config);
-      if (block.precompiledStylesheet) {
-        debug(`Optimizing precompiled stylesheet for ${filename}`);
-        content = block.precompiledStylesheet.toResult();
+      if (block.precompiledStylesheetUnedited) {
+        // We don't need to do any processing on the compiled css content, just
+        // add it to the output.
+        debug(`Looking up unedited Compiled CSS content for ${filename}`);
+        content = block.precompiledStylesheetUnedited;
       } else {
         debug(`Compiling stylesheet for optimization of ${filename}`);
         // XXX Do we need to worry about reservedClassnames here?

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

@@ -129,6 +129,7 @@ export class BroccoliTreeImporter extends BaseImporter {
           definitionContents: dfnData,
           definitionIdentifier,
           defaultName: this.defaultName(identifier, config),
+          rawCssContents: contents,
         };
       } else {
         return {