feat: Per block namespaces.

RFC: #332

Don't require the 'state' namespace for state attributes in the block
file. When referring to global states, use that external block's local
namespace identifier in the state attribute's namespace.

Author: chriseppstein

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

@@ -1,11 +1,10 @@
 import { assertNever } from "@opticss/util";
 import { CompoundSelector, postcssSelectorParser as selectorParser } from "opticss";
 
-import { ATTR_PRESENT, AttrToken, ROOT_CLASS, STATE_NAMESPACE } from "../BlockSyntax";
+import { ATTR_PRESENT, AttrToken, ROOT_CLASS } from "../BlockSyntax";
 import { AttrValue, Block, BlockClass } from "../BlockTree";
 
 export enum BlockType {
-  block = 1,
   root,
   attribute,
   class,
@@ -40,13 +39,7 @@ export type BlockClassNode = {
 
 export type ClassNode = RootClassNode | BlockClassNode;
 
-export type BlockNode = {
-  blockName?: string;
-  blockType: BlockType.block;
-  node: selectorParser.Tag;
-};
-
-export type NodeAndType = AttributeNode | ClassNode | BlockNode;
+export type NodeAndType = AttributeNode | ClassNode;
 
 /** Extract an Attribute's value from a `selectorParser` attribute selector */
 function attrValue(attr: selectorParser.Attribute): string {
@@ -76,7 +69,6 @@ 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";
@@ -89,8 +81,8 @@ 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;
+export function isExternalBlock(object: NodeAndType): object is RootAttributeNode | RootClassNode {
+  return (object.blockType === BlockType.attribute && !!object.blockName);
 }
 
 /**
@@ -122,13 +114,16 @@ export function isRootNode(node: unknown): node is selectorParser.Pseudo {
 
 export const isClassNode = selectorParser.isClassName;
 
+export const RESERVED_NAMESPACES = new Set<string | undefined | true>(["html", "math", "svg"]);
+Object.freeze(RESERVED_NAMESPACES);
+
 /**
  * Check if given selector node is an attribute selector
  * @param  node The selector to test.
  * @return True if attribute selector, false if not.
  */
 export function isAttributeNode(node: selectorParser.Node): node is selectorParser.Attribute {
-  return selectorParser.isAttribute(node) && node.namespace === STATE_NAMESPACE;
+  return selectorParser.isAttribute(node) && !RESERVED_NAMESPACES.has(node.namespace);
 }
 
 /**
@@ -152,7 +147,12 @@ export function getStyleTargets(block: Block, sel: CompoundSelector): StyleTarge
 
   for (let node of sel.nodes) {
     if (isRootNode(node)) {
-      blockClass = block.rootClass;
+      let nextNode = node.next();
+      if (nextNode && isAttributeNode(nextNode) && typeof nextNode.namespace === "string") {
+        break;
+      } else {
+        blockClass = block.rootClass;
+      }
     }
     else if (isClassNode(node)) {
       blockClass = block.ensureClass(node.value);
@@ -161,7 +161,7 @@ export function getStyleTargets(block: Block, sel: CompoundSelector): StyleTarge
       // The fact that a base class exists for all state selectors is
       // validated in `assertBlockObject`. BlockClass may be undefined
       // here if parsing a global state.
-      if (!blockClass) { continue; }
+      if (!blockClass) { break; }
       blockAttrs.push(blockClass.ensureAttributeValue(toAttrToken(node)));
     }
   }

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

@@ -1,5 +1,6 @@
 import { postcss, postcssSelectorParser as selectorParser } from "opticss";
 
+import { ROOT_CLASS } from "../../BlockSyntax";
 import { Block } from "../../BlockTree";
 import { Configuration } from "../../configuration";
 import * as errors from "../../errors";
@@ -25,22 +26,28 @@ export async function assertForeignGlobalAttribute(configuration: Configuration,
 
         // 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
-        let blockName = sel.nodes.find(n => n.type === selectorParser.TAG);
-        if (!blockName || !blockName.value) { return; }
+        let blockName = sel.nodes.find(n => isAttributeNode(n) && n.namespace) as selectorParser.Attribute | undefined;
+
+        if (!blockName || !blockName.namespace) { return; }
+
+        if (blockName.namespace === true) {
+          // universal namespace selector was already validated; it won't occur here.
+          return;
+        }
 
         for (let node of sel.nodes) {
 
-          if (node.type === selectorParser.TAG) { continue; }
+          if ( node.type === selectorParser.PSEUDO && node.value === ROOT_CLASS) { continue; }
 
-          // If selecting something other than an attribute on external block, throw.
+          // If selecting something other than an attribute on external attribute, throw.
           if (!isAttributeNode(node)) {
             throw new errors.InvalidBlockSyntax(
-              `Only global states from other blocks can be used in selectors: ${rule.selector}`,
+              `Illegal global state selector: ${rule.selector}`,
               range(configuration, block.stylesheet, file, rule, node));
           }
 
           // If referenced block does not exist, throw.
-          let otherBlock = block.getReferencedBlock(blockName.value);
+          let otherBlock = block.getReferencedBlock(blockName.namespace);
           if (!otherBlock) {
             throw new errors.InvalidBlockSyntax(
               `No Block named "${blockName.value}" found in scope: ${rule.selector}`,

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

@@ -76,7 +76,7 @@ export async function constructBlock(configuration: Configuration, root: postcss
 
         // 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);
+        let blockName = sel.nodes.find(n => isAttributeNode(n) && n.namespace );
         if (blockName) {
           sel = sel.next && sel.next.selector;
           continue;
@@ -226,24 +226,19 @@ function assertValidSelector(configuration: Configuration, block: Block, rule: p
  */
 function assertBlockObject(configuration: Configuration, block: Block, sel: CompoundSelector, rule: postcss.Rule, file: string): NodeAndType {
 
-  // If selecting a block or tag, check that the referenced block has been imported.
-  // Otherwise, referencing a tag name is not allowed in blocks, throw an error.
-  let blockName = sel.nodes.find(selectorParser.isTag);
-  if (blockName) {
-    let refBlock = block.getReferencedBlock(blockName.value);
-    if (!refBlock) {
-      throw new errors.InvalidBlockSyntax(
-        `Tag name selectors are not allowed: ${rule.selector}`,
-        range(configuration, block.stylesheet, file, rule, blockName),
-      );
-    }
+  let tagNode = sel.nodes.find(selectorParser.isTag);
+  if (tagNode) {
+    throw new errors.InvalidBlockSyntax(
+      `Tag name selectors are not allowed: ${rule.selector}`,
+      range(configuration, block.stylesheet, file, rule, tagNode),
+    );
   }
 
   // Targeting attributes that are not state selectors is not allowed in blocks, throw.
   let nonStateAttribute = sel.nodes.find(n => selectorParser.isAttribute(n) && !isAttributeNode(n));
   if (nonStateAttribute) {
     throw new errors.InvalidBlockSyntax(
-      `Cannot select attributes other than states: ${rule.selector}`,
+      `Cannot select attributes in the \`${selectorParser.isAttribute(nonStateAttribute) && nonStateAttribute.namespaceString}\` namespace: ${rule.selector}`,
       range(configuration, block.stylesheet, file, rule, nonStateAttribute),
     );
   }
@@ -264,23 +259,6 @@ function assertBlockObject(configuration: Configuration, block: Block, sel: Comp
   // 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}"`,
-            range(configuration, block.stylesheet, 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)) {
@@ -314,10 +292,19 @@ function assertBlockObject(configuration: Configuration, block: Block, sel: Comp
             `States without an explicit :scope or class selector are not supported: ${rule.selector}`,
             range(configuration, block.stylesheet, file, rule, n),
           );
-        } else if (found.blockType === BlockType.class || found.blockType === BlockType.classAttribute) {
+        }
+        if (found.blockType === BlockType.class || found.blockType === BlockType.classAttribute) {
           found = { node: n, blockType: BlockType.classAttribute };
-        } else if (found.blockType === BlockType.block || found.blockType === BlockType.root || found.blockType === BlockType.attribute) {
-          found = { node: n, blockType: BlockType.attribute };
+        } else if (found.blockType === BlockType.root || found.blockType === BlockType.attribute) {
+          if (n.namespace === true) {
+            throw new errors.InvalidBlockSyntax(
+              `The "any namespace" selector is not supported: ${rule.selector}`,
+              range(configuration, block.stylesheet, file, rule, n),
+            );
+          }
+          // XXX this is where we drop the ref to the other attribute nodes,
+          // XXX potentially causing the interface to not be fully discovered
+          found = { node: n, blockType: BlockType.attribute, blockName: n.namespace };
         }
       }
 
@@ -348,9 +335,9 @@ function assertBlockObject(configuration: Configuration, block: Block, sel: Comp
         }
       }
       return found;
-  },
+    },
     null,
-);
+  );
 
   // If no rules found in selector, we have a problem. Throw.
   if (!result) {
@@ -360,24 +347,33 @@ function assertBlockObject(configuration: Configuration, block: Block, sel: Comp
   }
 
   if (isExternalBlock(result)) {
-    let external = block.getReferencedBlock(result.node.value!);
-    if (!external) { throw new errors.InvalidBlockSyntax(``, range(configuration, block.stylesheet, file, rule, sel.nodes[0])); }
+    let blockName: string | undefined;
+    if (result.blockType === BlockType.attribute) {
+      blockName = result.blockName!;
+    } else {
+      blockName = result.node.value;
+    }
+    let external = block.getReferencedBlock(blockName);
+    if (!external) {
+      throw new errors.InvalidBlockSyntax(`A block named "${blockName}" does not exist in this context.`,
+                                          range(configuration, block.stylesheet, 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.`,
+        `External Block '${blockName}' has no global states.`,
         range(configuration, block.stylesheet, 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(" ")}`,
-      range(configuration, block.stylesheet, file, rule, sel.nodes[0]));
+    if (result.blockType !== BlockType.attribute) {
+      throw new errors.InvalidBlockSyntax(
+        `Missing global state selector on external Block '${blockName}'. Did you mean one of: ${globalStates.map((s) => s.asSource()).join(" ")}`,
+        range(configuration, block.stylesheet, file, rule, sel.nodes[0]));
+    }
+    return result;
   }
 
   // Otherwise, return the block, type and associated node.
   else {
-    return {
-      blockName: blockName && blockName.value,
-      ...result,
-    };
+    return result;
   }
 }

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

@@ -5,7 +5,6 @@ import {
   CLASS_NAME_IDENT,
   DEFAULT_EXPORT,
   ROOT_CLASS,
-  STATE_NAMESPACE,
 } from "./BlockSyntax";
 
 interface BlockToken {
@@ -39,7 +38,7 @@ const isAttribute = (token?: Partial<Token>): token is AttrToken  => !!token &&
 const isQuoted = (token?: Partial<AttrToken>): boolean => !!token && !!token.quoted;
 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);
+const isValidNamespace = (token?: Partial<AttrToken>): boolean => !!token && (token.namespace === undefined);
 
 const ATTR_BEGIN = "[";
 const ATTR_END = "]";
@@ -54,7 +53,7 @@ const SEPARATORS = new Set([CLASS_BEGIN, ATTR_BEGIN, PSEUDO_BEGIN]);
 
 export const ERRORS = {
   whitespace: "Whitespace is only allowed in quoted attribute values",
-  namespace: "State attribute selectors are required to use a valid namespace.",
+  namespace: "Namespaces aren't used for states in a block path.",
   noname: "Block path segments must include a valid name",
   unclosedAttribute: "Unclosed attribute selector",
   mismatchedQuote: "No closing quote found in Block path",

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

@@ -6,9 +6,6 @@ import regexpu = require("regexpu-core");
  */
 export const CLASS_NAME_IDENT = new RegExp(regexpu("^(-?(?:\\\\.|[A-Za-z_\\u{0080}-\\u{10ffff}])(?:\\\\.|[A-Za-z0-9_\\-\\u{0080}-\\u{10ffff}])*)$", "u"));
 
-// State Attribute Namespace
-export const STATE_NAMESPACE = "state";
-
 // Prop Names
 export const EXTENDS = "extends";
 export const IMPLEMENTS = "implements";

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

@@ -24,7 +24,7 @@ export class Attribute extends Inheritable<Attribute, Block, BlockClass, AttrVal
   private _sourceAttributes: Attr[] | undefined;
 
   protected get ChildConstructor(): typeof AttrValue { return AttrValue; }
-  protected tokenToUid(token: AttrToken): string { return `${token.namespace}|${token.name}`; }
+  protected tokenToUid(token: AttrToken): string { return token.name; }
 
   public get name(): string { return this.token.name; }
   public get namespace(): string | null { return this.token.namespace || null; }

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

@@ -111,7 +111,7 @@ export class Block
    *                      | <attribute-selector>   // reference to attribute in this sub-block
    *     block-selector -> 'root'
    *     class-selector -> <ident>
-   *     attribute-selector -> '[state|' <ident> ']'
+   *     attribute-selector -> '[' <ident> ']'
    *     ident -> regex:[a-zA-Z_-][a-zA-Z0-9]*
    *   A single dot by itself returns the current block.
    * @returns The Style referenced at the supplied path.
@@ -154,7 +154,7 @@ export class Block
    *                      | <attribute-selector>   // reference to attribute in this sub-block
    *     block-selector -> 'root'
    *     class-selector -> <ident>
-   *     attribute-selector -> '[state|' <ident> ']'
+   *     attribute-selector -> '[' <ident> ']'
    *     ident -> regex:[a-zA-Z_-][a-zA-Z0-9]*
    *   A single dot by itself returns the current block.
    * @returns The Style referenced at the supplied path.
@@ -394,10 +394,10 @@ export class Block
   }
 
   nodeAsStyle(node: selectorParser.Node): [Styles, number] | null {
-    if (selectorParser.isTag(node)) {
-      let otherBlock = this.getReferencedBlock(node.value);
+    let next = node.next();
+    if (isRootNode(node) && next && isAttributeNode(next) && typeof next.namespace === "string") {
+      let otherBlock = this.getReferencedBlock(next.namespace);
       if (otherBlock) {
-        let next = node.next();
         if (next && isClassNode(next)) {
           let klass = otherBlock.getClass(next.value);
           if (klass) {

packages/@css-blocks/core/test/Block/lookup-test.ts

@@ -13,14 +13,14 @@ export class LookupTests {
   }
   @test "finds a state attribute"() {
     let block = new Block("test", "test.block.css");
-    let attr = block.rootClass.ensureAttributeValue("[state|foo]");
-    let found = block.lookup("[state|foo]");
+    let attr = block.rootClass.ensureAttributeValue("[foo]");
+    let found = block.lookup("[foo]");
     assert.deepEqual(attr, found);
   }
   @test "finds a state attribute with a value"() {
     let block = new Block("test", "test.block.css");
-    let attr = block.rootClass.ensureAttributeValue("[state|foo=bar]");
-    let found = block.lookup("[state|foo=bar]");
+    let attr = block.rootClass.ensureAttributeValue("[foo=bar]");
+    let found = block.lookup("[foo=bar]");
     assert.deepEqual(attr, found);
   }
   @test "invalid namespaces throw"() {
@@ -39,15 +39,15 @@ export class LookupTests {
   @test "finds a class with state attribute"() {
     let block = new Block("test", "test.block.css");
     let klass = block.ensureClass("foo");
-    let attr = klass.ensureAttributeValue("[state|a]");
-    let found = block.lookup(".foo[state|a]");
+    let attr = klass.ensureAttributeValue("[a]");
+    let found = block.lookup(".foo[a]");
     assert.deepEqual(attr, found);
   }
   @test "finds an class state attribute value"() {
     let block = new Block("test", "test.block.css");
     let klass = block.ensureClass("foo");
-    let attr = klass.ensureAttributeValue("[state|b=a]");
-    let found = block.lookup(".foo[state|b=a]");
+    let attr = klass.ensureAttributeValue("[b=a]");
+    let found = block.lookup(".foo[b=a]");
     assert.deepEqual(attr, found);
   }
   @test "finds referenced blocks"() {