feat: Scan app CSS for classes.

- Write found classes to log file for now.
- Also moves some common classes and interfaces to utility files.

Author: Tim Lindvall

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

@@ -8,10 +8,12 @@ import Plugin = require("broccoli-plugin");
 import type { PluginOptions } from "broccoli-plugin/dist/interfaces";
 import debugGenerator from "debug";
 import * as FSTree from "fs-tree-diff";
-import { OptiCSSOptions, Optimizer, postcss } from "opticss";
+import { OptiCSSOptions, Optimizer, parseSelector, postcss } from "opticss";
 import * as path from "path";
 
 import { RuntimeDataGenerator } from "./RuntimeDataGenerator";
+import { cssBlocksPostprocessFilename, cssBlocksPreprocessFilename } from "./utils/filepaths";
+import { AddonEnvironment } from "./utils/interfaces";
 
 const debug = debugGenerator("css-blocks:ember-app");
 
@@ -83,7 +85,7 @@ export class CSSBlocksApplicationPlugin extends Filter {
     }
     debug(`Loaded ${blocksUsed.size} blocks.`);
     debug(`Loaded ${optimizer.analyses.length} analyses.`);
-    let cssFileName = cssBlocksOutputFilename(this.cssBlocksOptions);
+    let cssFileName = cssBlocksPreprocessFilename(this.cssBlocksOptions);
     let optLogFileName = `${cssFileName}.optimization.log`;
     let optimizationResult = await optimizer.optimize(cssFileName);
     debug(`Optimized CSS. There were ${optimizationResult.actions.performed.length} optimizations performed.`);
@@ -164,7 +166,7 @@ export class CSSBlocksStylesPreprocessorPlugin extends Plugin {
   }
   async build() {
     // Are there any changes to make? If not, bail out early.
-    let stylesheetPath = cssBlocksOutputFilename(this.cssBlocksOptions);
+    let stylesheetPath = cssBlocksPreprocessFilename(this.cssBlocksOptions);
     let entries = this.input.entries(".", {globs: [stylesheetPath]});
     let currentFSTree = FSTree.fromEntries(entries);
     let patch = this.previousSourceTree.calculatePatch(currentFSTree);
@@ -190,6 +192,79 @@ export class CSSBlocksStylesPreprocessorPlugin extends Plugin {
   }
 }
 
+/**
+ * Plugin for the CSS postprocess tree. This plugin scans for classes declared
+ * in application CSS (outside of CSS Blocks) and checks if there are any
+ * duplicates between the app code and the classes generated by the optimizer.
+ *
+ * This plugin is only run for builds where the optimizer is enabled.
+ */
+export class CSSBlocksStylesPostprocessorPlugin extends Filter {
+  env: AddonEnvironment;
+
+  constructor(env: AddonEnvironment, inputNodes: InputNode[]) {
+    super(mergeTrees(inputNodes), {});
+    this.env = env;
+  }
+
+  processString(contents: string, _relativePath: string): string {
+    return contents;
+  }
+
+  async build() {
+    await super.build();
+
+    // Look up all the application style content that's already present.
+    const blocksCssFile = cssBlocksPostprocessFilename(this.env.config);
+    const appStyles: string[] = [];
+    const foundFiles: string[] = [];
+
+    const walkEntries = this.input.entries(undefined, {
+      globs: ["**/*.css"],
+    });
+    walkEntries.forEach(entry => {
+      if (entry.relativePath === blocksCssFile) return;
+      try {
+        appStyles.push(this.input.readFileSync(entry.relativePath).toString("utf8"));
+        foundFiles.push(entry.relativePath);
+      } catch (e) {
+        // broccoli-concat will complain about this later. let's move on.
+      }
+    });
+
+    // Now, read in each of these sources and check there are no class name conflicts.
+    const foundClasses: Set<string> = new Set<string>();
+    const errorLog: string[] = [];
+    appStyles.forEach(content => {
+      try {
+        const parsed = postcss.parse(content);
+        parsed.walkRules(rule => {
+          const selectors = parseSelector(rule.selector);
+          selectors.forEach(sel => {
+            sel.eachSelectorNode(node => {
+              if (node.type === "class") {
+                foundClasses.add(node.value);
+              }
+            });
+          });
+        });
+      } catch (e) {
+        // TODO: Can't parse CSS? Gracefully fail or crash and burn?
+        errorLog.push(e.toString());
+      }
+    });
+
+    // Build a logfile for the output tree, for debugging.
+    let logfile = "FOUND CLASSES:\n";
+    foundClasses.forEach(cssClass => { logfile += `${cssClass}\n`; });
+    logfile += "\nFOUND FILES:\n";
+    foundFiles.forEach(file => { logfile += `${file}\n`; });
+    logfile += "\nERRORS:\n";
+    errorLog.forEach(err => { logfile += `${err}\n`; });
+    this.output.writeFileSync("assets/app-classes.log", logfile);
+  }
+}
+
 /**
  * Given CSS and a sourcemap, append an embedded sourcemap (base64 encoded)
  * to the end of the css.
@@ -205,14 +280,3 @@ function addSourcemapInfoToOptimizedCss(css: string, sourcemap?: string) {
   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) {
-  return `app/styles/${options.output}`;
-}

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

@@ -1,4 +1,4 @@
-import { BroccoliConcatOptions, CSSBlocksEmberOptions, ResolvedCSSBlocksEmberOptions, getConfig } from "@css-blocks/ember-utils";
+import { BroccoliConcatOptions, CSSBlocksEmberOptions, getConfig } from "@css-blocks/ember-utils";
 import broccoliConcat = require("broccoli-concat");
 import BroccoliDebug = require("broccoli-debug");
 import funnel = require("broccoli-funnel");
@@ -8,23 +8,9 @@ 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, CSSBlocksStylesPreprocessorPlugin } from "./broccoli-plugin";
-
-interface AddonEnvironment {
-  parent: Addon | EmberApp;
-  app: EmberApp;
-  rootDir: string;
-  isApp: boolean;
-  modulePrefix: string;
-  config: ResolvedCSSBlocksEmberOptions;
-}
-
-interface CSSBlocksApplicationAddon {
-  _modulePrefix(): string;
-  env: AddonEnvironment | undefined;
-  getEnv(parent): AddonEnvironment;
-  broccoliAppPluginInstance: CSSBlocksApplicationPlugin | undefined;
-}
+import { CSSBlocksApplicationPlugin, CSSBlocksStylesPostprocessorPlugin, CSSBlocksStylesPreprocessorPlugin } from "./broccoli-plugin";
+import { appStylesPostprocessFilename, cssBlocksPostprocessFilename } from "./utils/filepaths";
+import { AddonEnvironment, CSSBlocksApplicationAddon } from "./utils/interfaces";
 
 /**
  * An ember-cli addon for Ember applications using CSS Blocks in its
@@ -202,15 +188,27 @@ const EMBER_ADDON: AddonImplementation<CSSBlocksApplicationAddon> = {
         return tree;
       }
 
+      // Verify there are no selector conflicts...
+      // (Only for builds with optimization enabled.)
+      let scannerTree;
+      if (env.config.optimization.enabled) {
+        scannerTree = new BroccoliDebug(
+          new CSSBlocksStylesPostprocessorPlugin(env, [tree]),
+          "css-blocks:css-postprocess-preconcat",
+        );
+      } else {
+        scannerTree = tree;
+      }
+
       // Create the concatenated file...
       const concatTree = broccoliConcat(
-        tree,
+        scannerTree,
         buildBroccoliConcatOptions(env),
       );
 
       // Then overwrite the original file with our final build artifact.
       const mergedTree = funnel(mergeTrees([tree, concatTree], { overwrite: true }), {
-        exclude: [`assets/${env.config.output}`],
+        exclude: [cssBlocksPostprocessFilename(env.config)],
       });
       return new BroccoliDebug(mergedTree, "css-blocks:css-postprocess");
     }
@@ -261,9 +259,11 @@ function buildBroccoliConcatOptions(env: AddonEnvironment): BroccoliConcatOption
  * @returns - Default broccoli-concat options, accounting for current env settings.
  */
 function buildDefaultBroccoliConcatOptions(env: AddonEnvironment): BroccoliConcatOptions {
+  const appCssPath = appStylesPostprocessFilename(env);
+  const blocksCssPath = cssBlocksPostprocessFilename(env.config);
   return {
-    inputFiles: [`assets/${env.config.output}`, `assets/${env.modulePrefix}.css`],
-    outputFile: `assets/${env.modulePrefix}.css`,
+    inputFiles: [blocksCssPath, appCssPath],
+    outputFile: appCssPath,
     sourceMapConfig: {
       enabled: true,
       extensions: ["css"],

packages/@css-blocks/ember-app/src/utils/filepaths.ts

@@ -0,0 +1,32 @@
+import { ResolvedCSSBlocksEmberOptions } from "@css-blocks/ember-utils";
+
+import { AddonEnvironment } from "./interfaces";
+
+/**
+ * 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.
+ */
+export function cssBlocksPreprocessFilename(options: ResolvedCSSBlocksEmberOptions) {
+  return `app/styles/${options.output}`;
+}
+
+/**
+ * Get the path to the compiled css blocks file in the postprocess tree.
+ * @param env - The current resolved addon configuration.
+ * @returns - Filepath in postprocess tree.
+ */
+export function cssBlocksPostprocessFilename(config: ResolvedCSSBlocksEmberOptions) {
+  return `assets/${config.output}`;
+}
+
+/**
+ * Get the path to the compiled app css file in the postprocess tree.
+ * @param env - The current addon environment information
+ * @returns - Filepath in postprocess tree.
+ */
+export function appStylesPostprocessFilename(env: AddonEnvironment) {
+  return `assets/${env.modulePrefix}.css`;
+}

packages/@css-blocks/ember-app/src/utils/interfaces.ts

@@ -0,0 +1,21 @@
+import { ResolvedCSSBlocksEmberOptions } from "@css-blocks/ember-utils";
+import EmberApp from "ember-cli/lib/broccoli/ember-app";
+import type Addon from "ember-cli/lib/models/addon";
+
+import { CSSBlocksApplicationPlugin } from "../broccoli-plugin";
+
+export interface AddonEnvironment {
+  parent: Addon | EmberApp;
+  app: EmberApp;
+  rootDir: string;
+  isApp: boolean;
+  modulePrefix: string;
+  config: ResolvedCSSBlocksEmberOptions;
+}
+
+export interface CSSBlocksApplicationAddon {
+  _modulePrefix(): string;
+  env: AddonEnvironment | undefined;
+  getEnv(parent): AddonEnvironment;
+  broccoliAppPluginInstance: CSSBlocksApplicationPlugin | undefined;
+}