fix: Update global states to use simplified parser utils.

Author: amiller-gh

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

@@ -55,7 +55,6 @@ 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);

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

@@ -1,7 +1,7 @@
 import { assertNever } from "@opticss/util";
 import { CompoundSelector, ParsedSelector, parseSelector, postcss, postcssSelectorParser as selectorParser } from "opticss";
 
-import { isRootNode, isClassNode, isAttributeNode, toAttrToken } from "../BlockParser";
+import { isAttributeNode, isClassNode, isRootNode, toAttrToken } from "../BlockParser";
 import { RESOLVE_RE } from "../BlockSyntax";
 import { Block, BlockClass, Style } from "../BlockTree";
 import { ResolvedConfiguration } from "../configuration";

packages/@css-blocks/core/src/BlockParser/block-intermediates.ts

@@ -4,7 +4,8 @@ import { CompoundSelector, postcssSelectorParser as selectorParser } from "optic
 import { ATTR_PRESENT, AttrToken, ROOT_CLASS, STATE_NAMESPACE } from "../BlockSyntax";
 
 export enum BlockType {
-  root = 1,
+  block = 1,
+  root,
   attribute,
   class,
   classAttribute,
@@ -16,6 +17,9 @@ export type NodeAndType = {
 } | {
   blockType: BlockType.root | BlockType.class;
   node: selectorParser.ClassName | selectorParser.Pseudo;
+} | {
+  blockType: BlockType.block;
+  node: selectorParser.Tag;
 };
 
 export type BlockNodeAndType = NodeAndType & {
@@ -34,7 +38,6 @@ function attrValue(attr: selectorParser.Attribute): string {
 /** Extract an Attribute's name from an attribute selector */
 export function toAttrToken(attr: selectorParser.Attribute): AttrToken {
   return {
-    type: "attribute",
     namespace: attr.namespaceString,
     name: attr.attribute,
     value: attrValue(attr),
@@ -51,6 +54,7 @@ export function toAttrToken(attr: selectorParser.Attribute): AttrToken {
 export function blockTypeName(t: BlockType, options?: { plural: boolean }): string {
   let isPlural = options && options.plural;
   switch (t) {
+    case BlockType.block: return isPlural ? "external blocks" : "external block";
     case BlockType.root: return isPlural ? "block roots" : "block root";
     case BlockType.attribute: return isPlural ? "root-level states" : "root-level state";
     case BlockType.class: return isPlural ? "classes" : "class";
@@ -59,10 +63,18 @@ export function blockTypeName(t: BlockType, options?: { plural: boolean }): stri
   }
 }
 
+/**
+ * Test if the provided node representation is an external block.
+ * @param object The NodeAndType's descriptor object.
+ */
+export function isExternalBlock(object: NodeAndType): boolean {
+  return object.blockType === BlockType.block;
+}
+
 /**
  * Test if the provided node representation is a root level object, aka: operating
  * on the root element.
- * @param object The CompoundSelector's descriptor object.
+ * @param object The NodeAndType's descriptor object.
  */
 export function isRootLevelObject(object: NodeAndType): boolean {
   return object.blockType === BlockType.root || object.blockType === BlockType.attribute;

packages/@css-blocks/core/src/BlockParser/features/assert-foreign-global-attribute.ts

@@ -1,13 +1,9 @@
-import { postcss } from "opticss";
+import { postcss, postcssSelectorParser as selectorParser } from "opticss";
 
 import { Block } from "../../BlockTree";
 import * as errors from "../../errors";
 import { selectorSourceLocation as loc } from "../../SourceLocation";
-import {
-  BlockType,
-  getBlockNode,
-  toAttrToken,
-} from "../block-intermediates";
+import { isAttributeNode, toAttrToken } from "../block-intermediates";
 
 /**
  * Verify that the external block referenced by a `rule` selects an Attribute that
@@ -24,42 +20,47 @@ export async function assertForeignGlobalAttribute(root: postcss.Root, block: Bl
 
     parsedSelectors.forEach((iSel) => {
 
-      iSel.eachCompoundSelector((compoundSel) => {
-
-        let obj = getBlockNode(compoundSel);
+      iSel.eachCompoundSelector((sel) => {
 
         // Only test rules that are block references (this is validated in parse-styles and shouldn't happen).
         // If node isn't selecting a block, move on
-        if (!obj || !obj.blockName) { return; }
+        let blockName = sel.nodes.find(n => n.type === selectorParser.TAG);
+        if (!blockName || !blockName.value) { return; }
 
-        // If selecting something other than an attribute on external block, throw.
-        if (obj.blockType !== BlockType.attribute) {
-          throw new errors.InvalidBlockSyntax(
-            `Only global states from other blocks can be used in selectors: ${rule.selector}`,
-            loc(file, rule, obj.node));
-        }
+        for (let node of sel.nodes) {
 
-        // If referenced block does not exist, throw.
-        let otherBlock = block.getReferencedBlock(obj.blockName!);
-        if (!otherBlock) {
-          throw new errors.InvalidBlockSyntax(
-            `No block named ${obj.blockName} found: ${rule.selector}`,
-            loc(file, rule, obj.node));
-        }
+          if (node.type === selectorParser.TAG) { continue; }
 
-        // If state referenced does not exist on external block, throw
-        let otherAttr = otherBlock.rootClass.getAttributeValue(toAttrToken(obj.node));
-        if (!otherAttr) {
-          throw new errors.InvalidBlockSyntax(
-            `No state ${obj.node.toString()} found in : ${rule.selector}`,
-            loc(file, rule, obj.node));
-        }
+          // If selecting something other than an attribute on external block, throw.
+          if (!isAttributeNode(node)) {
+            throw new errors.InvalidBlockSyntax(
+              `Only global states from other blocks can be used in selectors: ${rule.selector}`,
+              loc(file, rule, node));
+          }
+
+          // If referenced block does not exist, throw.
+          let otherBlock = block.getReferencedBlock(blockName.value);
+          if (!otherBlock) {
+            throw new errors.InvalidBlockSyntax(
+              `No block named ${blockName.value} found: ${rule.selector}`,
+              loc(file, rule, node));
+          }
+
+          // If state referenced does not exist on external block, throw
+          let otherAttr = otherBlock.rootClass.getAttributeValue(toAttrToken(node));
+          if (!otherAttr) {
+            throw new errors.InvalidBlockSyntax(
+              `No state ${node.toString()} found in : ${rule.selector}`,
+              loc(file, rule, node));
+          }
+
+          // If external state is not set as global, throw.
+          if (!otherAttr.isGlobal) {
+            throw new errors.InvalidBlockSyntax(
+              `${node.toString()} is not global: ${rule.selector}`,
+              loc(file, rule, node));
+          }
 
-        // If external state is not set as global, throw.
-        if (!otherAttr.isGlobal) {
-          throw new errors.InvalidBlockSyntax(
-            `${obj.node.toString()} is not global: ${rule.selector}`,
-            loc(file, rule, obj.node));
         }
       });
     });

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

@@ -11,6 +11,7 @@ import {
   isAttributeNode,
   isClassLevelObject,
   isClassNode,
+  isExternalBlock,
   isRootLevelObject,
   isRootNode,
   toAttrToken,
@@ -61,41 +62,50 @@ export async function constructBlock(root: postcss.Root, block: Block, file: str
     parsedSelectors.forEach((iSel) => {
 
       let keySel = iSel.key;
-      let currentCompoundSel: CompoundSelector | undefined = iSel.selector;
+      let sel: CompoundSelector | undefined = iSel.selector;
 
       // Assert this selector is well formed according to CSS Blocks' selector rules.
       assertValidSelector(block, rule, iSel, file);
 
       // For each `CompoundSelector` in this rule, configure the `Block` object
       // depending on the BlockType.
-      while (currentCompoundSel) {
-        
-        let isKey = (keySel === currentCompoundSel);
+      while (sel) {
+
+        let isKey = (keySel === sel);
         let blockClass: BlockClass | undefined = undefined;
         let foundStyles: Style[] = [];
 
-        for (let node of currentCompoundSel.nodes) {
-          if (isRootNode(node)){
+        // If this is an external Style, move on. These are validated
+        // in `assert-foreign-global-attribute`.
+        let blockName = sel.nodes.find(n => n.type === selectorParser.TAG);
+        if (blockName) {
+          sel = sel.next && sel.next.selector;
+          continue;
+        }
+
+        for (let node of sel.nodes) {
+          if (isRootNode(node)) {
             blockClass = block.rootClass;
           }
-          else if (isClassNode(node)){
+          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
+          else if (isAttributeNode(node)) {
+            // The fact that a base class exists for all state selectors is
+            // validated in `assertBlockObject`.
             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]));
-          }
+        // 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]));
+        }
 
-        currentCompoundSel = currentCompoundSel.next && currentCompoundSel.next.selector;
+        sel = sel.next && sel.next.selector;
       }
     });
   });
@@ -268,6 +278,23 @@ function assertBlockObject(block: Block, sel: CompoundSelector, rule: postcss.Ru
   // Test each node in selector
   let result = sel.nodes.reduce<NodeAndType | null>(
     (found, n) => {
+
+      // If this is an external Block reference, indicate we have encountered it.
+      // If this is not the first BlockType encountered, throw the appropriate error.
+      if (n.type === selectorParser.TAG) {
+        if (found === null) {
+          found = {
+            blockType: BlockType.block,
+            node: n,
+          };
+        } else {
+          throw new errors.InvalidBlockSyntax(
+            `External Block ${n} must be the first selector in "${rule.selector}"`,
+            loc(file, rule, sel.nodes[0]),
+          );
+        }
+      }
+
       // If selecting the root element, indicate we have encountered it. If this
       // is not the first BlockType encountered, throw the appropriate error
       if (isRootNode(n)) {
@@ -282,11 +309,6 @@ function assertBlockObject(block: Block, sel: CompoundSelector, rule: postcss.Ru
               `${n} cannot be on the same element as ${found.node}: ${rule.selector}`,
               loc(file, rule, sel.nodes[0]),
             );
-          } else if (found.blockType === BlockType.attribute) {
-            throw new errors.InvalidBlockSyntax(
-              `It's redundant to specify a state with the an explicit .root: ${rule.selector}`,
-              loc(file, rule, n),
-            );
           }
         }
       }
@@ -308,7 +330,7 @@ function assertBlockObject(block: Block, sel: CompoundSelector, rule: postcss.Ru
           );
         } 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) {
+        } else if (found.blockType === BlockType.block || found.blockType === BlockType.root || found.blockType === BlockType.attribute) {
           found = { node: n, blockType: BlockType.attribute };
         }
       }
@@ -351,6 +373,20 @@ function assertBlockObject(block: Block, sel: CompoundSelector, rule: postcss.Ru
       loc(file, rule, sel.nodes[0]));
   }
 
+  if (isExternalBlock(result)) {
+    let external = block.getReferencedBlock(result.node.value!);
+    if (!external) { throw new errors.InvalidBlockSyntax(``, loc(file, rule, sel.nodes[0])); }
+    let globalStates = external.rootClass.allAttributeValues().filter((a) => a.isGlobal);
+    if (!globalStates.length) {
+      throw new errors.InvalidBlockSyntax(
+        `External Block '${result.node.value}' has no global states.`,
+        loc(file, rule, sel.nodes[0]));
+    }
+    throw new errors.InvalidBlockSyntax(
+      `Missing global state selector on external Block '${result.node.value}'. Did you mean one of: ${globalStates.map((s) => s.asSource()).join(" ")}`,
+      loc(file, rule, sel.nodes[0]));
+  }
+
   // Otherwise, return the block, type and associated node.
   else {
     return {

packages/@css-blocks/core/src/BlockParser/index.ts

@@ -1,12 +1,9 @@
 // These constructs are **only** used in "../Block/Block.ts"!
 // Can we make these internal to the package?
 export {
-  BlockType,
-  NodeAndType,
   isAttributeNode,
   isClassNode,
   isRootNode,
-  getBlockNode,
   toAttrToken,
 } from "./block-intermediates";
 

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

@@ -2,7 +2,7 @@ import { BlockPathError, ErrorLocation } from "../errors";
 
 import {
   ATTR_PRESENT,
-  CLASS_NAME_IDENT as CSS_IDENT,
+  CLASS_NAME_IDENT,
   ROOT_CLASS,
   STATE_NAMESPACE,
 } from "./BlockSyntax";
@@ -17,24 +17,26 @@ interface ClassToken {
   name: string;
 }
 
-export interface IAttrToken {
+interface IAttrToken {
   namespace?: string;
+  value?: string;
   name: string;
-  value: string;
+  quoted?: boolean;
 }
 
-export interface AttrToken extends IAttrToken {
+interface AttrToken extends IAttrToken {
   type: "attribute";
-  quoted: boolean;
 }
 
 type Token = BlockToken | ClassToken | AttrToken;
 
+export { IAttrToken as AttrToken };
+
 const isBlock = (token?: Partial<Token>): token is BlockToken => !!token && token.type === "block";
 const isClass = (token?: Partial<Token>): token is ClassToken => !!token && token.type === "class";
 const isAttribute = (token?: Partial<Token>): token is AttrToken  => !!token && token.type === "attribute";
 const isQuoted = (token?: Partial<AttrToken>): boolean => !!token && !!token.quoted;
-const isIdent = (ident?: string): boolean => !ident || CSS_IDENT.test(ident);
+const isIdent = (ident?: string): boolean => !ident || CLASS_NAME_IDENT.test(ident);
 const hasName = (token?: Partial<Token>): boolean => !!token && !!token.name;
 const isValidNamespace = (token?: Partial<AttrToken>): boolean => !!token && (token.namespace === undefined || token.namespace === STATE_NAMESPACE);
 
@@ -343,7 +345,7 @@ export class BlockPath {
   /**
    * Get the parsed attribute name of this Block Path and return the `AttrInfo`
    */
-  get attribute(): AttrToken | undefined {
+  get attribute(): IAttrToken | undefined {
     if (!this._attribute) return;
     return this._attribute;
   }

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

@@ -8,7 +8,7 @@ import {
 } from "@opticss/element-analysis";
 import { ObjectDictionary, assertNever } from "@opticss/util";
 
-import { ATTR_PRESENT, IAttrToken as AttrToken } from "../BlockSyntax";
+import { ATTR_PRESENT, AttrToken } from "../BlockSyntax";
 import { OutputMode, ResolvedConfiguration } from "../configuration";
 
 import { AttrValue } from "./AttrValue";

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

@@ -2,7 +2,7 @@ import { Attribute as Attr, AttributeValue, attrValues } from "@opticss/element-
 import { assertNever } from "@opticss/util";
 import { isString } from "util";
 
-import { ATTR_PRESENT, IAttrToken as AttrToken, ROOT_CLASS } from "../BlockSyntax";
+import { ATTR_PRESENT, AttrToken, ROOT_CLASS } from "../BlockSyntax";
 import { BlockPath } from "../BlockSyntax";
 import { OutputMode, ResolvedConfiguration } from "../configuration";