fix: Addressing comments from Chris.

Author: ramitha

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

@@ -3,6 +3,7 @@ import { postcss } from "opticss";
 
 import { Analyzer } from "../Analyzer";
 import {
+  BLOCK_ALIAS,
   BLOCK_AT_RULES,
   BLOCK_DEBUG,
   BLOCK_PROP_NAMES_RE,
@@ -31,7 +32,6 @@ export class BlockCompiler {
   }
 
   compile(block: Block, root: postcss.Root, analyzer?: Analyzer<keyof TemplateTypes>): postcss.Root {
-
     let resolver = new ConflictResolver(this.config);
     let filename = this.config.importer.debugIdentifier(block.identifier, this.config);
 
@@ -54,6 +54,9 @@ export class BlockCompiler {
       }
     });
 
+    // Clean up block aliases across all styles (the above only cleans the root).
+    root.walkDecls(BLOCK_ALIAS, (decl) => decl.remove());
+
     // Resolve inheritance based conflicts
     resolver.resolveInheritance(root, block);
     root.walkRules((rule) => {

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

@@ -1,6 +1,6 @@
 import { CompoundSelector, ParsedSelector, postcss, postcssSelectorParser as selectorParser } from "opticss";
 
-import { BLOCK_ALIAS } from "../../BlockSyntax";
+import { BLOCK_ALIAS, CLASS_NAME_IDENT } from "../../BlockSyntax";
 import { AttrValue, Block, BlockClass, Style } from "../../BlockTree";
 import { Configuration } from "../../configuration";
 import * as errors from "../../errors";
@@ -87,9 +87,9 @@ export async function constructBlock(configuration: Configuration, root: postcss
         // If this is the key selector, save this ruleset on the created style.
         if (isKey) {
           if (foundStyles.blockAttrs.length) {
-            foundStyles.blockAttrs.map(s => addStyleRules(s, rule, styleRuleTuples));
+            foundStyles.blockAttrs.map(s => addStyleRules(configuration, block, rule, file, s, styleRuleTuples));
           } else {
-            foundStyles.blockClasses.map(s => addStyleRules(s, rule, styleRuleTuples));
+            foundStyles.blockClasses.map(s => addStyleRules(configuration, block, rule, file, s, styleRuleTuples));
           }
         }
 
@@ -107,10 +107,20 @@ export async function constructBlock(configuration: Configuration, root: postcss
   return block;
 }
 
-function addStyleRules(style: AttrValue | BlockClass, rule: postcss.Rule, tuple: Set<[Style, postcss.Rule]>): void {
+function addStyleRules(configuration: Configuration, block: Block, rule: postcss.Rule, file: string, style: AttrValue | BlockClass, tuple: Set<[Style, postcss.Rule]>): void {
   rule.walkDecls(BLOCK_ALIAS, decl => {
-    style.setStyleAliases(new Set(decl.value.split(/\s+/).map(stripQuotes)));
-    decl.remove();
+    let aliases: Set<string> = new Set();
+    decl.value.split(/\s+/).map(alias => {
+      let cleanedAlias = stripQuotes(alias);
+      if (!CLASS_NAME_IDENT.test(cleanedAlias)) {
+        throw new errors.InvalidBlockSyntax(
+          `Illegal block-alias in export. "${alias}" is not a legal CSS identifier.`,
+          sourceRange(configuration, block.stylesheet, file, rule),
+        );
+      }
+      aliases.add(cleanedAlias);
+    });
+    style.setStyleAliases(aliases);
   });
   tuple.add([style, rule]);
 }

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

@@ -395,16 +395,12 @@ export class Block
 
   /**
    * Return all the style aliases defined on the block.
-   * @param shallow Pass true to not include inherited objects.
    * @returns Array of style aliases.
    */
-  getAllStyleAliases(shallow?: boolean): Set<string> {
+  getAllStyleAliases(): Set<string> {
     let result = new Set<string>();
     for (let blockClass of this.classes) {
-      result = new Set([...result, ...blockClass.getStyleAliases()]);
-    }
-    if (!shallow && this.base) {
-      result = new Set([...result, ...this.base.getAllStyleAliases(shallow)]);
+      blockClass.getStyleAliases().forEach(alias => result.add(alias));
     }
     return result;
   }

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

@@ -88,14 +88,7 @@ export abstract class Style<
    * Adds a set of aliases to the to this object
    */
   public setStyleAliases(aliases: Set<string>): void {
-    if (aliases.size) {
-      // clear the existing styleAliases if they exist
-      if (this._styleAliases) {
-        this._styleAliases.clear();
-      } else {
-        this._styleAliases = aliases;
-      }
-    }
+    this._styleAliases = aliases;
   }
 
   /**

packages/@css-blocks/core/test/Block/style-alias-test.ts

@@ -80,7 +80,7 @@ export class StyleAlias extends BEMProcessor {
     let { config } = setupImporting();
 
     let filename = "foo/bar/a-block.css";
-    let inputCSS = `:scope { block-alias: a-block-alias1 "a-block-alias2-;-with"; color: red; }
+    let inputCSS = `:scope { block-alias: a-block-alias1 "a-block-alias2--with"; color: red; }
                     .foo { block-alias: my-class-alias1 my-class-alias-2; clear: both; }
                     .b[state|small] {block-alias: my-state-alias1 my-state-alias2; color: blue;}
                     @block-debug self to comment;`;
@@ -93,7 +93,7 @@ export class StyleAlias extends BEMProcessor {
           .a-block__foo { clear: both; }
           .a-block__b--small { color: blue; }
           /* Source: foo/bar/a-block.css
-           * :scope (.a-block, aliases: .a-block-alias1 .a-block-alias2-;-with)
+           * :scope (.a-block, aliases: .a-block-alias1 .a-block-alias2--with)
            *  ├── .b (.a-block__b)
            *  |    states:
            *  |    └── .b[state|small] (.a-block__b--small, aliases: .my-state-alias1 .my-state-alias2)

packages/@css-blocks/core/test/opticss-test.ts

@@ -56,7 +56,7 @@ export class TemplateAnalysisTests {
     let self = this;
     let filename = "blocks/foo.block.css";
     let css = clean`
-      :scope { block-alias: my-foo-alias "somethingwith,splcharacters;"; color: blue; font-size: 20px; }
+      :scope { block-alias: my-foo-alias "namewith-quotes"; color: blue; font-size: 20px; }
       :scope[state|foo] { block-alias: my-foo-alias-red; color: red; }
       .asdf { font-size: 20px; }
       .asdf[state|larger] { font-size: 26px; color: red; }
@@ -96,18 +96,7 @@ export class TemplateAnalysisTests {
     let analyzer = new TestAnalyzer();
     return analyzer.analyze().then(async (analyzer: TestAnalyzer) => {
       let compiler = new BlockCompiler(postcss, config);
-      let optimizer = new Optimizer({}, {
-        rewriteIdents: {
-          id: false,
-          class: true,
-          omitIdents: {
-            id: [],
-            class: [],
-          },
-        },
-        analyzedAttributes: [],
-        analyzedTagnames: false,
-      });
+      let optimizer = new Optimizer({}, { rewriteIdents: { id: false, class: true} });
       let block = await analyzer.blockFactory.getBlock(filename);
       let compiled = compiler.compile(block, block.stylesheet!, analyzer);
       for (let analysis of analyzer.analyses()) {
@@ -129,7 +118,7 @@ export class TemplateAnalysisTests {
         let it = analyses[0].elements.values();
         let element1 = it.next().value;
         let rewrite1 = blockMapping.rewriteMapping(element1);
-        assert.deepEqual([...rewrite1.staticClasses].sort(), ["c", "d", "e", "my-foo-alias", "my-foo-alias-red", "somethingwith,splcharacters;"]);
+        assert.deepEqual([...rewrite1.staticClasses].sort(), ["c", "d", "e", "my-foo-alias", "my-foo-alias-red", "namewith-quotes"]);
         assert.deepEqual(rewrite1.dynamicClasses, []);
         let element2 = it.next().value;
         let rewrite2 = blockMapping.rewriteMapping(element2);