feat(css-blocks): Remove BlockTree abstraction.

After spending considerable time exploring this new structure, I found
the BlockTree abstraction mostly obfuscated the connections between
core models of the Block (Block, Class, and State). By keeping
the Inheritable data type and going directly to the concrete classes
without an intermediate abstraction, we're still able to keep the
Block types split up, but have less cognitive overhead while navigating
the data model.

Author: chriseppstein

packages/css-blocks/src/Block/Block.ts

@@ -23,10 +23,8 @@ import { FileIdentifier } from "../importing";
 import { LocalScopedContext } from "../util/LocalScope";
 
 import { BlockClass } from "./BlockClass";
-import { SourceContainer } from "./BlockTree";
-import { State } from "./State";
-
-export type Style = BlockClass | State;
+import { Inheritable } from "./Inheritable";
+import { Styles } from "./Styles";
 
 export const OBJ_REF_SPLITTER = (s: string): [string, string] | undefined => {
   let index = s.indexOf(".");
@@ -37,13 +35,13 @@ export const OBJ_REF_SPLITTER = (s: string): [string, string] | undefined => {
   return;
 };
 
-export class Block extends SourceContainer<Block, BlockClass> {
+export class Block extends Inheritable<Block, Block, never, BlockClass> {
   private _rootClass: BlockClass;
   private _blockReferences: ObjectDictionary<Block> = {};
   private _blockReferencesReverseLookup: Map<Block, string> = new Map();
   private _identifier: FileIdentifier;
   private _implements: Block[] = [];
-  private _localScope: LocalScopedContext<Block, Style>;
+  private _localScope: LocalScopedContext<Block, Styles>;
   private hasHadNameReset = false;
   /**
    * array of paths that this block depends on and, if changed, would
@@ -59,12 +57,14 @@ export class Block extends SourceContainer<Block, BlockClass> {
     super(name);
     this._identifier = identifier;
     this.parsedRuleSelectors = new WeakMap();
-    this._localScope = new LocalScopedContext<Block, Style>(OBJ_REF_SPLITTER, this);
+    this._localScope = new LocalScopedContext<Block, Styles>(OBJ_REF_SPLITTER, this);
     this._dependencies = new Set<string>();
     this._rootClass = new BlockClass(ROOT_CLASS, this);
     this.addClass(this._rootClass);
   }
 
+  get block(): Block { return this.root; }
+
   get name() { return this._name; }
   set name(name: string) {
     if (this.hasHadNameReset) {
@@ -79,7 +79,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
   }
 
   /// Start of methods to implement LocalScope<Block, Style>
-  subScope(name: string): LocalScopedContext<Block, Style> | undefined {
+  subScope(name: string): LocalScopedContext<Block, Styles> | undefined {
     let block = this._blockReferences[name];
     if (block) {
       return block._localScope;
@@ -88,7 +88,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
     }
   }
 
-  lookupLocal(name: string): Style | undefined {
+  lookupLocal(name: string): Styles | undefined {
     let blockRef = this._blockReferences[name];
     if (blockRef) {
       return blockRef.rootClass;
@@ -118,7 +118,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
    *   A single dot by itself returns the current block.
    * @returns The Style referenced at the supplied path.
    */
-  public lookup(path: string | BlockPath, errLoc?: SourceLocation): Style | undefined {
+  public lookup(path: string | BlockPath, errLoc?: SourceLocation): Styles | undefined {
     path = new BlockPath(path);
     let block = this.getReferencedBlock(path.block);
     if (!block) {
@@ -183,8 +183,8 @@ export class Block extends SourceContainer<Block, BlockClass> {
    * @param b The block to check implementation against.
    * @returns The Styles from b that are missing in the block.
    */
-  checkImplementation(b: Block): Style[] {
-    let missing: Style[] = [];
+  checkImplementation(b: Block): Styles[] {
+    let missing: Styles[] = [];
     for (let o of b.all()) {
       if (!this.find(o.asSource())) {
         missing.push(o);
@@ -198,7 +198,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
    */
   checkImplementations(): void {
     for (let b of this.getImplementedBlocks()) {
-      let missing: Style[] = this.checkImplementation(b);
+      let missing: Styles[] = this.checkImplementation(b);
       let paths = missing.map(o => o.asSource()).join(", ");
       if (missing.length > 0) {
         let s = missing.length > 1 ? "s" : "";
@@ -208,7 +208,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
   }
 
   // This is a really dumb impl
-  find(sourceName: string): Style | undefined {
+  find(sourceName: string): Styles | undefined {
     let blockRefName: string | undefined;
     let md = sourceName.match(CLASS_NAME_IDENT);
     if (md && md.index === 0) {
@@ -284,8 +284,8 @@ export class Block extends SourceContainer<Block, BlockClass> {
    * @param shallow Pass true to not include inherited objects.
    * @returns Array of Styles.
    */
-  all(shallow?: boolean): Style[] {
-    let result = new Array<Style>();
+  all(shallow?: boolean): Styles[] {
+    let result = new Array<Styles>();
     for (let blockClass of this.classes) {
       result.push(...blockClass.all());
     }
@@ -295,8 +295,8 @@ export class Block extends SourceContainer<Block, BlockClass> {
     return result;
   }
 
-  merged(): MultiMap<string, Style> {
-    let map = new MultiMap<string, Style>(false);
+  merged(): MultiMap<string, Styles> {
+    let map = new MultiMap<string, Styles>(false);
     for (let obj of this.all()) {
       map.set(obj.asSource(), obj);
     }
@@ -307,7 +307,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
    * Fetch a the cached `Style` from `Block` given `NodeAndType`.
    * @param obj The `NodeAndType` object to use for `Style` lookup.
    */
-  nodeAndTypeToStyle(obj: NodeAndType): Style | null {
+  nodeAndTypeToStyle(obj: NodeAndType): Styles | null {
     switch (obj.blockType) {
       case BlockType.root:
         return this.rootClass;
@@ -327,7 +327,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
     }
   }
 
-  nodeAsStyle(node: selectorParser.Node): [Style, number] | null {
+  nodeAsStyle(node: selectorParser.Node): [Styles, number] | null {
     if (node.type === selectorParser.CLASS && node.value === ROOT_CLASS) {
       return [this.rootClass, 0];
     } else if (node.type === selectorParser.TAG) {
@@ -444,7 +444,7 @@ export class Block extends SourceContainer<Block, BlockClass> {
     let sortedNames = [...sourceNames].sort();
     for (let n of sortedNames) {
       if (n !== `.${ROOT_CLASS}`) {
-        let o = this.find(n) as Style;
+        let o = this.find(n) as Styles;
         result.push(o.asDebug(opts));
       }
     }

packages/css-blocks/src/Block/BlockClass.ts

@@ -5,9 +5,11 @@ import { OptionsReader } from "../OptionsReader";
 import { OutputMode } from "../OutputMode";
 
 import { Block } from "./Block";
-import { StyleNode } from "./BlockTree";
+import { RulesetContainer } from "./RulesetContainer";
 import { State } from "./State";
 import { StateGroup } from "./StateGroup";
+import { Style } from "./Style";
+import { Styles } from "./Styles";
 
 /**
  * Holds state values to be passed to the StateContainer.
@@ -20,8 +22,14 @@ export interface StateInfo {
 /**
  * Represents a Class present in the Block.
  */
-export class BlockClass extends StyleNode<BlockClass, Block, Block, StateGroup> {
+export class BlockClass extends Style<BlockClass, Block, Block, StateGroup> {
   private _sourceAttribute: Attribute | undefined;
+  public readonly rulesets: RulesetContainer<BlockClass>;
+
+  constructor(name: string, parent: Block) {
+    super(name, parent);
+    this.rulesets = new RulesetContainer(this);
+  }
 
   protected newChild(name: string): StateGroup { return new StateGroup(name, this); }
 
@@ -116,7 +124,7 @@ export class BlockClass extends StyleNode<BlockClass, Block, Block, StateGroup>
    * @param shallow Pass false to not include children.
    * @returns Array of Styles.
    */
-  all(shallow?: boolean): (State | BlockClass)[] {
+  all(shallow?: boolean): Styles[] {
     let result: (State | BlockClass)[] = [this];
     if (!shallow) {
       result = result.concat(this.allStates());
@@ -189,8 +197,8 @@ export class BlockClass extends StyleNode<BlockClass, Block, Block, StateGroup>
    */
   debug(opts: OptionsReader): string[] {
     let result: string[] = [];
-    for (let state of this.all()) {
-      result.push(state.asDebug(opts));
+    for (let style of this.all()) {
+      result.push(style.asDebug(opts));
     }
     return result;
   }

packages/css-blocks/src/Block/BlockTree/index.ts

@@ -13,23 +13,23 @@
  */
 import { ObjectDictionary } from "@opticss/util";
 
-import { SourceLocation } from "../../SourceLocation";
+import { SourceLocation } from "../SourceLocation";
 
 /* tslint:disable:prefer-whatever-to-any */
 export type AnyNode = Inheritable<any, any, any, any>;
 
 export abstract class Inheritable<
   Self extends Inheritable<Self, Root, Parent, Child>,
-  Root extends Inheritable<any, Root, null, AnyNode> | Self,
+  Root extends Inheritable<any, Root, never, AnyNode> | Self,
   Parent extends Inheritable<any, Root, AnyNode | null, Self> | null,
-  Child extends Inheritable<any, Root, Self, AnyNode | null> | null
+  Child extends Inheritable<any, Root, Self, AnyNode | never> | never
 > {
 /* tslint:enable:prefer-whatever-to-any */
 
   protected _name: string;
   protected _base: Self | undefined;
   protected _root: Root | Self;
-  protected _parent: Parent;
+  protected _parent: Parent | null;
   protected _children: Map<string, Child> = new Map();
 
   /**
@@ -43,14 +43,17 @@ export abstract class Inheritable<
    * @param name Name for this Inheritable instance.
    * @param parent The parent Inheritable of this node.
    */
-  constructor(name: string, parent: Parent) {
+  constructor(name: string, parent?: Parent) {
     this._name = name;
-    this._parent = parent;
+    this._parent = parent || null;
     this._root = parent ? parent.root : this.asSelf(); // `Root` is only set to `Self` for `Source` nodes.
   }
 
   public get name(): string { return this._name; }
-  public get parent(): Parent { return this._parent; }
+
+  public get parent(): Parent {
+    return <Parent>this._parent;
+  }
 
   /**
    * Get the style that this style inherits from, if any.