feat(css-blocks): Full type safety for all BlockTree objects.

Author: amiller-gh

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

@@ -499,4 +499,4 @@ export class Block
 
 export function isBlock(o?: object): o is Block {
   return o instanceof Block;
-}
+}

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

@@ -1,5 +1,5 @@
 import { Block } from "./Block";
-import { NodeStyle } from "./Style";
+import { NodeStyle } from "./BlockTree";
 import { StateGroup } from "./StateGroup";
 import { State } from "./State";
 import { Attribute } from "@opticss/element-analysis";
@@ -18,15 +18,16 @@ export interface StateInfo {
 /**
  * Represents a Class present in the Block.
  */
-export class BlockClass extends NodeStyle<BlockClass, Block, StateGroup> {
+export class BlockClass extends NodeStyle<BlockClass, Block, Block, StateGroup> {
   private _sourceAttribute: Attribute;
 
-  protected newChild(name: string): StateGroup { return new StateGroup(name, this); }
+  protected newChild(name: string): StateGroup { return new StateGroup(name, this, this.block); }
 
   get isRoot(): boolean { return this.name === "root"; }
 
   public getGroups(): StateGroup[] { return this.children(); }
-  public getGroup(name: string, filter?: string): State[]  {
+  public getGroup(name: string): StateGroup | null { return this.getChild(name); }
+  public getStates(name: string, filter?: string): State[]  {
     let group = this.getChild(name);
     if (!group) { return []; }
     let states = group.states();
@@ -35,14 +36,32 @@ export class BlockClass extends NodeStyle<BlockClass, Block, StateGroup> {
   public ensureGroup(name: string): StateGroup { return this.ensureChild(name); }
   public resolveGroup(name: string): StateGroup | null { return this.resolveChild(name); }
   public stateGroups(): StateGroup[] { return this.children(); }
-  public resolveState(group: string, state: string): State | null {
-    let parent =  this.resolveChild(group);
-    if (parent) {
-      parent.resolveChild(state);
-    }
+  public resolveState(groupName: string, stateName = UNIVERSAL_STATE): State | null {
+    let parent = this.resolveChild(groupName);
+    if (parent) { return parent.resolveChild(stateName); }
     return null;
   }
 
+  /**
+   * Resolves all sub-states from this state's inheritance
+   * chain. Returns an empty object if no
+   * @param stateName The name of the sub-state to resolve.
+   */
+  resolveStates(groupName?: string): Map<string, State> {
+    let resolved: Map<string, State> = new Map;
+    let chain = this.resolveInheritance();
+    chain.push(this);
+    for (let base of chain) {
+      let groups = !groupName ? base.getGroups() : [base.getGroup(groupName)];
+      for (let group of groups ) {
+        if (group && group.states()) {
+          resolved = new Map([...resolved, ...group.statesMap()]);
+        }
+      }
+    }
+    return resolved;
+  }
+
   public booleanStates(): State[]{
     let res: State[] = [];
     for (let group of this.getGroups()) {
@@ -130,7 +149,7 @@ export class BlockClass extends NodeStyle<BlockClass, Block, StateGroup> {
    * @returns An array of all States that were requested.
    */
   getState(groupName: string, stateName = UNIVERSAL_STATE): State | null {
-    let group = this.getChild(groupName);
+    let group = this.getGroup(groupName);
     return group ? group.getState(stateName) || null : null;
   }
 

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

@@ -1,18 +1,15 @@
 import { ObjectDictionary } from "@opticss/util";
-import { Style, Block, isBlock, isBlockClass, isState } from './index';
-
-import { BlockPath } from "../BlockSyntax";
-import { CssBlockError } from "../errors";
 
 export abstract class Inheritable<
-  Self extends Inheritable<Self, Parent, Child>,
-  Parent extends Inheritable<any, any, Self> | null = null,
-  Child extends Inheritable<any, Self, any> | null = null
+  Self extends Inheritable<Self, Root, Parent, Child>,
+  Root extends Inheritable<any, Root, null, any> | null,
+  Parent extends Inheritable<any, Root, any, Self> | null,
+  Child extends Inheritable<any, Root, Self, any> | null
 > {
 
   protected _name: string;
   protected _base: Self | undefined;
-  public _block: Block;
+  protected _root: Root | Self;
   protected _baseName: string;
   protected _parent: Parent | undefined;
   protected _children: Map<string, Child> = new Map;
@@ -23,21 +20,26 @@ export abstract class Inheritable<
    */
   protected abstract newChild(name: string): Child;
 
-  // TODO: Currently only ever returns itself if is a style. Need to get it to look other things up.
-  public lookup(path: string | BlockPath): Style | undefined {
-    path = new BlockPath(path);
-    if (isBlockClass(this) || isState(this)) return this;
-    return undefined;
-  }
+  // // TODO: Currently only ever returns itself if is a style. Need to get it to look other things up.
+  // public lookup(path: string | BlockPath): Self | Child | Descendants | undefined {
+  //   path = new BlockPath(path);
+  //   let res: Self | Child | Descendants | null = this.asSelf();
+  //   for (let part of path.tokens()) {
+  //     res = res.resolveChild(part);
+  //     if (!res) { break; }
+  //   }
+  //   return res ? res : undefined;
+  // }
 
   /**
    * Inheritable constructor
    * @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, root?: Root) {
     this._name = name;
     this._parent = parent;
+    this._root = root || this.asSelf();
   }
 
   public get name(): string { return this._name; }
@@ -73,11 +75,8 @@ export abstract class Inheritable<
    * traverse parents and return the base block object.
    * @returns The base block in this container tree.
    */
-  public get block(): Block {
-    if (isBlock(this)) { return this._block = this; }
-    if (this._block !== undefined) { return this._block; }
-    if (this.parent) { return this._block = this.parent.block; }
-    throw new CssBlockError("Tried to access `block` on an orphaned `Style`");
+  public get block(): Root | Self {
+    return this._root;
   }
 
   setBase(baseName: string, base: Self) {
@@ -117,6 +116,19 @@ export abstract class Inheritable<
     return state || null;
   }
 
+  // /**
+  //  * Find the closest common ancestor Block between two Styles
+  //  * TODO: I think there is a more efficient way to do this.
+  //  * @param relative  Style to compare ancestry with.
+  //  * @returns The Style's common Block ancestor, or null.
+  //  */
+  // commonAncestor(relative: Style<Child>): Style<Child> | null {
+  //   let blockChain = new Set(...this.block.rootClass.resolveInheritance()); // lol
+  //   blockChain.add(this.block.rootClass);
+  //   let common = [relative.block.rootClass, ...relative.block.rootClass.resolveInheritance()].filter(b => blockChain.has(b));
+  //   return common.length ? common[0] as Style<Child> : null;
+  // }
+
   /**
    * Given a parent that is a base class of this style, retrieve this style's
    * base style from it, if it exists. This method does not traverse into base styles.
@@ -141,6 +153,10 @@ export abstract class Inheritable<
     return [...this._children.values()];
   }
 
+  protected childrenMap(): Map<string, Child> {
+    return new Map(this._children);
+  }
+
   // TODO: Cache this maybe? Convert entire model to only use hash?...
   protected childrenHash(): ObjectDictionary<Child> {
     let out = {};
@@ -150,29 +166,10 @@ export abstract class Inheritable<
     return out;
   }
 
-}
-
-export abstract class Source<
-  Self extends Inheritable<Self, null, Child>,
-  Child extends Inheritable<Child, Self, any>
-> extends Inheritable<Self, null, Child> {
-  public parent: null;
-  protected _children: Map<string, Child>;
-}
-
-export abstract class Node<
-  Self extends Inheritable<Self, Parent, Child>,
-  Parent extends Inheritable<Parent, any, Self>,
-  Child extends Inheritable<Child, Self, any>
-> extends Inheritable<Self, Parent, Child> {
-  public parent: Parent;
-  protected _children: Map<string, Child>;
-}
+  // TypeScript can't figure out that `this` is the `Self` so this private
+  // method casts it in a few places where it's needed.
+  private asSelf(): Self {
+    return <Self><any>this;
+  }
 
-export abstract class Sink<
-  Self extends Inheritable<Self, Parent, null>,
-  Parent extends Inheritable<any, any, Self>
-> extends Inheritable<Self, Parent, null> {
-  public parent: Parent;
-  protected _children: Map<string, null>;
 }

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

@@ -2,9 +2,10 @@ import { MultiMap, TwoKeyMultiMap } from "@opticss/util";
 import * as propParser from "css-property-parser";
 import * as postcss from "postcss";
 
-import { BLOCK_PROP_NAMES, RESOLVE_RE, SELF_SELECTOR, BlockPath } from "../BlockSyntax";
-import { sourceLocation } from "../SourceLocation";
-import * as errors from "../errors";
+import { BLOCK_PROP_NAMES, RESOLVE_RE, SELF_SELECTOR, BlockPath } from "../../BlockSyntax";
+import { isBlockClass, isState, Style } from '../index';
+import { sourceLocation } from "../../SourceLocation";
+import * as errors from "../../errors";
 
 import { Style } from "./Block";
 
@@ -113,6 +114,7 @@ export class RulesetContainer {
         if (referenceStr) {
 
           let blockPath = new BlockPath(referenceStr);
+          console.log(referenceStr);
           let other = style.block.lookup(referenceStr);
           let otherBlock = style.block.getReferencedBlock(blockPath.block);
 
@@ -144,7 +146,9 @@ export class RulesetContainer {
             );
           }
 
-          ruleSet.addResolution(decl.prop, other);
+          if (isBlockClass(other) || isState(other)) {
+            ruleSet.addResolution(decl.prop, other);
+          }
         }
 
         // If not a resolution, add this as a tracked property on our Ruleset.

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

@@ -1,19 +1,20 @@
 import { Attr } from "@opticss/element-analysis";
 
 import { RulesetContainer } from './RulesetContainer';
-import { OptionsReader } from "../OptionsReader";
-import { unionInto } from '../util/unionInto';
+import { OptionsReader } from "../../OptionsReader";
+import { unionInto } from '../../util/unionInto';
 import { Inheritable } from "./Inheritable";
 
 /**
  * Abstract class that serves as the base for all Styles. Contains basic
  * properties and abstract methods that extenders must implement.
  */
 export abstract class Style<
-  Self extends Style<any, any, any>,
-  Parent extends Inheritable<Parent, any, Self>,
-  Child extends Inheritable<any, Self, any> | null = null
-> extends Inheritable<Self, Parent, Child> {
+  Self extends Style<Self, Root, Parent, Child>,
+  Root extends Inheritable<Root, Root, null, any>,
+  Parent extends Inheritable<Parent, Root, any, Self>,
+  Child extends Inheritable<any, Root, Self, any> | null
+> extends Inheritable<Self, Root, Parent, Child> {
 
   public readonly rulesets: RulesetContainer;
 
@@ -23,8 +24,8 @@ export abstract class Style<
   /**
    * Save name, parent container, and create the PropertyContainer for this data object.
    */
-  constructor(name: string, parent: Parent) {
-    super(name, parent);
+  constructor(name: string, parent: Parent, root: Root) {
+    super(name, parent, root);
     this.rulesets = new RulesetContainer();
   }
 
@@ -121,19 +122,6 @@ export abstract class Style<
     return inherited;
   }
 
-  // /**
-  //  * Find the closest common ancestor Block between two Styles
-  //  * TODO: I think there is a more efficient way to do this.
-  //  * @param relative  Style to compare ancestry with.
-  //  * @returns The Style's common Block ancestor, or null.
-  //  */
-  // commonAncestor(relative: Style<Child>): Style<Child> | null {
-  //   let blockChain = new Set(...this.block.rootClass.resolveInheritance()); // lol
-  //   blockChain.add(this.block.rootClass);
-  //   let common = [relative.block.rootClass, ...relative.block.rootClass.resolveInheritance()].filter(b => blockChain.has(b));
-  //   return common.length ? common[0] as Style<Child> : null;
-  // }
-
   /**
    * Debug utility to help log Styles
    * @param opts  Options for rendering cssClass.
@@ -150,19 +138,6 @@ export abstract class Style<
   }
 }
 
-export abstract class NodeStyle<
-  Self extends Style<Self, Parent, Child>,
-  Parent extends Inheritable<Parent, any, Self>,
-  Child extends Inheritable<Child, Self, any>
-> extends Style<Self, Parent, Child> {
-  public parent: Parent;
-  protected _children: Map<string, Child>;
-}
-
-export abstract class SinkStyle <
-  Self extends Style<Self, Parent, null>,
-  Parent extends Inheritable<Parent, any, Self>
-> extends Style<Self, Parent, null> {
-  public parent: Parent;
-  protected _children: Map<string, null>;
-}
+export function isStyle(o: any): o is Style<any, any, any, any> {
+  return o && o instanceof Style;
+}