fix: Add 'no-duplicate-state-groups' template validator.

 - New validator ensures no two states from the same state group may be applied.
 - Fix bug in JSX state group application to analysis. Respects inheritance now.
 - Add inheritance aware children getters to Inheritable.
 - Update webpackLoader to have a default export, as expected by Webpack.

Author: amiller-gh

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

@@ -181,13 +181,22 @@ export abstract class Inheritable<
   }
 
   /**
-   * Returns an array of all children nodes in the order they were added.
+   * Returns an array of all children nodes in the order they were added for Self.
    * @returns The children array.
    */
   protected children(): Child[] {
     return [...this._children.values()];
   }
 
+  /**
+   * Returns an array of all children nodes in the order they were added for
+   * self and all inherited children.
+   * @returns The children array.
+   */
+  protected resolveChildren(): Child[] {
+    return [...this.resolveChildrenMap().values()];
+  }
+
   /**
    * Returns a map of all children nodes at the keys they are stored..
    * @returns The children map.
@@ -196,14 +205,41 @@ export abstract class Inheritable<
     return new Map(this._children);
   }
 
+  /**
+   * Returns a map of all children nodes at the keys they are stored..
+   * @returns The children map.
+   */
+  protected resolveChildrenMap(): Map<string, Child> {
+    let inheritance = [...this.resolveInheritance(), this.asSelf()];
+    let out = new Map();
+    for (let o of inheritance) {
+      for (let [key, value] of o._children.entries()) {
+        out.set(key, value);
+      }
+    }
+    return out;
+  }
+
   /**
    * Returns a hash of all children nodes at the keys they are stored..
    * TODO: Cache this maybe? Convert entire model to only use hash?...
    * @returns The children hash.
    */
   protected childrenHash(): ObjectDictionary<Child> {
     let out = {};
-    for (let [key, value] of this._children.entries()) {
+    for (let [key, value] of this._children) {
+      out[key] = value;
+    }
+    return out;
+  }
+
+  /**
+   * Returns a map of all children nodes at the keys they are stored..
+   * @returns The children map.
+   */
+  protected resolveChildrenHash(): ObjectDictionary<Child> {
+    let out = {};
+    for (let [key, value] of this.resolveChildrenMap()) {
       out[key] = value;
     }
     return out;

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

@@ -54,11 +54,13 @@ export class StateGroup extends Inheritable<StateGroup, Block, BlockClass, State
    * @returns A hash of all `State`s contained in this `StateGroup`.
    **/
   statesHash(): ObjectDictionary<State> { return this.childrenHash(); }
+  resolveStatesHash(): ObjectDictionary<State> { return this.resolveChildrenHash(); }
 
   /**
    * @returns An Map of all `State`s contained in this `StateGroup`.
    **/
   statesMap(): Map<string, State> { return this.childrenMap(); }
+  resolveStatesMap(): Map<string, State> { return this.resolveChildrenMap(); }
 
   /**
    * Ensures that a state of name `name` exists in this State group. If no

packages/css-blocks/src/TemplateAnalysis/ElementAnalysis.ts

@@ -449,7 +449,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     this.assertSealed(false);
     this.addedStyles.push({
       container,
-      group: group.statesHash(),
+      group: group.resolveStatesHash(),
       stringExpression,
       disallowFalsy,
     });

packages/css-blocks/src/TemplateAnalysis/validations/index.ts

@@ -7,6 +7,7 @@ import { Validator } from "./Validator";
 import { classPairsValidator } from "./class-pairs-validator";
 import { propertyConflictValidator } from "./property-conflict-validator";
 import { rootClassValidator } from "./root-class-validator";
+import { stateGroupValidator } from "./state-group-validator";
 import { stateParentValidator } from "./state-parent-validator";
 
 export * from "./class-pairs-validator";
@@ -18,6 +19,7 @@ export interface TemplateValidators {
   "no-root-classes": Validator;
   "no-class-pairs": Validator;
   "no-state-orphans": Validator;
+  "no-duplicate-state-groups": Validator;
   "no-required-resolution": Validator;
   [name: string]: Validator;
 }
@@ -30,13 +32,15 @@ const VALIDATORS: TemplateValidators = {
   "no-root-classes": rootClassValidator,
   "no-class-pairs": classPairsValidator,
   "no-state-orphans": stateParentValidator,
+  "no-duplicate-state-groups": stateGroupValidator,
   "no-required-resolution": propertyConflictValidator,
 };
 
 const DEFAULT_VALIDATORS: TemplateValidatorOptions = {
   "no-root-classes": true,
   "no-class-pairs": true,
   "no-state-orphans": true,
+  "no-duplicate-state-groups": true,
   "no-required-resolution": true,
 };
 

packages/css-blocks/src/TemplateAnalysis/validations/state-group-validator.ts

@@ -0,0 +1,49 @@
+import { unionInto } from "@opticss/util";
+
+import { isState, StateGroup } from "../../Block";
+import { isBooleanState, isStateGroup } from "../ElementAnalysis";
+
+import { ErrorCallback, Validator } from "./Validator";
+
+/**
+ * Verify that we are not applying multiple states from a single state group in the same `objstr` call.
+ */
+function ensureUniqueStateGroup(discovered: Set<StateGroup>, group: StateGroup, err: ErrorCallback, track: boolean): StateGroup[] {
+  let groups = [...group.resolveInheritance(), group];
+  for (let g of groups) {
+    if (discovered.has(g)) {
+      err(`Can not apply multiple states at the same time from the exclusive state group "${g.asSource()}".`);
+    }
+    if (track) { discovered.add(g); }
+  }
+  return groups;
+}
+
+/**
+ * Prevent State from being applied to an element without their associated class.
+ * @param correlations The correlations object for a given element.
+ * @param err Error callback.
+ */
+
+export const stateGroupValidator: Validator = (analysis, _templateAnalysis, err) => {
+  let discovered: Set<StateGroup> = new Set();
+  for (let o of analysis.static) {
+    if (isState(o)) {
+      ensureUniqueStateGroup(discovered, o.parent, err, true);
+    }
+  }
+  for (let stat of analysis.dynamicStates) {
+    if (isBooleanState(stat)) {
+      ensureUniqueStateGroup(discovered, stat.state.parent, err, true);
+    }
+    if (isStateGroup(stat)) {
+      let tmp: Set<StateGroup> = new Set();
+      for (let key of Object.keys(stat.group)) {
+        let state = stat.group[key];
+        let vals = ensureUniqueStateGroup(discovered, state.parent, err, false);
+        vals.forEach((o) => tmp.add(o));
+      }
+      unionInto(discovered, tmp);
+    }
+  }
+};

packages/css-blocks/test/Block/BlockTree/block-tree-test.ts

@@ -50,6 +50,15 @@ class TestSource extends Inheritable<
 
   childNodeMap: RootNode["childrenMap"] =
     () => this.childrenMap()
+
+  resolveChildNodes: RootNode["children"] =
+    () => this.resolveChildren()
+
+  resolveChildNodeHash: RootNode["childrenHash"] =
+    () => this.resolveChildrenHash()
+
+  resolveChildNodeMap: RootNode["childrenMap"] =
+    () => this.resolveChildrenMap()
 }
 
 type ContainerNode = Inheritable<TestNode, TestSource, TestSource, TestSink>;
@@ -191,6 +200,13 @@ export class BlockTreeTests {
     assert.equal(source.getChildNode("base-only"), null);
     assert.equal(source.resolveChildNode("base-only"), baseUnique);
     assert.deepEqual(child.resolveInheritance(), [baseChild]);
+
+    assert.deepEqual(source.childNodes(), [child]);
+    assert.deepEqual(source.childNodeHash(), {"child": child});
+    assert.deepEqual([...source.childNodeMap().values()], [child]);
+    assert.deepEqual(source.resolveChildNodes(), [child, baseUnique]);
+    assert.deepEqual(source.resolveChildNodeHash(), { child, "base-only": baseUnique });
+    assert.deepEqual([...source.resolveChildNodeMap().values()], [child, baseUnique]);
   }
 
   @test "setBase creates inheritance tree for grandchildren"() {

packages/css-blocks/test/template-analysis-test.ts

@@ -276,68 +276,6 @@ export class TemplateAnalysisTests {
     });
   }
 
-  @test "adding the same styles more than once doesn't duplicate the styles found"() {
-    let info = new Template("templates/my-template.hbs");
-    let analysis = new TemplateAnalysis(info);
-    let imports = new MockImportRegistry();
-
-    let options: PluginOptions = { importer: imports.importer() };
-    let reader = new OptionsReader(options);
-
-    let css = `
-      [state|color=red]    { color: red; }
-      [state|color=blue]   { color: blue; }
-      [state|bgcolor=red]  { color: red; }
-      [state|bgcolor=blue] { color: blue; }
-    `;
-    return this.parseBlock(css, "blocks/foo.block.css", reader).then(([block, _]) => {
-        analysis.blocks[""] = block;
-        let element: TestElement = analysis.startElement({ line: 10, column: 32 });
-        element.addStaticClass(block.rootClass);
-        element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as StateGroup, null);
-        element.addDynamicGroup(block.rootClass, block.rootClass.resolveGroup("color") as StateGroup, null, true);
-        analysis.endElement(element);
-
-        let result = analysis.serialize();
-        let expectedResult: SerializedTemplateAnalysis<"Opticss.Template"> = {
-          blocks: {"": "blocks/foo.block.css"},
-          template: { type: "Opticss.Template", identifier: "templates/my-template.hbs"},
-          stylesFound: [
-            ".root",
-            "[state|color=blue]",
-            "[state|color=red]",
-          ],
-          elements: {
-            "a": {
-              "sourceLocation": {
-                "start": { filename: "templates/my-template.hbs", "column": 32, "line": 10 },
-              },
-              "staticStyles": [ 0 ],
-              "dynamicClasses": [],
-              "dynamicStates": [
-                {
-                  "stringExpression": true,
-                  "group": {
-                    "blue": 1,
-                    "red": 2,
-                  },
-                },
-                {
-                  "stringExpression": true,
-                  "disallowFalsy": true,
-                  "group": {
-                    "blue": 1,
-                    "red": 2,
-                  },
-                },
-              ],
-            },
-          },
-        };
-
-        assert.deepEqual(result, expectedResult);
-    });
-  }
   @test "multiple exclusive dynamic values added using enumerate correlations correctly in analysis"() {
     let info = new Template("templates/my-template.hbs");
     let analysis = new TemplateAnalysis(info);