fix: Re-use precomiled css if available. Give compiled css to optimizer.

Author: chriseppstein

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

@@ -365,6 +365,7 @@ export class BlockFactory {
     const block = await this.parser.parseDefinitionSource(definitionAst, file.identifier, file.blockId, file.defaultName);
 
     // Merge the rules from the CSS contents into the Block.
+    block.precompiledStylesheet = cssContentsAst;
     this._mergeCssRulesIntoDefinitionBlock(block, cssContentsAst, file);
 
     // And we're done!

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

@@ -78,6 +78,11 @@ export class Block
    * primarily for error reporting, if present.
    */
   public stylesheet: postcss.Root | undefined;
+  /**
+   * The PostCSS AST of the compiled CSS this block was built from.
+   * If this is set, the stylesheet property is only the definition file contents.
+   */
+  public precompiledStylesheet: postcss.Root | undefined;
   public blockReferencePaths: Map<string, Block>;
 
   /**
@@ -90,12 +95,13 @@ export class Block
    *               responsible for enforcing uniqueness.)
    * @param stylesheet - The PostCSS AST of the stylesheet this block is built from.
    */
-  constructor(name: string, identifier: FileIdentifier, guid: string, stylesheet?: postcss.Root) {
+  constructor(name: string, identifier: FileIdentifier, guid: string, stylesheet?: postcss.Root, precompiledStylesheet?: postcss.Root) {
     super(name);
     this._identifier = identifier;
     this._dependencies = new Set<string>();
     this.rootClass = new BlockClass(ROOT_CLASS, this);
     this.stylesheet = stylesheet;
+    this.precompiledStylesheet = precompiledStylesheet;
     this.guid = guid;
 
     this.addClass(this.rootClass);

packages/@css-blocks/core/test/BlockFactoryCompiledCssFiles/basic-test.ts

@@ -145,7 +145,7 @@ export class BlockFactoryCompiledCssFilesTests {
     await factory.getBlock(importer.identifier(null, navCssPath, config));
     return this.assertError(
       CssBlockError,
-      "[css-blocks] Error: Block uses a name that has already been used! Check dependencies for conflicting block names. (foo/bar/other.css)",
+      "[css-blocks] Error: Block uses a name that has already been used by foo/bar/nav.css (foo/bar/other.css)",
       factory.getBlock(importer.identifier(null, otherCssPath, config)),
     );
   }

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

@@ -1,4 +1,4 @@
-import { Analyzer, Block, BlockFactory, Options as CSSBlocksOptions, SerializedSourceAnalysis, resolveConfiguration } from "@css-blocks/core";
+import { Analyzer, Block, BlockFactory, Options as CSSBlocksOptions, SerializedSourceAnalysis, resolveConfiguration, BlockCompiler } from "@css-blocks/core";
 import { BroccoliTreeImporter, EmberAnalysis, TEMPLATE_TYPE, pathToIdent } from "@css-blocks/ember-support";
 import { TemplateIntegrationOptions } from "@opticss/template-api";
 import mergeTrees = require("broccoli-merge-trees");
@@ -8,6 +8,8 @@ import type { PluginOptions } from "broccoli-plugin/dist/interfaces";
 import debugGenerator from "debug";
 import * as FSTree from "fs-tree-diff";
 import { Optimizer, postcss } from "opticss";
+import * as path from "path";
+import { unionInto } from "@opticss/util";
 
 const debug = debugGenerator("css-blocks:ember-app");
 
@@ -71,19 +73,8 @@ export class CSSBlocksApplicationPlugin extends Filter {
       mergeDeclarations: false,
     };
     let optimizer = new Optimizer(optimizerOptions, analyzer.optimizationOptions);
+    let blocksUsed = new Set<Block>();
     for (let entry of entries) {
-      let ident = pathToIdent(entry.relativePath);
-      if (entry.relativePath.endsWith(".compiledblock.css")) {
-        debug(`Parsing precompiled block: ${entry.relativePath}`);
-        let block: Block;
-        block = await factory.getBlock(ident);
-        debug(`Got block: ${block.identifier}`);
-        optimizer.addSource({
-          filename: entry.relativePath,
-          content: block.stylesheet!.toResult({to: entry.relativePath}),
-        });
-        blocks.push(block);
-      }
       if (entry.relativePath.endsWith(".block-analysis.json")) {
         debug(`Processing analysis: ${entry.relativePath}`);
         let serializedAnalysis: SerializedSourceAnalysis<TEMPLATE_TYPE> = JSON.parse(this.input.readFileSync(entry.relativePath, "utf8"));
@@ -92,11 +83,39 @@ export class CSSBlocksApplicationPlugin extends Filter {
           serializedAnalysis.blocks[blockId] = pathToIdent(serializedAnalysis.blocks[blockId]);
         }
         let analysis = await EmberAnalysis.deserializeSource(serializedAnalysis, factory, analyzer);
+        unionInto(blocksUsed, analysis.transitiveBlockDependencies());
         optimizer.addAnalysis(analysis.forOptimizer(config));
       }
     }
+    let compiler = new BlockCompiler(postcss, config);
+    for (let block of blocksUsed) {
+      let content: postcss.Result;
+      let filename = importer.debugIdentifier(block.identifier, config);
+      if (block.precompiledStylesheet) {
+        debug(`Optimizing precompiled stylesheet for ${filename}`);
+        content = block.precompiledStylesheet.toResult();
+      } else {
+        debug(`Compiling stylesheet for optimization of ${filename}`);
+        // XXX Do we need to worry about reservedClassnames here?
+        content = compiler.compile(block, block.stylesheet!, new Set()).toResult();
+      }
+      optimizer.addSource({
+        content,
+        filename,
+      });
+    }
     debug(`Loaded ${blocks.length} blocks.`);
     debug(`Loaded ${optimizer.analyses.length} analyses.`);
+    let cssFileName = `${this.appName}/styles/css-blocks.css`;
+    let sourceMapFileName = `${this.appName}/styles/css-blocks.css.map`;
+    let optLogFileName = `${this.appName}/styles/css-blocks.optimization.log`;
+    let optimizationResult = await optimizer.optimize(cssFileName);
+    debug(`Optimized CSS. There were ${optimizationResult.actions.performed.length} optimizations performed.`);
+    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(optLogFileName, optimizationResult.actions.logStrings().join("\n"), "utf8");
+    debug("Wrote css, sourcemap, and optimization log.");
 
     this.output.writeFileSync(
       `${this.appName}/services/-css-blocks-data.js`,

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

@@ -1,3 +1,4 @@
+import BroccoliDebug = require("broccoli-debug");
 import funnel = require("broccoli-funnel");
 import EmberApp from "ember-cli/lib/broccoli/ember-app";
 import type Addon from "ember-cli/lib/models/addon";
@@ -130,7 +131,8 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
     if (type === "js") {
       if (env.isApp) {
         let appAndAddonTree = new CSSBlocksApplicationPlugin(env.modulePrefix, [env.app.addonTree(), tree], {});
-        return funnel(appAndAddonTree, {srcDir: env.modulePrefix, destDir: env.modulePrefix});
+        let debugTree = new BroccoliDebug(appAndAddonTree, `css-blocks:optimized`);
+        return funnel(debugTree, {srcDir: env.modulePrefix, destDir: env.modulePrefix});
       } else {
         return tree;
       }

private-packages/fixtures-ember-v2/ember-app/package.json

@@ -25,6 +25,7 @@
     "@css-blocks-fixtures-v2/npm-based-blocks": "^1.0.0",
     "@css-blocks/ember": "^0.1.0",
     "@css-blocks/ember-app": "^0.1.0",
+    "broccoli-debug": "^0.6.5",
     "ember-cli-babel": "^7.7.3",
     "ember-cli-htmlbars": "^5.2.0",
     "ember-engines": "^0.8.5"