fix: Create a 'Source Analysis' for the new rewrite strategy.

The ElementAnalysis gets sealed and a bunch of styles get added into the
mix based on composition and inheritance. This is ideal for conflict
detection and for sending the analysis to opticss, but it's not ideal
for our new rewrite strategy which will apply composition and
inheritance after resolving runtime blocks and only takes as input the
exact styles that have been applied by the source author.

In order to prevent existing code from breaking, I've created a new
analysis object called 'ElementSourceAnalysis' which is in charge of
creating an "unresolved" view of the analysis. This is used in the
new rewriter now.

Author: chriseppstein

packages/@css-blocks/core/src/Analyzer/ElementAnalysis.ts

@@ -17,6 +17,7 @@ import {
   MultiMap,
   ObjectDictionary,
   objectValues,
+  assertNever,
 } from "@opticss/util";
 
 import {
@@ -169,6 +170,13 @@ export interface SerializedElementAnalysis {
   dynamicAttributes: Array<SerializedDynamicAttrs>;
 }
 
+type AnalyzedStyle<BooleanExpression, StringExpression, TernaryExpression> =
+  DependentAttr
+  | ConditionalDependentAttr<BooleanExpression>
+  | ConditionalDependentAttrGroup<StringExpression>
+  | StaticClass
+  | DynamicClasses<TernaryExpression>;
+
 /**
  * This class is used to track the styles and dynamic expressions on an element
  * and produce a runtime class expression in conjunction with a style mapping.
@@ -208,11 +216,8 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
   /** attributes set dynamically or depending on a dynamic class */
   dynamicAttributes: Array<DynamicAttrs<BooleanExpression, StringExpression>>;
 
-  private addedStyles: Array<DependentAttr
-                             | ConditionalDependentAttr<BooleanExpression>
-                             | ConditionalDependentAttrGroup<StringExpression>
-                             | StaticClass
-                             | DynamicClasses<TernaryExpression>>;
+  private explicitlyAddedStyles: Array<AnalyzedStyle<BooleanExpression, StringExpression, TernaryExpression>>;
+  private addedStyles: Array<AnalyzedStyle<BooleanExpression, StringExpression, TernaryExpression>>;
 
   /** classes declared explicitly and found in at least one dynamic class expression. */
   private dynamicClassExpressions: Map<BlockClass, DynamicClasses<TernaryExpression>>;
@@ -250,6 +255,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     this.allStaticStyles = new Set();
     this.allAttributes = new Set();
     this.addedStyles = new Array();
+    this.explicitlyAddedStyles = new Array();
     this._sealed = false;
     this._reservedClassNames = reservedClassNames;
   }
@@ -268,6 +274,17 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     return this.allClasses.get(block);
   }
 
+  blocksFound(): Array<Block> {
+    return new Array(...this.allClasses.keys());
+  }
+
+  stylesFound(): Array<Style> {
+    let styles = new Array<Style>();
+    styles.push(...this.classesFound());
+    styles.push(...this.attributesFound());
+    return styles;
+  }
+
   /**
    * Checks if the given class or block is set on this element,
    * or if it is implied by one of the other styles on this element.
@@ -419,12 +436,18 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     return false;
   }
 
+  getSourceAnalysis(): ElementSourceAnalysis<BooleanExpression, StringExpression, TernaryExpression> {
+    this.assertSealed(true);
+    return new ElementSourceAnalysis(this.explicitlyAddedStyles);
+  }
+
   /**
    * This method indicates that all styles have been added
    * and can be analyzed and validated.
    */
   seal() {
     this.assertSealed(false);
+    this.explicitlyAddedStyles = [...this.addedStyles];
 
     // After template analysis is done, we need to add all composed styles.
     // Conflict validation is done at Block construction time for these.
@@ -509,20 +532,15 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
       }
     }
 
-    let styles: [
-      Array<StaticClass | DynamicClasses<TernaryExpression>>,
-      Array<DependentAttr | ConditionalDependentAttr<BooleanExpression> | ConditionalDependentAttrGroup<StringExpression>>
-    ] = [[], []];
-    let [classStyles, attrStyles] = this.addedStyles.reduce(
-      (res, style) => {
-        if (isStaticClass(style) || isTrueCondition(style) || isFalseCondition(style)) {
-          res[0].push(style);
-        } else {
-          res[1].push(style);
-        }
-        return res;
-      },
-      styles);
+    let classStyles = new Array<StaticClass | DynamicClasses<TernaryExpression>>();
+    let attrStyles = new Array<DependentAttr | ConditionalDependentAttr<BooleanExpression> | ConditionalDependentAttrGroup<StringExpression>>();
+    for (let style of this.addedStyles) {
+      if (isStaticClass(style) || isTrueCondition(style) || isFalseCondition(style)) {
+        classStyles.push(style);
+      } else {
+        attrStyles.push(style);
+      }
+    }
 
     for (let classStyle of classStyles) {
       if (isStaticClass(classStyle)) {
@@ -935,7 +953,89 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
       delete classes[condition];
     }
   }
+}
 
+/**
+ * The source analysis is useful when the code wants an exact view of what styles
+ * were explicitly set on an element.
+ */
+export class ElementSourceAnalysis<BooleanExpression, StringExpression, TernaryExpression> {
+  addedStyles: AnalyzedStyle<BooleanExpression, StringExpression, TernaryExpression>[];
+  blocksFound: Set<Block>;
+  stylesFound: Set<Style>;
+  /**
+   * Styles that are always applied by the author.
+   * This includes styles that are disabled if a dynamic dependency isn't present. */
+  staticStyles: Array<Style>;
+  ternaryStyles: Array<DynamicClasses<TernaryExpression>>;
+  booleanStyles: Array<ConditionalAttr<BooleanExpression>>;
+  switchStyles: Array<DynamicAttrGroup<StringExpression>>;
+
+  constructor(addedStyles: Array<AnalyzedStyle<BooleanExpression, StringExpression, TernaryExpression>>) {
+    this.addedStyles = addedStyles;
+    this.blocksFound = new Set();
+    this.stylesFound = new Set<Style>();
+    this.staticStyles = [];
+    this.ternaryStyles = [];
+    this.booleanStyles = [];
+    this.switchStyles = [];
+    for (let s of addedStyles) {
+      if (isStaticClass(s)) {
+        this.staticStyles.push(s.klass);
+        this.stylesFound.add(s.klass);
+        this.blocksFound.add(s.klass.block);
+      } else if (isSwitch(s)) {
+        this.switchStyles.push(s);
+        for (let k of Object.keys(s.group)) {
+          this.stylesFound.add(s.group[k]);
+          this.blocksFound.add(s.group[k].block);
+        }
+      } else if (isTrueCondition(s) || isFalseCondition(s)) {
+        this.ternaryStyles.push(s);
+        if (isTrueCondition(s)) {
+          for (let c of s.whenTrue) {
+            this.stylesFound.add(c);
+            this.blocksFound.add(c.block);
+          }
+        }
+        if (isFalseCondition(s)) {
+          for (let c of s.whenFalse) {
+            this.stylesFound.add(c);
+            this.blocksFound.add(c.block);
+          }
+        }
+      } else if (isConditional(s)) {
+        this.booleanStyles.push(s);
+        for (let style of s.value) {
+          this.stylesFound.add(style);
+          this.blocksFound.add(style.block);
+        }
+      } else if (hasDependency(s)) {
+        // we don't need to track dependencies in the source view because it's a
+        // dynamic behavior that is decided by the style relationships and not
+        // based on what was authored for the dependent style. Since it wasn't
+        // also one of the dynamic types it must be static.
+        for (let style of s.value) {
+          this.staticStyles.push(style);
+          this.stylesFound.add(style);
+          this.blocksFound.add(style.block);
+        }
+      } else {
+        assertNever(s);
+      }
+    }
+    for (let b1 of this.blocksFound) {
+      for (let b2 of this.blocksFound) {
+        if (b1.isAncestorOf(b2)) {
+          this.blocksFound.delete(b1);
+        }
+      }
+    }
+  }
+
+  size(): number {
+    return this.addedStyles.length;
+  }
 }
 
 function dynamicClassAndDependentAttrs<BooleanExpression, StringExpression>(

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

@@ -31,13 +31,15 @@
   "devDependencies": {
     "@css-blocks/code-style": "^1.0.0",
     "@css-blocks/glimmer": "^1.0.0",
+    "@types/chai-as-promised": "^7.1.2",
     "@types/console-ui": "^2.2.3",
     "@types/core-object": "^3.0.1",
     "@types/express": "^4.17.6",
     "@types/fs-extra": "^8.0.0",
     "@types/glob": "^7.1.1",
     "broccoli-node-api": "^1.7.0",
     "broccoli-test-helper": "^2.0.0",
+    "chai-as-promised": "^7.1.1",
     "ember-cli-htmlbars": "^4.3.1",
     "typescript": "~3.8.3",
     "watch": "^1.0.2"
@@ -48,6 +50,7 @@
   "dependencies": {
     "@css-blocks/config": "^1.0.0",
     "@css-blocks/core": "^1.0.0",
+    "@css-blocks/glimmer": "^1.0.0",
     "@glimmer/compiler": "^0.43.0",
     "@glimmer/syntax": "^0.43.0",
     "@opticss/template-api": "^0.6.3",