feat: Require the :scope pseudo for root states.

 - Buggy getBlockNode removed from block-intermediates
 - block-intermediates made a private module of BlockParser
 - Unrelated: Fix webpack plugin file watcher for auto rebuilds

Author: amiller-gh

Diff for: ARCHITECTURE.md

@@ -175,7 +175,7 @@ We can easily conceptualize the `RewriteMapping` data for each element in develo
 ```javascript
 // For Element 1:
 //   - `.class-0` is always applied
-//   - [state|active] is *only* applied when `isActive` is true
+//   - `:scope[state|active]` is *only* applied when `isActive` is true
 const el1Classes = [
   "block__class-0",  
   isActive && "block__class-0--active"

Diff for: packages/@css-blocks/core/src/Analyzer/validations/property-conflict-validator.ts

@@ -55,6 +55,7 @@ function evaluate(obj: Style, propToRules: PropMap, conflicts: ConflictMap) {
           // If these styles are from the same block, abort!
           if (other.style.block === self.style.block) { continue; }
 
+
           // Get the declarations for this specific property.
           let selfDecl = self.declarations.get(prop);
           let otherDecl = other.declarations.get(prop);

Diff for: packages/@css-blocks/core/src/BlockCompiler/ConflictResolver.ts

@@ -1,9 +1,9 @@
 import { assertNever } from "@opticss/util";
 import { CompoundSelector, ParsedSelector, parseSelector, postcss, postcssSelectorParser as selectorParser } from "opticss";
 
-import { getBlockNode } from "../BlockParser";
+import { isRootNode, isClassNode, isAttributeNode, toAttrToken } from "../BlockParser";
 import { RESOLVE_RE } from "../BlockSyntax";
-import { Block, Style } from "../BlockTree";
+import { Block, BlockClass, Style } from "../BlockTree";
 import { ResolvedConfiguration } from "../configuration";
 import * as errors from "../errors";
 import { QueryKeySelector } from "../query";
@@ -88,11 +88,22 @@ export class ConflictResolver {
         let parsedSelectors = block.getParsedSelectors(rule);
         parsedSelectors.forEach((sel) => {
           let key = sel.key;
+          let obj: Style | null = null;
+          let container: BlockClass | null;
 
           // Fetch the associated `Style`. If does not exist (ex: malformed selector), skip.
-          let blockNode = getBlockNode(key);
-          if (!blockNode) { return; }
-          let obj: Style | null = block.nodeAndTypeToStyle(blockNode);
+          for (let node of key.nodes) {
+            if (isRootNode(node)) {
+              container = obj = block.rootClass;
+            }
+            if (isClassNode(node)) {
+              container = obj = block.getClass(node.value);
+            }
+            else if (isAttributeNode(node)) {
+              obj = container!.getAttributeValue(toAttrToken(node));
+            }
+          }
+
           if (!obj) { return; }
 
           // Fetch the set of Style conflicts. If the Style has already

Diff for: packages/@css-blocks/core/src/BlockParser/features/construct-block.ts

@@ -1,15 +1,13 @@
-import { assertNever } from "@opticss/util";
 import { CompoundSelector, ParsedSelector, postcss, postcssSelectorParser as selectorParser } from "opticss";
 
-import { Block, Style } from "../../BlockTree";
+import { Block, BlockClass, Style } from "../../BlockTree";
 import * as errors from "../../errors";
 import { selectorSourceLocation as loc, sourceLocation } from "../../SourceLocation";
 import {
   BlockNodeAndType,
   BlockType,
   NodeAndType,
   blockTypeName,
-  getBlockNode,
   isAttributeNode,
   isClassLevelObject,
   isClassNode,
@@ -71,53 +69,32 @@ export async function constructBlock(root: postcss.Root, block: Block, file: str
       // For each `CompoundSelector` in this rule, configure the `Block` object
       // depending on the BlockType.
       while (currentCompoundSel) {
+        
         let isKey = (keySel === currentCompoundSel);
-        let obj = getBlockNode(currentCompoundSel);
-        if (obj) {
-          switch (obj.blockType) {
-
-            // If type `block`, track all property concerns on the block object
-            // itself, excluding any inheritance properties. Make sure to
-            // process any inheritance properties present in this ruleset.
-            case BlockType.root:
-              if (!isKey) { break; }
-              styleRuleTuples.add([block.rootClass, rule]);
-              break;
-
-            // If a local attribute selector, ensure the attribute is registered with
-            // the parent block and track add all property concerns from this
-            // ruleset. If a foreign attribute, do nothing (validation happened earlier).
-            case BlockType.attribute:
-              if (obj.blockName) { break; }
-              let attr = block.rootClass.ensureAttributeValue(toAttrToken(obj.node));
-              if (!isKey) { break; }
-              styleRuleTuples.add([attr, rule]);
-              break;
-
-            // If a class selector, ensure this class is registered with the
-            // parent block and track all property concerns from this ruleset.
-            case BlockType.class:
-              let blockClass = block.ensureClass(obj.node.value);
-              if (!isKey) { break; }
-              styleRuleTuples.add([blockClass, rule]);
-              break;
-
-            // If a classAttribute selector, ensure the class is registered with
-            // the parent block, and the attribute is registered with this class.
-            // Track all property concerns from this ruleset.
-            case BlockType.classAttribute:
-              let classNode = obj.node.prev();
-              let classObj = block.ensureClass(classNode.value!);
-              let classAttr = classObj.ensureAttributeValue(toAttrToken(obj.node));
-              if (!isKey) { break; }
-              styleRuleTuples.add([classAttr, rule]);
-              break;
-            default:
-              assertNever(obj);
+        let blockClass: BlockClass | undefined = undefined;
+        let foundStyles: Style[] = [];
+
+        for (let node of currentCompoundSel.nodes) {
+          if (isRootNode(node)){
+            blockClass = block.rootClass;
+          }
+          else if (isClassNode(node)){
+            blockClass = block.ensureClass(node.value);
+          }
+          else if (isAttributeNode(node)){
+            // The fact that a base class exists for all state selectors is validated elsewhere
+            foundStyles.push(blockClass!.ensureAttributeValue(toAttrToken(node)));
           }
+
         }
+          // If we haven't found any terminating states, we're targeting the discovered Block class.
+          if (blockClass && !foundStyles.length) { foundStyles.push(blockClass); }
+
+          // If this is the key selector, save this ruleset on the created style.
+          if (isKey) {
+            foundStyles.map(s => styleRuleTuples.add([s, rule]));
+          }
 
-        // Move on to the next compound selector.
         currentCompoundSel = currentCompoundSel.next && currentCompoundSel.next.selector;
       }
     });
@@ -325,14 +302,14 @@ function assertBlockObject(block: Block, sel: CompoundSelector, rule: postcss.Ru
           );
         }
         if (!found) {
-          found = { node: n, blockType: BlockType.attribute };
-        } else if (found.blockType === BlockType.class) {
-          found = { node: n, blockType: BlockType.classAttribute };
-        } else if (found.blockType === BlockType.root) {
           throw new errors.InvalidBlockSyntax(
-            `It's redundant to specify a state with an explicit .root: ${rule.selector}`,
-            loc(file, rule, found.node),
+            `States without an explicit :scope or class selector are not yet supported: ${rule.selector}`,
+            loc(file, rule, n),
           );
+        } else if (found.blockType === BlockType.class || found.blockType === BlockType.classAttribute) {
+          found = { node: n, blockType: BlockType.classAttribute };
+        } else if (found.blockType === BlockType.root || found.blockType === BlockType.attribute) {
+          found = { node: n, blockType: BlockType.attribute };
         }
       }
 

Diff for: packages/@css-blocks/core/src/BlockSyntax/BlockPath.ts

@@ -20,7 +20,7 @@ interface ClassToken {
 export interface IAttrToken {
   namespace?: string;
   name: string;
-  value?: string;
+  value: string;
 }
 
 export interface AttrToken extends IAttrToken {
@@ -146,6 +146,8 @@ export class BlockPath {
    */
   private addToken(token: Partial<Token>, isUserProvided: boolean): void {
 
+    if (!token.type) { return; }
+
     // Final validation of incoming data. Blocks may have no name. State attribute must have a namespace.
     if (!isBlock(token) && !hasName(token)) { this.throw(ERRORS.noname); }
     if (isAttribute(token) && !isValidNamespace(token)) { this.throw(ERRORS.namespace); }
@@ -179,7 +181,7 @@ export class BlockPath {
     let char,
         working = "",
         walker = this.walker,
-        token: Partial<Token> = { type: "block" };
+        token: Partial<Token> | undefined = { type: "block" };
 
     while (char = walker.next()) {
 
@@ -193,6 +195,7 @@ export class BlockPath {
           if (working === ROOT_CLASS) {
             this.addToken({ type: "class", name: ROOT_CLASS }, true);
             working = "";
+            token = {};
             break;
           }
           else {

Diff for: packages/@css-blocks/core/src/BlockTree/Attribute.ts

@@ -139,7 +139,7 @@ export class Attribute extends Inheritable<Attribute, Block, BlockClass, AttrVal
    * @returns The Attribute's attribute selector.
    */
   asSource(value?: string): string {
-    return (this.blockClass.isRoot ? "" : this.blockClass.asSource()) + this.unqualifiedSource(value);
+    return this.blockClass.asSource() + this.unqualifiedSource(value);
   }
 
   /**

Diff for: packages/@css-blocks/core/src/BlockTree/Block.ts

@@ -1,4 +1,4 @@
-import { MultiMap, ObjectDictionary, assertNever } from "@opticss/util";
+import { MultiMap, ObjectDictionary } from "@opticss/util";
 import { whatever } from "@opticss/util";
 import {
   CompoundSelector,
@@ -8,12 +8,7 @@ import {
   postcssSelectorParser as selectorParser,
 } from "opticss";
 
-import {
-  BlockType,
-  NodeAndType,
-  isAttributeNode,
-  isClassNode,
-} from "../BlockParser";
+import { isAttributeNode, isClassNode } from "../BlockParser";
 import { isRootNode, toAttrToken } from "../BlockParser";
 import { BlockPath, CLASS_NAME_IDENT, ROOT_CLASS } from "../BlockSyntax";
 import { ResolvedConfiguration } from "../configuration";
@@ -279,34 +274,8 @@ export class Block
     return map;
   }
 
-  /**
-   * Fetch a the cached `Style` from `Block` given `NodeAndType`.
-   * @param obj The `NodeAndType` object to use for `Style` lookup.
-   */
-  nodeAndTypeToStyle(obj: NodeAndType): Styles | null {
-    switch (obj.blockType) {
-      case BlockType.root:
-        return this.rootClass;
-      case BlockType.attribute:
-        return this.rootClass.getAttributeValue(toAttrToken(obj.node));
-      case BlockType.class:
-        return this.getClass(obj.node.value);
-      case BlockType.classAttribute:
-        let classNode = obj.node.prev();
-        let classObj = this.getClass(classNode.value!);
-        if (classObj) {
-          return classObj.getAttributeValue(toAttrToken(obj.node));
-        }
-        return null;
-      default:
-        return assertNever(obj);
-    }
-  }
-
   nodeAsStyle(node: selectorParser.Node): [Styles, number] | null {
-    if (isRootNode(node)) {
-      return [this.rootClass, 0];
-    } else if (selectorParser.isTag(node)) {
+    if (selectorParser.isTag(node)) {
       let otherBlock = this.getReferencedBlock(node.value);
       if (otherBlock) {
         let next = node.next();
@@ -341,11 +310,9 @@ export class Block
       } else {
         return null;
       }
-    } else if (selectorParser.isClassName(node)) {
+    } else if (selectorParser.isClassName(node) || isRootNode(node)) {
       let klass = this.getClass(node.value);
-      if (klass === null) {
-        return null;
-      }
+      if (klass === null) { return null; }
       let next = node.next();
       if (next && isAttributeNode(next)) {
         let attr = klass.getAttributeValue(toAttrToken(next));

Diff for: packages/@css-blocks/core/src/BlockTree/BlockClass.ts

@@ -109,9 +109,8 @@ export class BlockClass extends Style<BlockClass, Block, Block, Attribute> {
    */
   public getAttributeValue(token: AttrToken | string): AttrValue | null {
     token = ensureToken(token);
-    let value = token.value || ATTR_PRESENT;
     let attr = this.getAttribute(token);
-    return attr ? attr.getValue(value) || null : null;
+    return attr ? attr.getValue(token.value) || null : null;
   }
 
   /**
@@ -136,8 +135,7 @@ export class BlockClass extends Style<BlockClass, Block, Block, Attribute> {
    */
   public ensureAttributeValue(token: AttrToken | string): AttrValue {
     token = ensureToken(token);
-    let value = token.value || ATTR_PRESENT;
-    return this.ensureAttribute(token).ensureValue(value);
+    return this.ensureAttribute(token).ensureValue(token.value);
   }
 
   /**

Diff for: packages/@css-blocks/core/test/attribute-container-test.ts

@@ -27,7 +27,7 @@ export class AttributeContainerTest extends BEMProcessor {
     let filename = "foo/bar/a-block.css";
     imports.registerSource(
       filename,
-      `[state|large] { font-size: 20px; }
+      `:scope[state|large] { font-size: 20px; }
        .foo   { float: left;   }
        .foo[state|small] { font-size: 5px; }`,
     );
@@ -52,9 +52,9 @@ export class AttributeContainerTest extends BEMProcessor {
     let filename = "foo/bar/a-block.css";
     imports.registerSource(
       filename,
-      `[state|size=large] { font-size: 20px; }
-       [state|size=small] { font-size: 10px; }
-       [state|active] { color: red; }
+      `:scope[state|size=large] { font-size: 20px; }
+       :scope[state|size=small] { font-size: 10px; }
+       :scope[state|active] { color: red; }
        .foo[state|mode=collapsed] { display: none; }
        .foo[state|mode=minimized] { display: block; max-height: 100px; }
        .foo[state|mode=expanded] { display: block; }`,
@@ -83,9 +83,9 @@ export class AttributeContainerTest extends BEMProcessor {
     let filename = "foo/bar/sub-block.block.css";
     imports.registerSource(
       "foo/bar/base-block.block.css",
-      `[state|size=large] { font-size: 20px; }
-       [state|size=small] { font-size: 10px; }
-       [state|active] { color: red; }
+      `:scope[state|size=large] { font-size: 20px; }
+       :scope[state|size=small] { font-size: 10px; }
+       :scope[state|active] { color: red; }
        .foo[state|mode=collapsed] { display: none; }
        .foo[state|mode=minimized] { display: block; max-height: 100px; }
        .foo[state|mode=expanded] { display: block; }`,
@@ -94,7 +94,7 @@ export class AttributeContainerTest extends BEMProcessor {
       filename,
       `@block-reference base-block from "base-block.block.css";
        :scope { extends: base-block; }
-       [state|size=tiny] { font-size: 6px; }
+       :scope[state|size=tiny] { font-size: 6px; }
        .foo[state|mode=minimized] { display: block; max-height: 200px; }`,
     );
 

Diff for: packages/@css-blocks/core/test/block-factory-test.ts

@@ -26,7 +26,7 @@ export class BlockFactoryTests extends BEMProcessor {
     imports.registerSource(
       baseFilename,
       `:scope { color: purple; }
-       [state|large] { font-size: 20px; }
+       :scope[state|large] { font-size: 20px; }
        .foo   { float: left;   }
        .foo[state|small] { font-size: 5px; }`,
     );

Diff for: packages/@css-blocks/core/test/block-inheritance-test.ts

@@ -11,7 +11,7 @@ export class BlockInheritance extends BEMProcessor {
     imports.registerSource(
       "foo/bar/base.css",
       `:scope { color: purple; }
-       [state|large] { font-size: 20px; }
+       :scope[state|large] { font-size: 20px; }
        .foo   { float: left;   }
        .foo[state|small] { font-size: 5px; }`,
     );
@@ -37,7 +37,7 @@ export class BlockInheritance extends BEMProcessor {
         "   .b[state|small] => .inherits__b--small\n" +
         "   .foo => .base__foo .inherits__foo\n" +
         "   .foo[state|small] => .base__foo--small\n" +
-        "   [state|large] => .base--large */\n",
+        "   :scope[state|large] => .base--large */\n",
       );
     });
   }