From 6824fa8a4cc141e83713b9dd0f65df15b9ad455a Mon Sep 17 00:00:00 2001
From: Adam Miller <ammiller@linkedin.com>
Date: Thu, 15 Feb 2018 18:31:04 -0800
Subject: [PATCH] feat(css-blocks): Broke up Block.ts, refactored foundational
 BlockObject constructs, added StateGroup concept.

This is a BREAKING CHANGES (obvs).
---
 packages/css-blocks/src/Block/Block.ts        | 915 ++----------------
 packages/css-blocks/src/Block/BlockClass.ts   | 178 ++++
 packages/css-blocks/src/Block/Inheritable.ts  | 178 ++++
 .../css-blocks/src/Block/RulesetContainer.ts  |   2 +-
 packages/css-blocks/src/Block/State.ts        |  90 ++
 packages/css-blocks/src/Block/StateGroup.ts   | 138 +++
 packages/css-blocks/src/Block/Style.ts        | 168 ++++
 packages/css-blocks/src/Block/index.ts        |   7 +-
 .../src/BlockCompiler/ConflictResolver.ts     |   6 +-
 .../css-blocks/src/BlockSyntax/BlockSyntax.ts |   5 +
 .../src/TemplateAnalysis/ElementAnalysis.ts   |  31 +-
 packages/css-blocks/test/opticss-test.ts      |  10 +-
 .../css-blocks/test/state-container-test.ts   |  18 +-
 .../css-blocks/test/template-analysis-test.ts |  29 +-
 .../validations/class-pairs-validator-test.ts |   2 +-
 .../property-conflict-validator-test.ts       |  10 +-
 .../validations/root-class-validator-test.ts  |   3 +-
 .../state-parent-validator-test.ts            |  15 +
 .../test/validations/validator-test.ts        |   2 +-
 19 files changed, 930 insertions(+), 877 deletions(-)
 create mode 100644 packages/css-blocks/src/Block/BlockClass.ts
 create mode 100644 packages/css-blocks/src/Block/Inheritable.ts
 create mode 100644 packages/css-blocks/src/Block/State.ts
 create mode 100644 packages/css-blocks/src/Block/StateGroup.ts
 create mode 100644 packages/css-blocks/src/Block/Style.ts

diff --git a/packages/css-blocks/src/Block/Block.ts b/packages/css-blocks/src/Block/Block.ts
index cedd83c52..28ddbc2a9 100644
--- a/packages/css-blocks/src/Block/Block.ts
+++ b/packages/css-blocks/src/Block/Block.ts
@@ -1,261 +1,49 @@
+import * as postcss from 'postcss';
+import { ObjectDictionary, MultiMap, assertNever } from "@opticss/util";
+import selectorParser = require('postcss-selector-parser');
+
+import { FileIdentifier } from "../importing";
+import { LocalScopedContext } from "../util/LocalScope";
+import { CssBlockError } from "../errors";
+import { OptionsReader } from "../OptionsReader";
+import { CLASS_NAME_IDENT, ROOT_CLASS } from "../BlockSyntax";
+
+import { Source } from "./BlockTree";
+import { BlockClass } from "./BlockClass";
+import { State } from "./State";
+import { BlockPath } from "../BlockSyntax";
+
 import {
-  Attr,
-  Attribute,
-  AttributeNS,
-  AttributeValueChoice,
-  ValueAbsent,
-  ValueConstant,
-} from "@opticss/element-analysis";
-import { assertNever, MultiMap, ObjectDictionary, objectValues, whatever } from "@opticss/util";
-import {
-  CompoundSelector,
-  ParsedSelector,
-  parseSelector,
   SelectorFactory,
+  parseSelector,
+  ParsedSelector,
+  CompoundSelector
 } from "opticss";
-import * as postcss from "postcss";
-import selectorParser = require("postcss-selector-parser");
-
 import {
-  BlockType,
+  stateParser,
   isClassNode,
   isStateNode,
   NodeAndType,
-  stateParser,
+  BlockType
 } from "../BlockParser";
-import { StateInfo } from "../BlockParser/block-intermediates";
-import { CLASS_NAME_IDENT } from "../BlockSyntax";
-import { OptionsReader } from "../OptionsReader";
-import { OutputMode } from "../OutputMode";
-import { CssBlockError } from "../errors";
-import { FileIdentifier } from "../importing";
-import { HasLocalScope, HasScopeLookup, LocalScopedContext } from "../util/LocalScope";
-import { unionInto } from "../util/unionInto";
 
-import { RulesetContainer } from "./RulesetContainer";
+export type Style = BlockClass | State;
 
 export const OBJ_REF_SPLITTER = (s: string): [string, string] | undefined => {
-  let index = s.indexOf(".");
-  if (index < 0) index = s.indexOf("[");
+  let index = s.indexOf('.');
+  if (index < 0) index = s.indexOf('[');
   if (index >= 0) {
     return [s.substr(0, index), s.substring(index)];
   }
   return;
 };
 
-export type Style = BlockClass | State | SubState;
-export type StyleContainer = Block | BlockClass | State;
-
-/**
- * Abstract class that serves as the base for all Styles. Contains basic
- * properties and abstract methods that extenders must implement.
- */
-export abstract class BlockObject<StyleType extends Style, ContainerType extends StyleContainer = StyleContainer> {
-  public readonly rulesets: RulesetContainer;
-
-  protected _name: string;
-  protected _container: ContainerType;
-
-  /** cache of resolveStyles() */
-  private _resolvedStyles: Set<Style> | undefined;
-  /** cache for the block getter. */
-  private _block: Block | undefined;
-  /** cache for the block getter. */
-  private _base: StyleType | null | undefined;
-
-  /**
-   * Save name, parent container, and create the PropertyContainer for this data object.
-   */
-  constructor(name: string, container: ContainerType) {
-    this._name = name;
-    this._container = container;
-    this.rulesets = new RulesetContainer();
-  }
-
-  /**
-   * Readonly name of this object.
-   */
-  get name(): string {
-    return this._name;
-  }
-
-  /**
-   * Block parent container.
-   */
-  get parent(): ContainerType {
-    return this._container;
-  }
-
-  /**
-   * 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.
-   */
-  protected abstract getBaseFromBaseParent(baseParent: ContainerType): StyleType | undefined;
-
-  /**
-   * Get the style that this style inherits from, if any.
-   *
-   * This walks down the declared styles of the parent's inheritance chain,
-   * and attempts to find a matching directly declared style on each.
-   *
-   * The result is cached because it never changes and is decidable as soon
-   * as the style is instantiated.
-   */
-  public get base(): StyleType | undefined {
-    if (this._base !== undefined) {
-      return this._base || undefined;
-    }
-    let baseParent: ContainerType | undefined = <ContainerType | undefined>this.parent.base;
-    while (baseParent) {
-      let cls = this.getBaseFromBaseParent(baseParent);
-      if (cls) {
-        this._base = cls;
-        return cls;
-      }
-      baseParent = <ContainerType | undefined>baseParent.base;
-    }
-    this._base = null;
-    return undefined;
-  }
-
-  /**
-   * Return the local identifier for this `Style`.
-   * @returns The local name.
-   */
-  public abstract localName(): string;
-
-  /**
-   * Return an attribute for analysis using the authored source syntax.
-   */
-  public abstract asSourceAttributes(): Attr[];
-
-  /**
-   * Return the source selector this `Style` was read from.
-   * @returns The source selector.
-   */
-  public abstract asSource(): string;
-
-  /**
-   * Return the css selector for this `Style`.
-   * @param opts Option hash configuring output mode.
-   * @returns The CSS class.
-   */
-  public abstract cssClass(opts: OptionsReader): string;
-
-  /**
-   * traverse parents and return the base block object.
-   * @returns The base block in this container tree.
-   */
-  public get block(): Block {
-    if (this._block !== undefined) {
-      return this._block;
-    }
-    let p: StyleContainer = this.parent;
-    if (isBlock(p)) {
-      return this._block = p;
-    } else {
-      return this._block = p.block;
-    }
-  }
-
-  /**
-   * Returns all the classes needed to represent this block object
-   * including inherited classes.
-   * @returns this object's css class and all inherited classes.
-   */
-  cssClasses(opts: OptionsReader): string[] {
-    let classes = new Array<string>();
-    for (let style of this.resolveStyles()) {
-      classes.push(style.cssClass(opts));
-    }
-    return classes;
-  }
-
-  /**
-   * Return all Block Objects that are implied by this object.
-   * This takes inheritance, state/class correlations, and any
-   * other declared links between styles into account.
-   *
-   * This block object is included in the returned result so the
-   * resolved value's size is always 1 or greater.
-   */
-  public resolveStyles(): Set<Style> {
-    if (this._resolvedStyles) {
-      return new Set(this._resolvedStyles);
-    }
-
-    let inheritedStyles = this.resolveInheritance();
-    this._resolvedStyles = new Set(inheritedStyles);
-    this._resolvedStyles.add(this.asStyle());
-
-    for (let s of inheritedStyles) {
-      let implied = s.impliedStyles();
-      if (!implied) continue;
-      for (let i of implied) {
-        unionInto(this._resolvedStyles, i.resolveStyles());
-      }
-    }
-
-    return new Set(this._resolvedStyles);
-  }
-
-  /**
-   * Returns the styles that are directly implied by this style.
-   * Does not include the styles that this style inherits implied.
-   * Does not include the styles that this style implies inherits.
-   *
-   * returns undefined if no styles are implied.
-   */
-  impliedStyles(): Set<Style> | undefined {
-    return undefined;
-  }
-
-  /**
-   * Compute all block objects that are implied by this block object through
-   * inheritance. Does not include this object or the styles it implies through
-   * other relationships to this object.
-   *
-   * If nothing is inherited, this returns an empty set.
-   */
-  resolveInheritance(): Array<StyleType> {
-    let inherited = new Array<StyleType>();
-    let base: StyleType | undefined = this.base;
-    while (base) {
-      inherited.unshift(base);
-      base = <StyleType | undefined>base.base;
-    }
-    return inherited;
-  }
-
-  /**
-   * Debug utility to help log Styles
-   * @param opts  Options for rendering cssClass.
-   * @returns A debug string.
-   */
-  asDebug(opts: OptionsReader) {
-    return `${this.asSource()} => ${this.cssClasses(opts).map(n => `.${n}`).join(" ")}`;
-  }
-
-  // TypeScript can't figure out that `this` is the `StyleType` so this private
-  // method casts it in a few places where it's needed.
-  private asStyle(): StyleType {
-    // tslint:disable-next-line:prefer-whatever-to-any
-    return <StyleType><any>this;
-  }
-}
-
 export class Block
-  implements SelectorFactory,
-             HasLocalScope<Block, Style>,
-             HasScopeLookup<Style>
-{
-  private _name: string;
-  private _classes: ObjectDictionary<BlockClass> = {};
+  extends Source<Block, BlockClass>
+  implements SelectorFactory {
   private _rootClass: BlockClass;
   private _blockReferences: ObjectDictionary<Block> = {};
   private _identifier: FileIdentifier;
-  private _base?: Block;
-  private _baseName?: string;
   private _implements: Block[] = [];
   private _localScope: LocalScopedContext<Block, Style>;
   private hasHadNameReset = false;
@@ -270,22 +58,19 @@ export class Block
   public readonly parsedRuleSelectors: WeakMap<postcss.Rule, ParsedSelector[]>;
 
   constructor(name: string, identifier: FileIdentifier) {
+    super(name);
     this._identifier = identifier;
-    this._name = name;
     this.parsedRuleSelectors = new WeakMap();
     this._localScope = new LocalScopedContext<Block, Style>(OBJ_REF_SPLITTER, this);
     this._dependencies = new Set<string>();
-    this._rootClass = new BlockClass("root", this);
+    this._rootClass = new BlockClass(ROOT_CLASS, this, this);
     this.addClass(this._rootClass);
   }
 
-  get name() {
-    return this._name;
-  }
-
+  get name() { return this._name; }
   set name(name: string) {
     if (this.hasHadNameReset) {
-      throw new CssBlockError("Can not set block name more than once.");
+      throw new CssBlockError('Can not set block name more than once.');
     }
     this._name = name;
     this.hasHadNameReset = true;
@@ -312,9 +97,7 @@ export class Block
       return this.all(false).find(o => o.asSource() === name);
     }
   }
-  /// End of methods to implement LocalScope<Block, Style>
 
-  /// Start of methods to implement LocalScope<Block, Style>
   /**
    * Lookup a sub-block either locally, or on a referenced foreign block.
    * @param reference
@@ -336,8 +119,26 @@ export class Block
    *   A single dot by itself returns the current block.
    * @returns The Style referenced at the supplied path.
    */
-  lookup(reference: string): Style | undefined {
-    return this._localScope.lookup(reference);
+  public lookup(path: string | BlockPath): Style | undefined {
+    path = new BlockPath(path);
+    let block = this.getReferencedBlock(path.block);
+    if (!block) return undefined;
+    let klass = block.resolveClass(path.class);
+    if (!klass) return undefined;
+    let state;
+    if (path.state) {
+      let groupName = path.state.group ? path.state.group : path.state.name;
+      let stateName = path.state.group ? path.state.name : undefined;
+      state = klass.resolveState(groupName, stateName);
+      if (!state) return undefined;
+    }
+    return state || klass;
+
+    // for (let part of path.tokens()) {
+
+    //   res = res.resolveChild(part);
+    //   if (!res) { break; }
+    // }
   }
 
   /// End of methods to implement LocalScope<Block, Style>
@@ -348,37 +149,26 @@ export class Block
    *
    * It is not necessary or helpful to add css-block files.
    */
-  addDependency(filePath: string) {
-    this._dependencies.add(filePath);
+  addDependency(filepath: string) {
+    this._dependencies.add(filepath);
   }
 
   get dependencies(): string[] {
     return new Array(...this._dependencies);
   }
 
-  /**
-   * Get the block that this block inherits from.
-   */
-  get base(): Block | undefined {
-    return this._base;
-  }
-
-  get baseName(): string | undefined {
-    return this._baseName;
-  }
-
   get identifier(): FileIdentifier {
     return this._identifier;
   }
 
-  setBase(baseName: string, base: Block) {
-    this._baseName = baseName;
-    this._base = base;
-  }
+  getClass(name: string): BlockClass | null { return name ? this.getChild(name) : this.getChild(ROOT_CLASS); }
+  resolveClass(name: string): BlockClass | null { return name ? this.resolveChild(name) : this.resolveChild(ROOT_CLASS); }
+  newChild(name: string): BlockClass { return new BlockClass(name, this, this); }
 
-  getClass(name: string): BlockClass | undefined {
-    return this._classes[name];
-  }
+  // Alias protected methods from `Inheritable` to Block-specific names, and expose them as a public API.
+  get classes(): BlockClass[] { return this.children(); }
+  addClass(blockClass: BlockClass) { this.setChild(blockClass.name, blockClass); }
+  ensureClass(name: string): BlockClass { return this.ensureChild(name); }
 
   getImplementedBlocks(): Block[] {
     return this._implements.slice();
@@ -409,10 +199,10 @@ export class Block
   checkImplementations(): void {
     for (let b of this.getImplementedBlocks()) {
       let missing: Style[] = this.checkImplementation(b);
-      let missingStr = missing.map(o => o.asSource()).join(", ");
+      let paths = missing.map(o => o.asSource()).join(", ");
       if (missing.length > 0) {
-        let s = missing.length > 1 ? "s" : "";
-        throw new CssBlockError(`Missing implementation${s} for: ${missingStr} from ${b.identifier}`);
+        let s = missing.length > 1 ? 's' : '';
+        throw new CssBlockError(`Missing implementation${s} for: ${paths} from ${b.identifier}`);
       }
     }
   }
@@ -441,35 +231,12 @@ export class Block
     return this.all().find(e => e.asSource() === sourceName);
   }
 
-  eachBlockReference(callback: (name: string, block: Block) => whatever) {
+  eachBlockReference(callback: (name: string, block: Block) => any) {
     for (let name of Object.keys(this._blockReferences)) {
       callback(name, this._blockReferences[name]);
     }
   }
 
-  get classes(): BlockClass[] {
-    let classes: BlockClass[] = [];
-    for (let e of Object.keys(this._classes)) {
-      classes.push(this._classes[e]);
-    }
-    return classes;
-  }
-
-  addClass(blockClass: BlockClass) {
-    this._classes[blockClass.name] = blockClass;
-  }
-
-  ensureClass(name: string): BlockClass {
-    let blockClass;
-    if (this._classes[name]) {
-      blockClass = this._classes[name];
-    } else {
-      blockClass = new BlockClass(name, this);
-      this.addClass(blockClass);
-    }
-    return blockClass;
-  }
-
   addBlockReference(localName: string, other: Block) {
     this._blockReferences[localName] = other;
   }
@@ -535,7 +302,7 @@ export class Block
    * Fetch a the cached `Style` from `Block` given `NodeAndType`.
    * @param obj The `NodeAndType` object to use for `Style` lookup.
    */
-  nodeAndTypeToStyle(obj: NodeAndType): Style | undefined {
+  nodeAndTypeToStyle(obj: NodeAndType): Style | null {
     switch (obj.blockType) {
       case BlockType.root:
         return this.rootClass;
@@ -549,25 +316,25 @@ export class Block
         if (classObj) {
           return classObj._getState(stateParser(<selectorParser.Attribute>obj.node));
         }
-        return undefined;
+        return null;
       default:
         return assertNever(obj.blockType);
     }
   }
 
   nodeAsStyle(node: selectorParser.Node): [Style, number] | null {
-    if (node.type === selectorParser.CLASS && node.value === "root") {
+    if (node.type === selectorParser.CLASS && node.value === ROOT_CLASS) {
       return [this.rootClass, 0];
     } else if (node.type === selectorParser.TAG) {
-      let otherBlock = this.getReferencedBlock(node.value);
+      let otherBlock = this.getReferencedBlock(node.value!);
       if (otherBlock) {
         let next = node.next();
         if (next && isClassNode(next)) {
-          let klass = otherBlock.getClass(next.value);
+          let klass = otherBlock.getClass(next.value!);
           if (klass) {
             let another = next.next();
             if (another && isStateNode(another)) {
-              let info = stateParser(another);
+              let info = stateParser(<selectorParser.Attribute>another);
               let state = klass._getState(info);
               if (state) {
                 return [state, 2];
@@ -582,7 +349,7 @@ export class Block
             return null;
           }
         } else if (next && isStateNode(next)) {
-          let info = stateParser(next);
+          let info = stateParser(<selectorParser.Attribute>next);
           let state = otherBlock.rootClass._getState(info);
           if (state) {
             return [state, 1];
@@ -596,15 +363,15 @@ export class Block
         return null;
       }
     } else if (node.type === selectorParser.CLASS) {
-      let klass = this.getClass(node.value);
-      if (klass === undefined) {
+      let klass = this.getClass(node.value!);
+      if (klass === null) {
         return null;
       }
       let next = node.next();
       if (next && isStateNode(next)) {
-        let info = stateParser(next);
+        let info = stateParser(<selectorParser.Attribute>next);
         let state = klass._getState(info);
-        if (state === undefined) {
+        if (state === null) {
           return null;
         } else {
           return [state, 1];
@@ -613,7 +380,7 @@ export class Block
         return [klass, 0];
       }
     } else if (isStateNode(node)) {
-      let info = stateParser(node);
+      let info = stateParser(<selectorParser.Attribute>node);
       let state = this.rootClass._ensureState(info);
       if (state) {
         return [state, 0];
@@ -671,7 +438,7 @@ export class Block
     let sourceNames = new Set<string>(this.all().map(s => s.asSource()));
     let sortedNames = [...sourceNames].sort();
     for (let n of sortedNames) {
-      if (n !== ".root") {
+      if (n !== `.${ROOT_CLASS}`) {
         let o = this.find(n) as Style;
         result.push(o.asDebug(opts));
       }
@@ -709,12 +476,12 @@ export class Block
    * @return ParsedSelector array
    */
   getParsedSelectors(rule: postcss.Rule): ParsedSelector[] {
-    let selectors = this.parsedRuleSelectors.get(rule);
-    if (!selectors) {
-      selectors = parseSelector(rule);
-      this.parsedRuleSelectors.set(rule, selectors);
+    let sels = this.parsedRuleSelectors.get(rule);
+    if (!sels) {
+      sels = parseSelector(rule);
+      this.parsedRuleSelectors.set(rule, sels);
     }
-    return selectors;
+    return sels;
   }
 
   /**
@@ -730,524 +497,6 @@ export class Block
   }
 }
 
-export function isBlock(o: object): o is Block {
+export function isBlock(o?: object): o is Block {
   return o instanceof Block;
-}
-
-/**
- * A Map of State objects
- */
-type StateMap = ObjectDictionary<State>;
-
-/** Parent types for a state */
-export type StateParent = BlockClass | State;
-
-/**
- * Valid parent types for a Style
- */
-export type StyleParent = Block | BlockClass | State | undefined;
-
-/**
- * Represents a Class present in the Block.
- */
-export class BlockClass extends BlockObject<BlockClass, Block> {
-  private _sourceAttribute: Attribute | undefined;
-  private _states: StateMap = {};
-
-  /**
-   * BlockClass constructor
-   * @param name Name for this BlockClass instance
-   * @param parent The parent block of this class.
-   */
-  constructor(name: string, parent: Block) {
-    super(name, parent);
-  }
-
-  get isRoot(): boolean {
-    return this.name === "root";
-  }
-
-  protected getBaseFromBaseParent(baseParent: Block): BlockClass | undefined {
-    return baseParent.getClass(this.name);
-  }
-
-  localName(): string {
-    return this.name;
-  }
-
-  /**
-   * Export as original class name.
-   * @returns String representing original class.
-   */
-  asSource(): string {
-    return `.${this.name}`;
-  }
-
-  asSourceAttributes(): Attribute[] {
-    if (!this._sourceAttribute) {
-      this._sourceAttribute = new Attribute("class", { constant: this.name });
-    }
-    return [this._sourceAttribute];
-  }
-
-  /**
-   * Export as new class name.
-   * @param opts Option hash configuring output mode.
-   * @returns String representing output class.
-   */
-  cssClass(opts: OptionsReader) {
-    switch (opts.outputMode) {
-      case OutputMode.BEM:
-        if (this.isRoot) {
-          return `${this.block.name}`;
-        } else {
-          return `${this.block.name}__${this.name}`;
-        }
-      default:
-        return assertNever(opts.outputMode);
-    }
-  }
-
-  /**
-   * Return array self and all children.
-   * @param shallow Pass false to not include children.
-   * @returns Array of Styles.
-   */
-  all(shallow?: boolean): Style[] {
-    let result: Style[] = [this];
-    if (!shallow) {
-      result = result.concat(this.allStates());
-    }
-    return result;
-  }
-
-  /**
-   * Group getter. Returns a list of State objects in the requested group that are defined
-   * against this specific class. This does not take inheritance into account.
-   * @param stateName State group for lookup or a boolean state name if sub-state is not provided.
-   * @param subStateName Optional sub-state to filter states by.
-   * @returns An array of all States that were requested.
-   */
-  getStateOrGroup(stateName: string, subStateName?: string | undefined): Array<State> | Array<SubState> {
-    let state = this.getState(stateName);
-    if (state) {
-      if (subStateName) {
-        let subState = state.getSubState(subStateName);
-        if (subState) {
-          return [subState];
-        } else {
-          return [];
-        }
-      } else if (state.hasSubStates) {
-        return state.subStates;
-      } else {
-        return [state];
-      }
-    } else {
-      return [];
-    }
-  }
-
-  /**
-   * Resolves the state with the given name from this class's inheritance
-   * chain. Returns undefined if the state is not found.
-   * @param stateName The name of the state to resolve.
-   */
-  resolveState(stateName: string): State | null {
-    let klass: BlockClass | undefined = this;
-    let state: State | null = null;
-    while (!state && klass) {
-      state = klass.getState(stateName);
-      klass = klass.base;
-    }
-    return state;
-  }
-
-  /**
-   * like getGroup but includes the states from all super blocks for the group.
-   * @param group State group for lookup
-   * @param subState Optional sub-state to filter states by.
-   * @returns A map of resolved state names to their states for all States that were requested.
-   */
-  resolveGroup(groupName: string, subState?: string | undefined): ObjectDictionary<State | SubState> | undefined {
-    let resolution: { [name: string]: State | SubState } = {};
-    let states = this.getStateOrGroup(groupName, subState);
-    for (let state of states) {
-      resolution[state.name] = state;
-    }
-    if (subState && resolution[subState]) {
-      return resolution;
-    }
-    let base = this.base;
-    if (base) {
-      let baseResolution = base.resolveGroup(groupName, subState);
-      if (baseResolution) {
-        resolution = Object.assign(baseResolution, resolution); // overwrite any base definitions with their overrides.
-      }
-    }
-    if (Object.keys(resolution).length === 0) {
-      return undefined;
-    } else {
-      return resolution;
-    }
-  }
-
-  getGroups(): Set<string> {
-    let groups = new Set<string>();
-    let klass: BlockClass | undefined = this;
-    while (klass) {
-      for (let state of klass.states) {
-        if (state.hasSubStates) {
-          groups.add(state.name);
-        }
-      }
-      klass = klass.base;
-    }
-    return groups;
-  }
-
-  get states(): Array<State> {
-    return objectValues(this._states);
-  }
-
-  get booleanStates(): Array<State> {
-    let states = new Array<State>();
-    for (let state of this.states) {
-      if (!state.hasSubStates) {
-        states.push(state);
-      }
-    }
-    return states;
-  }
-
-  /**
-   * State getter
-   * @param name The State's name to lookup.
-   * @returns The State that was requested, or undefined
-   */
-  getState(name: string): State | null {
-    return this._states[name] || null;
-  }
-
-  /**
-   * Legacy State getter
-   * @param info The StateInfo type to lookup, contains `name` and `group`
-   * @returns The State that was requested, or undefined
-   */
-  _getState(info: StateInfo): State | SubState | undefined {
-    if (info.group) {
-      let state = this.getState(info.group);
-      if (state) {
-        return state.getSubState(info.name) || undefined;
-      } else {
-        return undefined;
-      }
-    } else {
-      return this.getState(info.name) || undefined;
-    }
-  }
-
-  /**
-   * Ensure that a `State` with the given `name` is registered with this class.
-   * @param name The State's name to ensure.
-   * @return The `State` object on this `Block`
-   */
-  ensureState(name: string): State {
-    if (!this._states[name]) {
-      this._states[name] = new State(name, this);
-    }
-    return this._states[name];
-  }
-
-  /**
-   * Ensure that a `SubState` with the given `subStateName` exists belonging to
-   * the state named `stateName`. If the state does not exist, it is created.
-   * @param stateName The State's name to ensure.
-   * @param subStateName  Optional state group for lookup/registration
-   */
-  ensureSubState(stateName: string, subStateName: string): SubState {
-    return this.ensureState(stateName).ensureSubState(subStateName);
-  }
-
-  /**
-   * Legacy state ensurer. Ensure that a `State` with the given `StateInfo` is
-   * registered with this Block.
-   * @param info  `StateInfo` to verify exists on this `Block`
-   * @return The `State` object on this `Block`
-   */
-  _ensureState(info: StateInfo): State | SubState {
-    let state = this.ensureState(info.group || info.name);
-    if (info.group) {
-      return state.ensureSubState(info.name);
-    } else {
-      return state;
-    }
-  }
-
-  /**
-   * Debug utility to help test States.
-   * @param options  Options to pass to States' asDebug method.
-   * @return Array of debug strings for these states
-   */
-  debug(opts: OptionsReader): string[] {
-    let result: string[] = [];
-    for (let state of this.all()) {
-      result.push(state.asDebug(opts));
-    }
-    return result;
-  }
-
-  /**
-   * Returns all concrete states defined against this class.
-   * Does not take inheritance into account.
-   */
-  allStates(): Array<State | SubState> {
-    let result: Array<State | SubState> = [];
-    for (let state of objectValues(this._states)) {
-      if (state.hasSubStates) {
-        result.push(...state.subStates);
-      } else {
-        result.push(state);
-      }
-    }
-    return result;
-  }
-}
-
-export function isBlockClass(o: object): o is BlockClass {
-  return o instanceof BlockClass;
-}
-
-/**
- * States represent a state attribute selector in a particular Block.
- * A State can have sub-states that are considered to be mutually exclusive.
- * States can be designated as "global";
- */
-export class State extends BlockObject<State, BlockClass> {
-  isGlobal = false;
-
-  private _hasSubStates: boolean;
-  private _subStates: undefined | ObjectDictionary<SubState>;
-  private _sourceAttributes: Attr[] | undefined;
-
-  /**
-   * State constructor. Provide a local name for this State, an optional group name,
-   * and the parent container.
-   * @param name The local name for this state.
-   * @param group An optional parent group name.
-   * @param container The parent container of this State.
-   */
-  constructor(name: string, container: BlockClass) {
-    super(name, container);
-    this._hasSubStates = false;
-  }
-
-  ensureSubState(name: string) {
-    if (!this._subStates) {
-      this._subStates = {};
-    }
-    if (!this._subStates[name]) {
-      this._hasSubStates = true;
-      this._subStates[name] = new SubState(name, this);
-    }
-    return this._subStates[name];
-  }
-
-  get subStates(): Array<SubState> {
-    if (this._subStates) {
-      return objectValues(this._subStates);
-    } else {
-      return [];
-    }
-  }
-
-  /**
-   * Resolves the sub-state with the given name from this state's inheritance
-   * chain. Returns undefined if the sub-state is not found.
-   * @param stateName The name of the sub-state to resolve.
-   */
-  resolveSubState(stateName: string): SubState | null {
-    let state: State | undefined = this;
-    let subState: SubState | null = null;
-    while (!subState && state) {
-      subState = state.getSubState(stateName);
-      state = state.base;
-    }
-    return subState || null;
-  }
-
-  /**
-   * returns whether this state has any sub states defined directly
-   * or inherited.
-   */
-  hasResolvedSubStates(): boolean {
-    return this.hasSubStates ||
-      (this.base ? this.base.hasResolvedSubStates() : false);
-  }
-
-  /**
-   * 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.
-   */
-  resolveSubStates(): ObjectDictionary<SubState> {
-    let resolved: ObjectDictionary<SubState> = {};
-    for (let base of this.resolveInheritance()) {
-      if (base._subStates) {
-        Object.assign(resolved, base._subStates);
-      }
-    }
-    Object.assign(resolved, this._subStates);
-    return resolved;
-  }
-
-  getSubState(name: string): SubState | null {
-    return this._subStates && this._subStates[name] || null;
-  }
-
-  /**
-   * Retrieve the BlockClass that this state belongs to, if applicable.
-   * @returns The parent block class, or null.
-   */
-  get blockClass(): BlockClass {
-    return this._container;
-  }
-
-  get hasSubStates(): boolean {
-    return this._hasSubStates;
-  }
-
-  unqualifiedSource(): string {
-    return `[state|${this.name}]`;
-  }
-
-  /**
-   * Retrieve this State's selector as it appears in the Block source code.
-   * @returns The State's attribute selector
-   */
-  asSource(): string {
-    if (this.blockClass.isRoot) {
-      return this.unqualifiedSource();
-    } else {
-      return this.blockClass.asSource() + this.unqualifiedSource();
-    }
-  }
-
-  asSourceAttributes(): Attr[] {
-    if (!this._sourceAttributes) {
-      this._sourceAttributes = [];
-      this._sourceAttributes.push(...this.blockClass.asSourceAttributes());
-      let value: AttributeValueChoice | ValueAbsent;
-      if (this.hasSubStates) {
-        let values = new Array<ValueConstant>();
-        for (let subState of this.subStates) {
-          values.push({ constant: subState.name });
-        }
-        value = { oneOf: values };
-      } else {
-        value = { absent: true };
-      }
-      this._sourceAttributes.push(new AttributeNS("state", this.name, value));
-    }
-    return this._sourceAttributes;
-  }
-
-  /**
-   * Retrieve this State's local name, including the optional BlockClass and group designations.
-   * @returns The State's local name.
-   */
-  localName(): string {
-    if (this.blockClass.isRoot) {
-      return this.name;
-    } else {
-      return `${this.blockClass.localName()}--${this.name}`;
-    }
-  }
-
-  /**
-   * Export as new class name.
-   * @param opts Option hash configuring output mode.
-   * @returns String representing output class.
-   */
-  cssClass(opts: OptionsReader) {
-    switch (opts.outputMode) {
-      case OutputMode.BEM:
-        let cssClassName = this.blockClass.cssClass(opts);
-        return `${cssClassName}--${this.name}`;
-      default:
-        return assertNever(opts.outputMode);
-    }
-  }
-
-  getBaseFromBaseParent(baseParent: BlockClass): State | undefined {
-    return baseParent.getState(this._name) || undefined;
-  }
-
-  /**
-   * Return array self and all children.
-   * @returns Array of Styles.
-   */
-  all(): Style[] {
-    return [this];
-  }
-}
-
-export class SubState extends BlockObject<SubState, State> {
-  _sourceAttributes: Array<AttributeNS> | undefined;
-  isGlobal = false;
-
-  getBaseFromBaseParent(baseParent: State): SubState | undefined {
-    return baseParent.getSubState(this._name) || undefined;
-  }
-
-  localName(): string {
-    return `${this._container.localName()}-${this.name}`;
-  }
-
-  asSourceAttributes(): Attr[] {
-    if (!this._sourceAttributes) {
-      this._sourceAttributes = [];
-      this._sourceAttributes.push(new AttributeNS("state", this._container.name, { constant: this.name }));
-    }
-    return this._sourceAttributes.slice();
-  }
-
-  asSource(): string {
-    let attr = `[state|${this._container.name}=${this.name}]`;
-    let blockClass = this.blockClass;
-    if (!blockClass.isRoot) {
-      return `${blockClass.asSource()}${attr}`;
-    } else {
-      return attr;
-    }
-  }
-
-  public cssClass(opts: OptionsReader): string {
-    switch (opts.outputMode) {
-      case OutputMode.BEM:
-        return `${this._container.cssClass(opts)}-${this.name}`;
-      default:
-        return assertNever(opts.outputMode);
-    }
-  }
-
-  get blockClass(): BlockClass {
-    return this._container.blockClass;
-  }
-}
-
-export function isState(o: object): o is State {
-  return o instanceof State;
-}
-
-export function isSubState(o: object): o is SubState {
-  return o instanceof SubState;
-}
-
-export function isStateful(o: object): o is State | SubState {
-  return isState(o) || isSubState(o);
-}
-
-export function isStyle(o: Object): o is Style {
-  return isBlockClass(o) || isState(o) || isSubState(o);
-}
+}
\ No newline at end of file
diff --git a/packages/css-blocks/src/Block/BlockClass.ts b/packages/css-blocks/src/Block/BlockClass.ts
new file mode 100644
index 000000000..77e47d5ce
--- /dev/null
+++ b/packages/css-blocks/src/Block/BlockClass.ts
@@ -0,0 +1,178 @@
+import { Block } from "./Block";
+import { NodeStyle } from "./Style";
+import { StateGroup } from "./StateGroup";
+import { State } from "./State";
+import { Attribute } from "@opticss/element-analysis";
+import { OptionsReader } from "../OptionsReader";
+import { OutputMode } from "../OutputMode";
+import { UNIVERSAL_STATE } from "../BlockSyntax";
+
+/**
+ * Holds state values to be passed to the StateContainer.
+ */
+export interface StateInfo {
+  group?: string;
+  name: string;
+}
+
+/**
+ * Represents a Class present in the Block.
+ */
+export class BlockClass extends NodeStyle<BlockClass, Block, StateGroup> {
+  private _sourceAttribute: Attribute;
+
+  protected newChild(name: string): StateGroup { return new StateGroup(name, this); }
+
+  get isRoot(): boolean { return this.name === "root"; }
+
+  public getGroups(): StateGroup[] { return this.children(); }
+  public getGroup(name: string, filter?: string): State[]  {
+    let group = this.getChild(name);
+    if (!group) { return []; }
+    let states = group.states();
+    return filter ? states.filter(s => s.name === filter) : states;
+  }
+  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);
+    }
+    return null;
+  }
+
+  public booleanStates(): State[]{
+    let res: State[] = [];
+    for (let group of this.getGroups()) {
+      let state = group.getState(UNIVERSAL_STATE);
+      if (!group.hasSubStates && state) {
+        res.push(state);
+      }
+    }
+    return res;
+  }
+
+  public localName(): string { return this.name; }
+
+  /**
+   * Export as original class name.
+   * @returns String representing original class.
+   */
+  public asSource(): string { return `.${this.name}`; }
+
+  public asSourceAttributes(): Attribute[] {
+    if (!this._sourceAttribute) {
+      this._sourceAttribute = new Attribute("class", { constant: this.name });
+    }
+    return [this._sourceAttribute];
+  }
+
+  /**
+   * Export as new class name.
+   * @param opts Option hash configuring output mode.
+   * @returns String representing output class.
+   */
+  public cssClass(opts: OptionsReader): string {
+    switch (opts.outputMode) {
+      case OutputMode.BEM:
+        if (this.isRoot) {
+          return `${this.block.name}`;
+        } else {
+          return `${this.block.name}__${this.name}`;
+        }
+      default:
+        throw "this never happens";
+    }
+  }
+
+  /**
+   * Return array self and all children.
+   * @param shallow Pass false to not include children.
+   * @returns Array of Styles.
+   */
+  all(shallow?: boolean): (State | BlockClass)[] {
+    let result: (State | BlockClass)[] = [this];
+    if (!shallow) {
+      result = result.concat(this.allStates());
+    }
+    return result;
+  }
+
+  /**
+   * Returns all concrete states defined against this class.
+   * Does not take inheritance into account.
+   */
+  allStates(): State[] {
+    let result: State[] = [];
+    for (let stateContainer of this.stateGroups()){
+      result.push(...stateContainer.states());
+    }
+    return result;
+  }
+
+  /**
+   * Ensure that a `SubState` with the given `subStateName` exists belonging to
+   * the state named `stateName`. If the state does not exist, it is created.
+   * @param stateName The State's name to ensure.
+   * @param subStateName  Optional state group for lookup/registration
+   */
+  ensureSubState(groupName: string, subStateName: string): State {
+    return this.ensureGroup(groupName).ensureState(subStateName);
+  }
+
+  /**
+   * Group getter. Returns a list of State objects in the requested group that are defined
+   * against this specific class. This does not take inheritance into account.
+   * @param stateName State group for lookup or a boolean state name if substate is not provided.
+   * @param subStateName Optional substate to filter states by.
+   * @returns An array of all States that were requested.
+   */
+  getState(groupName: string, stateName = UNIVERSAL_STATE): State | null {
+    let group = this.getChild(groupName);
+    return group ? group.getState(stateName) || null : null;
+  }
+
+  getGroupsNames(): Set<string> {
+    return new Set<string>([...this._children.keys()]);
+  }
+
+  /**
+   * Legacy State getter
+   * @param info The StateInfo type to lookup, contains `name` and `group`
+   * @returns The State that was requested, or undefined
+   */
+  _getState(info: StateInfo): State | null {
+    return info.group ? this.getState(info.group, info.name) : this.getState(info.name);
+  }
+
+  /**
+   * Legacy state ensurer. Ensure that a `State` with the given `StateInfo` is
+   * registered with this Block.
+   * @param info  `StateInfo` to verify exists on this `Block`
+   * @return The `State` object on this `Block`
+   */
+  _ensureState(info: StateInfo): State {
+    let state = this.ensureGroup(info.group || info.name);
+    return info.group ? state.ensureState(info.name) : state.ensureState(UNIVERSAL_STATE);
+  }
+
+  /**
+   * Debug utility to help test States.
+   * @param options  Options to pass to States' asDebug method.
+   * @return Array of debug strings for these states
+   */
+  debug(opts: OptionsReader): string[] {
+    let result: string[] = [];
+    for (let state of this.all()) {
+      result.push(state.asDebug(opts));
+    }
+    return result;
+  }
+
+}
+
+export function isBlockClass(o: object): o is BlockClass {
+  return o instanceof BlockClass;
+}
\ No newline at end of file
diff --git a/packages/css-blocks/src/Block/Inheritable.ts b/packages/css-blocks/src/Block/Inheritable.ts
new file mode 100644
index 000000000..9f72d4072
--- /dev/null
+++ b/packages/css-blocks/src/Block/Inheritable.ts
@@ -0,0 +1,178 @@
+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
+> {
+
+  protected _name: string;
+  protected _base: Self | undefined;
+  public _block: Block;
+  protected _baseName: string;
+  protected _parent: Parent | undefined;
+  protected _children: Map<string, Child> = new Map;
+
+  /**
+   * 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.
+   */
+  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;
+  }
+
+  /**
+   * Inheritable constructor
+   * @param name Name for this Inheritable instance.
+   * @param parent The parent Inheritable of this node.
+   */
+  constructor(name: string, parent?: Parent,) {
+    this._name = name;
+    this._parent = parent;
+  }
+
+  public get name(): string { return this._name; }
+  public get baseName(): string | undefined { return this._baseName; }
+  public get parent(): Parent | undefined { return this._parent; }
+
+  /**
+   * Get the style that this style inherits from, if any.
+   *
+   * This walks down the declared styles of the parent's inheritance chain,
+   * and attempts to find a matching directly declared style on each.
+   *
+   * The result is cached because it never changes and is decidable as soon
+   * as the style is instantiated.
+   */
+  public get base(): Self | undefined {
+    if (this._base !== undefined || !this.parent) {
+      return this._base || undefined;
+    }
+    let baseParent: Parent | undefined = this.parent.base;
+    while (baseParent) {
+      let cls = baseParent ? baseParent.getChild(this.name) : undefined;
+      if (cls) {
+        this._base = cls;
+        return cls;
+      }
+      baseParent = baseParent.base;
+    }
+    return this._base = undefined;
+  }
+
+  /**
+   * 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`");
+  }
+
+  setBase(baseName: string, base: Self) {
+    this._baseName = baseName;
+    this._base = base;
+  }
+
+  /**
+   * Compute all block objects that are implied by this block object through
+   * inheritance. Does not include this object or the styles it implies through
+   * other relationships to this object.
+   *
+   * If nothing is inherited, this returns an empty set.
+   */
+  resolveInheritance(): Self[] {
+    let inherited = new Array<Self>();
+    let base: Self | undefined = this.base;
+    while (base) {
+      inherited.unshift(base);
+      base = base.base;
+    }
+    return inherited;
+  }
+
+  /**
+   * Resolves the child with the given name from this node's inheritance
+   * chain. Returns undefined if the child is not found.
+   * @param name The name of the child to resolve.
+   */
+  resolveChild(name: string): Child | null {
+    let state: Child | null = this.getChild(name);
+    let container: Self | undefined = this.base;
+    while (!state && container) {
+      state = container.getChild(name);
+      container = container.base;
+    }
+    return state || 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.
+   */
+  protected getChild(key: string): Child | null {
+    return this._children.get(key) || null;
+  }
+
+  protected setChild(key: string, value: Child): Child {
+    this._children.set(key, value);
+    return value;
+  }
+
+  protected ensureChild(name: string): Child {
+    if (!this._children.has(name)) {
+      this.setChild(name, this.newChild(name));
+    }
+    return this._children.get(name) as Child;
+  }
+
+  protected children(): Child[]{
+    return [...this._children.values()];
+  }
+
+  // TODO: Cache this maybe? Convert entire model to only use hash?...
+  protected childrenHash(): ObjectDictionary<Child> {
+    let out = {};
+    for (let [key, value] of this._children.entries() ) {
+      out[key] = value;
+    }
+    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>;
+}
+
+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>;
+}
diff --git a/packages/css-blocks/src/Block/RulesetContainer.ts b/packages/css-blocks/src/Block/RulesetContainer.ts
index ab0a1f89b..a6dcc1eed 100644
--- a/packages/css-blocks/src/Block/RulesetContainer.ts
+++ b/packages/css-blocks/src/Block/RulesetContainer.ts
@@ -2,7 +2,7 @@ import { MultiMap, TwoKeyMultiMap } from "@opticss/util";
 import * as propParser from "css-property-parser";
 import * as postcss from "postcss";
 
-import { BLOCK_PROP_NAMES, BlockPath, RESOLVE_RE, SELF_SELECTOR } from "../BlockSyntax";
+import { BLOCK_PROP_NAMES, RESOLVE_RE, SELF_SELECTOR, BlockPath } from "../BlockSyntax";
 import { sourceLocation } from "../SourceLocation";
 import * as errors from "../errors";
 
diff --git a/packages/css-blocks/src/Block/State.ts b/packages/css-blocks/src/Block/State.ts
new file mode 100644
index 000000000..9482c4849
--- /dev/null
+++ b/packages/css-blocks/src/Block/State.ts
@@ -0,0 +1,90 @@
+import { assertNever } from "@opticss/util";
+import { SinkStyle } from "./Style";
+import { BlockClass } from "./BlockClass";
+import { StateGroup } from "./StateGroup";
+import { OptionsReader } from "../OptionsReader";
+import { OutputMode } from "../OutputMode";
+import { UNIVERSAL_STATE } from "../BlockSyntax";
+import {
+  Attr,
+  AttributeNS
+} from "@opticss/element-analysis";
+
+/**
+ * States represent a state attribute selector in a particular Block.
+ * A State can have sub-states that are considered to be mutually exclusive.
+ * States can be designated as "global";
+ */
+export class State extends SinkStyle<State, StateGroup> {
+  isGlobal = false;
+
+  private _sourceAttributes: AttributeNS[];
+
+  /**
+   * State constructor. Provide a local name for this State, an optional group name,
+   * and the parent container.
+   * @param name The local name for this state.
+   * @param group An optional parent group name.
+   * @param container The parent container of this State.
+   */
+  constructor(name: string, parent: StateGroup) {
+    super(name, parent);
+  }
+
+  protected newChild(): null { return null; }
+
+  get isUniversal(): boolean { return this.name === UNIVERSAL_STATE; }
+
+  /**
+   * Retrieve the BlockClass that this state belongs to.
+   * @returns The parent block class, or null.
+   */
+  get blockClass(): BlockClass { return this.parent.parent; }
+
+  /**
+   * Retrieve this State's local name, including the optional BlockClass and group designations.
+   * @returns The State's local name.
+   */
+  localName(): string {
+    return `${this.parent.localName()}--${this.name}`;
+  }
+
+  asSourceAttributes(): Attr[] {
+    if (!this._sourceAttributes) {
+      this._sourceAttributes = [];
+      this._sourceAttributes.push(new AttributeNS("state", this.parent.name, { constant: this.name }));
+    }
+    return this._sourceAttributes.slice();
+  }
+
+  asSource(): string {
+    let attr = this.isUniversal ? `[state|${this.parent.name}]` : `[state|${this.parent.name}=${this.name}]`;
+    let blockClass = this.blockClass;
+    if (!blockClass.isRoot) {
+      return `${blockClass.asSource()}${attr}`;
+    } else {
+      return attr;
+    }
+  }
+
+  public cssClass(opts: OptionsReader): string {
+    switch (opts.outputMode) {
+      case OutputMode.BEM:
+        return `${this.parent.cssClass(opts)}-${this.name}`;
+      default:
+        return assertNever(opts.outputMode);
+    }
+  }
+
+  /**
+   * Return array self and all children.
+   * @returns Array of Styles.
+   */
+  all(): State[] {
+    return [this];
+  }
+}
+
+export function isState(o: object): o is State {
+  return o instanceof State;
+}
diff --git a/packages/css-blocks/src/Block/StateGroup.ts b/packages/css-blocks/src/Block/StateGroup.ts
new file mode 100644
index 000000000..15362a408
--- /dev/null
+++ b/packages/css-blocks/src/Block/StateGroup.ts
@@ -0,0 +1,138 @@
+import { Node } from "./Inheritable";
+import { State } from "./State";
+import { BlockClass } from "./BlockClass";
+import { ObjectDictionary } from "@opticss/util";
+import { UNIVERSAL_STATE } from "../BlockSyntax";
+import { OptionsReader } from "../OptionsReader";
+import { OutputMode } from "../OutputMode";
+
+import {
+  Attr,
+  ValueAbsent,
+  AttributeNS,
+  AttributeValueChoice,
+  ValueConstant
+} from "@opticss/element-analysis";
+
+export class StateGroup extends Node<StateGroup, BlockClass, State>
+{
+
+  private _hasSubStates = false;
+  private _universalState: State;
+  private _sourceAttributes: Attr[];
+
+  constructor(name: string, parent: BlockClass) {
+    super(name, parent);
+  }
+
+  protected newChild(name: string): State { return new State(name, this); }
+
+  get hasSubStates(): boolean { return this._hasSubStates; }
+  get universalState(): State { return this._universalState; }
+  get blockClass(): BlockClass { return this.parent; }
+
+  states(): State[] { return this.children(); }
+  statesHash(): ObjectDictionary<State> { return this.childrenHash(); }
+  ensureState(name: string) {
+    let state = this.ensureChild(name);
+    if (name !== UNIVERSAL_STATE) { this._hasSubStates = true; }
+    else { this._universalState = state; }
+    return state;
+  }
+  getState(name: string): State | null { return this.getChild(name); }
+  resolveState(name: string): State | null { return this.resolveChild(name); }
+
+  /**
+   * returns whether this state has any sub states defined directly
+   * or inherited.
+   */
+  hasResolvedStates(): boolean {
+    return !!(this.hasSubStates || this.base && this.base.hasResolvedStates());
+  }
+
+  /**
+   * 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(): Map<string, State> {
+    let resolved: Map<string, State> = new Map;
+    for (let base of this.resolveInheritance()) {
+      if (base.states()) {
+        resolved = new Map([...resolved, ...base._children]);
+      }
+    }
+    Object.assign(resolved, this._children);
+    return resolved;
+  }
+
+  unqualifiedSource(): string {
+    return `[state|${this.name}]`;
+  }
+
+  /**
+   * Retrieve this State's selector as it appears in the Block source code.
+   * @returns The State's attribute selector
+   */
+  asSource(): string {
+    return (this.blockClass.isRoot ? '' : this.blockClass.asSource()) + this.unqualifiedSource();
+  }
+
+  asSourceAttributes(): Attr[] {
+    if (!this._sourceAttributes) {
+      this._sourceAttributes = [];
+      this._sourceAttributes.push(...this.blockClass.asSourceAttributes());
+      let value: AttributeValueChoice | ValueAbsent;
+      if (this.hasSubStates) {
+        let values = new Array<ValueConstant>();
+        for (let state of this.states()) {
+          values.push({ constant: state.name });
+        }
+        value = { oneOf: values };
+      } else {
+        value = { absent: true };
+      }
+      this._sourceAttributes.push(new AttributeNS("state", this.name, value));
+    }
+    return this._sourceAttributes;
+  }
+
+  /**
+   * Retrieve this State's local name, including the optional BlockClass and group designations.
+   * @returns The State's local name.
+   */
+  localName(): string {
+    if (this.blockClass.isRoot) {
+      return this.name;
+    } else {
+      return `${this.blockClass.localName()}--${this.name}`;
+    }
+  }
+
+  /**
+   * Export as new class name.
+   * @param opts Option hash configuring output mode.
+   * @returns String representing output class.
+   */
+  cssClass(opts: OptionsReader) {
+    switch (opts.outputMode) {
+      case OutputMode.BEM:
+        let cssClassName = this.blockClass.cssClass(opts);
+        return `${cssClassName}--${this.name}`;
+      default:
+        throw "this never happens";
+    }
+  }
+
+  /**
+   * Return array self and all children.
+   * @returns Array of Styles.
+   */
+  all(): StateGroup[] {
+    return [this];
+  }
+}
+
+export function isStateGroup(o: object): o is StateGroup {
+  return o instanceof StateGroup;
+}
diff --git a/packages/css-blocks/src/Block/Style.ts b/packages/css-blocks/src/Block/Style.ts
new file mode 100644
index 000000000..8d5fa8356
--- /dev/null
+++ b/packages/css-blocks/src/Block/Style.ts
@@ -0,0 +1,168 @@
+import { Attr } from "@opticss/element-analysis";
+
+import { RulesetContainer } from './RulesetContainer';
+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> {
+
+  public readonly rulesets: RulesetContainer;
+
+  /** cache of resolveStyles() */
+  private _resolvedStyles: Set<Self> | undefined;
+
+  /**
+   * Save name, parent container, and create the PropertyContainer for this data object.
+   */
+  constructor(name: string, parent: Parent) {
+    super(name, parent);
+    this.rulesets = new RulesetContainer();
+  }
+
+  /**
+   * Return the local identifier for this `Style`.
+   * @returns The local name.
+   */
+  public abstract localName(): string;
+
+  /**
+   * Return an attribute for analysis using the authored source syntax.
+   */
+  public abstract asSourceAttributes(): Attr[];
+
+  /**
+   * Return the source selector this `Style` was read from.
+   * @returns The source selector.
+   */
+  public abstract asSource(): string;
+
+  /**
+   * Return the css selector for this `Style`.
+   * @param opts Option hash configuring output mode.
+   * @returns The CSS class.
+   */
+  public abstract cssClass(opts: OptionsReader): string;
+
+  /**
+   * Returns all the classes needed to represent this block object
+   * including inherited classes.
+   * @returns this object's css class and all inherited classes.
+   */
+  cssClasses(opts: OptionsReader): string[] {
+    let classes: string[] = [];
+    for (let style of this.resolveStyles()) {
+      classes.push(style.cssClass(opts));
+    }
+    return classes;
+  }
+
+  /**
+   * Return all Block Objects that are implied by this object.
+   * This takes inheritance, state/class correlations, and any
+   * other declared links between styles into account.
+   *
+   * This block object is included in the returned result so the
+   * resolved value's size is always 1 or greater.
+   */
+  public resolveStyles(): Set<Self> {
+    if (this._resolvedStyles) {
+      return new Set(this._resolvedStyles);
+    }
+
+    let inheritedStyles = this.resolveInheritance();
+    this._resolvedStyles = new Set(inheritedStyles);
+    this._resolvedStyles.add(this.asStyle());
+
+    for (let s of inheritedStyles) {
+      let implied = s.impliedStyles();
+      if (!implied) continue;
+      for (let i of implied) {
+        unionInto(this._resolvedStyles, i.resolveStyles());
+      }
+    }
+
+    return new Set(this._resolvedStyles);
+  }
+
+  /**
+   * Returns the styles that are directly implied by this style.
+   * Does not include the styles that this style inherits implied.
+   * Does not include the styles that this style implies inherits.
+   *
+   * returns undefined if no styles are implied.
+   */
+  impliedStyles(): Set<Self> | undefined {
+    return undefined;
+  }
+
+  /**
+   * Compute all block objects that are implied by this block object through
+   * inheritance. Does not include this object or the styles it implies through
+   * other relationships to this object.
+   *
+   * If nothing is inherited, this returns an empty set.
+   */
+  resolveInheritance(): Self[] {
+    let inherited: Self[] = [];
+    let base: Self | undefined = this.base;
+    while (base) {
+      inherited.unshift(base);
+      base = base.base;
+    }
+    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.
+   * @returns A debug string.
+   */
+  asDebug(opts: OptionsReader) {
+    return `${this.asSource()} => ${this.cssClasses(opts).map(n => `.${n}`).join(" ")}`;
+  }
+
+  // TypeScript can't figure out that `this` is the `StyleType` so this private
+  // method casts it in a few places where it's needed.
+  private asStyle(): Self {
+    return <Self><any>this;
+  }
+}
+
+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>;
+}
diff --git a/packages/css-blocks/src/Block/index.ts b/packages/css-blocks/src/Block/index.ts
index 9ebbbcc60..0b96aeab7 100644
--- a/packages/css-blocks/src/Block/index.ts
+++ b/packages/css-blocks/src/Block/index.ts
@@ -1,2 +1,5 @@
-export * from "./Block";
-export * from "./RulesetContainer";
+export { Style, Block, isBlock, OBJ_REF_SPLITTER } from "./Block";
+export { BlockClass, isBlockClass } from "./BlockClass";
+export { StateGroup } from "./StateGroup";
+export { State, isState } from "./State";
+export { RulesetContainer } from "./RulesetContainer";
diff --git a/packages/css-blocks/src/BlockCompiler/ConflictResolver.ts b/packages/css-blocks/src/BlockCompiler/ConflictResolver.ts
index 36de3c99a..8e69a3399 100644
--- a/packages/css-blocks/src/BlockCompiler/ConflictResolver.ts
+++ b/packages/css-blocks/src/BlockCompiler/ConflictResolver.ts
@@ -93,9 +93,9 @@ export class ConflictResolver {
 
           // Fetch the associated `Style`. If does not exist (ex: malformed selector), skip.
           let blockNode = getBlockNode(key);
-          if (!blockNode) { return; }
-          let obj: Style | undefined = block.nodeAndTypeToStyle(blockNode);
-          if (!obj) { return; }
+          if ( !blockNode ) { return; }
+          let obj: Style | null = block.nodeAndTypeToStyle(blockNode);
+          if ( !obj ) { return; }
 
           // Fetch the set of Style conflicts. If the Style has already
           // been handled, skip.
diff --git a/packages/css-blocks/src/BlockSyntax/BlockSyntax.ts b/packages/css-blocks/src/BlockSyntax/BlockSyntax.ts
index 4aad4f9f9..7a91911d4 100644
--- a/packages/css-blocks/src/BlockSyntax/BlockSyntax.ts
+++ b/packages/css-blocks/src/BlockSyntax/BlockSyntax.ts
@@ -45,3 +45,8 @@ export function getConstraints(value: string): string[] {
 // This way, we can use a MultiMap to track all element and pseudo element concerns
 // for any give Style instead of using different containers for the element and its pseudos.
 export const SELF_SELECTOR = "::self";
+
+// Internally use the invented `::universal` state name to represent a bare state selector with no value set.
+// This way, we can treat the universal state selector as just another `State` object instead of having to
+// special case it in the `StateGroup` Block object..
+export const UNIVERSAL_STATE = '::universal';
diff --git a/packages/css-blocks/src/TemplateAnalysis/ElementAnalysis.ts b/packages/css-blocks/src/TemplateAnalysis/ElementAnalysis.ts
index 90b036a84..371689437 100644
--- a/packages/css-blocks/src/TemplateAnalysis/ElementAnalysis.ts
+++ b/packages/css-blocks/src/TemplateAnalysis/ElementAnalysis.ts
@@ -24,10 +24,10 @@ import {
   Block,
   BlockClass,
   isBlockClass,
-  isStateful,
+  isState,
   State,
   Style,
-  SubState,
+  StateGroup,
 } from "../Block";
 import {
   OptionsReader as CssBlocksOptionsReader,
@@ -36,19 +36,19 @@ import {
   unionInto,
 } from "../util/unionInto";
 
-export interface HasState<StateType extends State | SubState | number = State | SubState> {
+export interface HasState<StateType extends State | number = State> {
   state: StateType;
 }
 
-export function isBooleanState(o: object): o is HasState<State | SubState | number> {
+export function isBooleanState(o: object): o is HasState<State | number> {
   return !!(<HasState>o).state;
 }
 
-export interface HasGroup<GroupType extends SubState | number = SubState> {
+export interface HasGroup<GroupType extends State | number = State> {
   group: ObjectDictionary<GroupType>;
 }
 
-export function isStateGroup(o: object): o is HasGroup<SubState | number> {
+export function isStateGroup(o: object): o is HasGroup<State | number> {
   return !!(<HasGroup>o).group;
 }
 
@@ -279,10 +279,10 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
    */
   *statesFound(dynamic?: boolean) {
     this.assertSealed();
-    let found = new Set<State | SubState>();
+    let found = new Set<State | StateGroup>();
     if (returnStatic(dynamic)) {
       for (let s of this.static) {
-        if (isStateful(s)) {
+        if (isState(s)) {
           found.add(s);
           yield s;
         }
@@ -391,7 +391,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
    * The state is added as dynamic and conditional on its class if that
    * class is dynamic.
    */
-  addStaticState(container: BlockClass, state: State | SubState) {
+  addStaticState(container: BlockClass, state: State) {
     this.assertSealed(false);
     this.addedStyles.push({container, state});
   }
@@ -406,7 +406,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     }
   }
 
-  private assertValidContainer(container: BlockClass, state: State | SubState) {
+  private assertValidContainer(container: BlockClass, state: State | StateGroup) {
     if (container !== state.blockClass) {
       if (!container.resolveStyles().has(state.blockClass)) {
         throw new Error("container is not a valid container for the given state");
@@ -420,7 +420,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
    * @param state the state that is dynamic.
    * @param condition The AST node(s) representing this boolean expression.
    */
-  addDynamicState(container: BlockClass, state: State | SubState, condition: BooleanExpression) {
+  addDynamicState(container: BlockClass, state: State, condition: BooleanExpression) {
     this.assertSealed(false);
     this.addedStyles.push({state, container, condition});
   }
@@ -445,9 +445,14 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
    * @param disallowFalsy Whether a missing value is expected or should be
    *   a runtime error.
    */
-  addDynamicGroup(container: BlockClass, group: ObjectDictionary<SubState>, stringExpression: StringExpression, disallowFalsy = false) {
+  addDynamicGroup(container: BlockClass, group: StateGroup, stringExpression: StringExpression, disallowFalsy = false) {
     this.assertSealed(false);
-    this.addedStyles.push({ container, group, stringExpression, disallowFalsy });
+    this.addedStyles.push({
+      container,
+      group: group.statesHash(),
+      stringExpression,
+      disallowFalsy
+    });
   }
   private _addDynamicGroup(style: ConditionalDependentStateGroup<StringExpression>) {
     let { container, group, stringExpression, disallowFalsy } = style;
diff --git a/packages/css-blocks/test/opticss-test.ts b/packages/css-blocks/test/opticss-test.ts
index 6cf21f664..f3c835c89 100644
--- a/packages/css-blocks/test/opticss-test.ts
+++ b/packages/css-blocks/test/opticss-test.ts
@@ -18,7 +18,7 @@ import { suite, test } from "mocha-typescript";
 import { Optimizer } from "opticss";
 import * as postcss from "postcss";
 
-import { Block, BlockClass, State, Style } from "../src/Block";
+import { Block, BlockClass, State, Style, StateGroup } from "../src/Block";
 import { BlockCompiler } from "../src/BlockCompiler";
 import { BlockFactory } from "../src/BlockFactory";
 import { BlockParser } from "../src/BlockParser";
@@ -26,7 +26,6 @@ import { OptionsReader } from "../src/OptionsReader";
 import { TemplateAnalysis } from "../src/TemplateAnalysis";
 import { ElementAnalysis } from "../src/TemplateAnalysis/ElementAnalysis";
 import { StyleMapping } from "../src/TemplateRewriter/StyleMapping";
-import { SubState } from "../src/index";
 import { PluginOptions } from "../src/options";
 
 type BlockAndRoot = [Block, postcss.Container];
@@ -45,11 +44,12 @@ export class TemplateAnalysisTests {
       return <BlockAndRoot>[block, root];
     });
   }
+
   private useStates(element: ElementAnalysis<whatever, whatever, whatever>, stateContainer: BlockClass) {
-    for (let groupName of stateContainer.getGroups()) {
-      element.addDynamicGroup(stateContainer, stateContainer.resolveGroup(groupName) as ObjectDictionary<SubState>, null);
+    for (let group of stateContainer.getGroups()) {
+      element.addDynamicGroup(stateContainer, group, null);
     }
-    for (let state of stateContainer.booleanStates) {
+    for (let state of stateContainer.booleanStates()) {
       element.addStaticState(stateContainer, state);
     }
   }
diff --git a/packages/css-blocks/test/state-container-test.ts b/packages/css-blocks/test/state-container-test.ts
index 4fe6e9b61..cfb521351 100644
--- a/packages/css-blocks/test/state-container-test.ts
+++ b/packages/css-blocks/test/state-container-test.ts
@@ -10,7 +10,7 @@ import {
   OptionsReader,
 } from "../src/OptionsReader";
 import cssBlocks = require("../src/cssBlocks");
-import { State, SubState } from "../src/index";
+import { State, StateGroup } from "../src/index";
 import {
   PluginOptions,
 } from "../src/options";
@@ -52,7 +52,7 @@ export class StateContainerTest extends BEMProcessor {
         assert.equal(state.name, "large");
       });
       let classObj = block.getClass("foo");
-      typedAssert.isDefined(classObj).and(classObj => {
+      typedAssert.isNotNull(classObj).and(classObj => {
         let classState = classObj.getState("small");
         typedAssert.isNotNull(classState).and(classState => {
           assert.equal(classState.name, "small");
@@ -79,18 +79,18 @@ export class StateContainerTest extends BEMProcessor {
     let factory = new BlockFactory(reader, postcss);
 
     return factory.getBlock(importer.identifier(null, filename, reader)).then(block => {
-      let sizeGroup: Array<State | SubState> = block.rootClass.getStateOrGroup("size");
+      let sizeGroup: Array<State> = block.rootClass.getGroup("size");
       assert.equal(sizeGroup.length, 2);
       assert.includeMembers(sizeGroup.map(s => s.name), ["large", "small"]);
-      let subtateGroup: Array<State | SubState> = block.rootClass.getStateOrGroup("size", "large");
+      let subtateGroup: Array<State> = block.rootClass.getGroup("size", "large");
       assert.equal(subtateGroup.length, 1);
       assert.includeMembers(subtateGroup.map(s => s.name), ["large"]);
-      let missingGroup: Array<State | SubState> = block.rootClass.getStateOrGroup("asdf");
+      let missingGroup: Array<State> = block.rootClass.getGroup("asdf");
       assert.equal(missingGroup.length, 0);
-      let missingSubstate: Array<State | SubState> = block.rootClass.getStateOrGroup("size", "tiny");
+      let missingSubstate: Array<State> = block.rootClass.getGroup("size", "tiny");
       assert.equal(missingSubstate.length, 0);
-      typedAssert.isDefined(block.getClass("foo")).and(classObj => {
-        let modeGroup: Array<State | SubState> = classObj.getStateOrGroup("mode");
+      typedAssert.isNotNull(block.getClass("foo")).and(classObj => {
+        let modeGroup: Array<State> = classObj.getGroup("mode");
         assert.equal(modeGroup.length, 3);
         assert.includeMembers(modeGroup.map(s => s.name), ["collapsed", "minimized", "expanded"]);
       });
@@ -126,7 +126,7 @@ export class StateContainerTest extends BEMProcessor {
       let sizeGroupNames = Object.keys(sizeGroup);
       assert.equal(sizeGroupNames.length, 3);
       assert.includeMembers(sizeGroupNames, ["large", "small", "tiny"]);
-      typedAssert.isDefined(block.getClass("foo")).and(classObj => {
+      typedAssert.isNotNull(block.getClass("foo")).and(classObj => {
         let modeGroup = classObj.resolveGroup("mode") || {};
         let modeGroupNames = Object.keys(modeGroup);
         assert.equal(modeGroupNames.length, 3);
diff --git a/packages/css-blocks/test/template-analysis-test.ts b/packages/css-blocks/test/template-analysis-test.ts
index e91e01d6f..3f55aa9f5 100644
--- a/packages/css-blocks/test/template-analysis-test.ts
+++ b/packages/css-blocks/test/template-analysis-test.ts
@@ -5,13 +5,12 @@ import { assert } from "chai";
 import { skip, suite, test } from "mocha-typescript";
 import * as postcss from "postcss";
 
-import { Block, BlockClass, State } from "../src/Block";
+import { Block, BlockClass, State, StateGroup } from "../src/Block";
 import { BlockFactory } from "../src/BlockFactory";
 import { BlockParser } from "../src/BlockParser";
 import { OptionsReader } from "../src/OptionsReader";
 import { ElementAnalysis, SerializedTemplateAnalysis, TemplateAnalysis } from "../src/TemplateAnalysis";
 import * as cssBlocks from "../src/errors";
-import { SubState } from "../src/index";
 import { PluginOptions } from "../src/options";
 
 import { MockImportRegistry } from "./util/MockImportRegistry";
@@ -253,8 +252,8 @@ export class TemplateAnalysisTests {
         analysis.blocks[""] = block;
         let element: TestElement = analysis.startElement({ line: 10, column: 32 });
         element.addDynamicClasses({condition: null, whenTrue: [block.rootClass]});
-        element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as ObjectDictionary<SubState>, null);
-        element.addDynamicState(block.rootClass, block.rootClass.getState("bgcolor")!, null);
+        element.addDynamicGroup( block.rootClass, block.rootClass.resolveGroup('color') as StateGroup, null );
+        element.addDynamicState( block.rootClass, block.rootClass.getState('bgcolor')!, null );
         analysis.endElement(element);
 
         let result = analysis.serialize();
@@ -296,8 +295,13 @@ export class TemplateAnalysisTests {
         analysis.blocks[""] = block;
         let element: TestElement = analysis.startElement({ line: 10, column: 32 });
         element.addStaticClass(block.rootClass);
+<<<<<<< HEAD
         element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as ObjectDictionary<SubState>, null);
         element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as ObjectDictionary<SubState>, null, true);
+=======
+        element.addDynamicGroup( block.rootClass, block.rootClass.resolveGroup('color') as StateGroup, null );
+        element.addDynamicGroup( block.rootClass, block.rootClass.resolveGroup('color') as StateGroup, null, true );
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
         analysis.endElement(element);
 
         let result = analysis.serialize();
@@ -358,8 +362,13 @@ export class TemplateAnalysisTests {
         analysis.blocks[""] = block;
         let element: TestElement = analysis.startElement({ line: 10, column: 32 });
         element.addStaticClass(block.rootClass);
+<<<<<<< HEAD
         element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as ObjectDictionary<SubState>, null);
         element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("bgcolor") as ObjectDictionary<SubState>, null, true);
+=======
+        element.addDynamicGroup( block.rootClass, block.rootClass.resolveGroup('color') as StateGroup, null );
+      element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup('bgcolor') as StateGroup, null, true );
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
         analysis.endElement(element);
 
         let result = analysis.serialize();
@@ -538,8 +547,13 @@ export class TemplateAnalysisTests {
     return this.parseBlock(css, "blocks/foo.block.css", reader).then(([block, _]) => {
       analysis.blocks[""] = block;
       let element: TestElement = analysis.startElement(POSITION_UNKNOWN);
+<<<<<<< HEAD
       element.addStaticClass(block.rootClass);
       element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("foo") as ObjectDictionary<SubState>, null, true);
+=======
+      element.addStaticClass( block.rootClass );
+      element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("foo") as StateGroup, null, true);
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
       analysis.endElement(element);
       let result = analysis.serialize();
       let expectedResult: SerializedTemplateAnalysis<"Opticss.Template"> = {
@@ -939,10 +953,17 @@ export class TemplateAnalysisTests {
           analysis.blocks[""] = block;
           analysis.blocks["a"] = aBlock;
           let element = analysis.startElement({ line: 10, column: 32 });
+<<<<<<< HEAD
           let klass = block.getClass("pretty") as BlockClass;
           let group = klass.resolveGroup("color") as {[name: string]: State};
           element.addStaticClass(klass);
           element.addStaticState(klass, group["yellow"]);
+=======
+          let klass = block.getClass('pretty') as BlockClass;
+          let group = klass.resolveGroup('color') as StateGroup;
+          element.addStaticClass( klass );
+          element.addStaticState(klass, group['yellow'] );
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
           analysis.endElement(element);
           assert.deepEqual(1, 1);
     });
diff --git a/packages/css-blocks/test/validations/class-pairs-validator-test.ts b/packages/css-blocks/test/validations/class-pairs-validator-test.ts
index e4c3ce9ed..109dbcdd0 100644
--- a/packages/css-blocks/test/validations/class-pairs-validator-test.ts
+++ b/packages/css-blocks/test/validations/class-pairs-validator-test.ts
@@ -2,7 +2,7 @@ import { Template } from "@opticss/template-api";
 import { suite, test } from "mocha-typescript";
 import * as postcss from "postcss";
 
-import { Block } from "../../src/Block";
+import { Block, BlockClass, State } from "../../src/Block";
 import { BlockFactory } from "../../src/BlockFactory";
 import { BlockParser } from "../../src/BlockParser";
 import { OptionsReader } from "../../src/OptionsReader";
diff --git a/packages/css-blocks/test/validations/property-conflict-validator-test.ts b/packages/css-blocks/test/validations/property-conflict-validator-test.ts
index dc1d842bf..183861aa6 100644
--- a/packages/css-blocks/test/validations/property-conflict-validator-test.ts
+++ b/packages/css-blocks/test/validations/property-conflict-validator-test.ts
@@ -4,7 +4,7 @@ import { assert } from "chai";
 import { suite, test } from "mocha-typescript";
 import * as postcss from "postcss";
 
-import { Block, BlockClass, State, SubState } from "../../src/Block";
+import { Block, BlockClass, State, StateGroup } from "../../src/Block";
 import { BlockFactory } from "../../src/BlockFactory";
 import { BlockParser } from "../../src/BlockParser";
 import { OptionsReader } from "../../src/OptionsReader";
@@ -1294,7 +1294,7 @@ function constructElement(block: Block, ...styles: string[]) {
       element.addStaticClass(style);
     }
     else if (style instanceof State) {
-      element.addStaticState(style.parent, style);
+      element.addStaticState(style.parent.parent, style);
     }
   }
 
@@ -1302,7 +1302,7 @@ function constructElement(block: Block, ...styles: string[]) {
     addDynamic(truthy: string[] | string, falsy?: string[]) {
       if (typeof truthy === "string") {
         let state = block.lookup(truthy) as State;
-        element.addDynamicState(state.parent, state, true);
+        element.addDynamicState(state.parent.parent, state, true);
         return this;
       }
       let truthyStyles = truthy.map(block.lookup.bind(block));
@@ -1316,7 +1316,9 @@ function constructElement(block: Block, ...styles: string[]) {
     },
     addStateGroup(base: string, groupName: string) {
       let baseStyle = block.lookup(base) as BlockClass;
-      element.addDynamicGroup(baseStyle, baseStyle.resolveGroup(groupName) as ObjectDictionary<SubState>, {});
+      let group = baseStyle.resolveGroup(groupName);
+      if (!group) throw new Error(`Error resolving group ${groupName}`);
+      element.addDynamicGroup(baseStyle, group, {});
       return this;
     },
     end() {
diff --git a/packages/css-blocks/test/validations/root-class-validator-test.ts b/packages/css-blocks/test/validations/root-class-validator-test.ts
index 7481efd35..62027e106 100644
--- a/packages/css-blocks/test/validations/root-class-validator-test.ts
+++ b/packages/css-blocks/test/validations/root-class-validator-test.ts
@@ -3,9 +3,10 @@ import { assert } from "chai";
 import { suite, test } from "mocha-typescript";
 import * as postcss from "postcss";
 
-import { Block } from "../../src/Block";
+import { Block, BlockClass, State } from "../../src/Block";
 import { BlockFactory } from "../../src/BlockFactory";
 import { BlockParser } from "../../src/BlockParser";
+import { Importer, ImportedFile } from "../../src/importing";
 import { OptionsReader } from "../../src/OptionsReader";
 import { SerializedTemplateAnalysis, TemplateAnalysis } from "../../src/TemplateAnalysis";
 import * as cssBlocks from "../../src/errors";
diff --git a/packages/css-blocks/test/validations/state-parent-validator-test.ts b/packages/css-blocks/test/validations/state-parent-validator-test.ts
index eb088094f..2ea7b8e33 100644
--- a/packages/css-blocks/test/validations/state-parent-validator-test.ts
+++ b/packages/css-blocks/test/validations/state-parent-validator-test.ts
@@ -113,9 +113,16 @@ export class TemplateAnalysisTests {
         analysis.blocks[""] = block;
         analysis.blocks["a"] = aBlock;
         let element = analysis.startElement({ line: 10, column: 32 });
+<<<<<<< HEAD
         let klass = block.getClass("pretty") as BlockClass;
         let group = klass.resolveGroup("color") as { [name: string]: State };
         element.addStaticState(klass, group["yellow"]);
+=======
+        let klass = block.getClass('pretty') as BlockClass;
+        let group = klass.resolveGroup('color');
+        if (!group) { throw new Error('No state group `color` resolved'); }
+        element.addStaticState(klass, group.getState('yellow') as State);
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
         analysis.endElement(element);
         assert.deepEqual(1, 1);
       }));
@@ -153,10 +160,18 @@ export class TemplateAnalysisTests {
       analysis.blocks[""] = block;
       analysis.blocks["a"] = aBlock;
       let element = analysis.startElement({ line: 10, column: 32 });
+<<<<<<< HEAD
       let klass = block.getClass("pretty") as BlockClass;
       let group = klass.resolveGroup("color") as { [name: string]: State };
       element.addStaticClass(klass);
       element.addStaticState(klass, group["yellow"]);
+=======
+      let klass = block.getClass('pretty') as BlockClass;
+      let group = klass.resolveGroup('color');
+      if (!group) { throw new Error('No state group `color` resolved'); }
+      element.addStaticClass(klass);
+      element.addStaticState(klass, group.getState('yellow') as State);
+>>>>>>> feat(css-blocks): Broke up Block.ts, refactored foundational BlockObject constructs, added StateGroup concept.
       analysis.endElement(element);
       assert.deepEqual(1, 1);
     });
diff --git a/packages/css-blocks/test/validations/validator-test.ts b/packages/css-blocks/test/validations/validator-test.ts
index 336bad166..e91f344eb 100644
--- a/packages/css-blocks/test/validations/validator-test.ts
+++ b/packages/css-blocks/test/validations/validator-test.ts
@@ -3,7 +3,7 @@ import { Template } from "@opticss/template-api";
 import { suite, test } from "mocha-typescript";
 import * as postcss from "postcss";
 
-import { Block } from "../../src/Block";
+import { Block, BlockClass, State } from "../../src/Block";
 import { BlockFactory } from "../../src/BlockFactory";
 import { BlockParser } from "../../src/BlockParser";
 import { OptionsReader } from "../../src/OptionsReader";