feat: Passing all block aliases as reserved classNames for compilation.

Author: ramitha

packages/@css-blocks/core/package.json

@@ -7,7 +7,7 @@
     "compile": "tsc --version && tsc --build",
     "pretest": "yarn run compile",
     "test": "yarn run test:runner",
-    "test:runner": "mocha dist/test --opts test/mocha.opts",
+    "test:runner": "mocha dist/test/opticss-test.js --opts test/mocha.opts",
     "posttest": "yarn run lint",
     "prepublish": "rm -rf dist && yarn run compile && yarn run lintall",
     "lint": "tslint -t msbuild --project . -c tslint.cli.json",

packages/@css-blocks/core/src/Analyzer/Analysis.ts

@@ -180,7 +180,7 @@ export class Analysis<K extends keyof TemplateTypes> {
     if (this.currentElement) {
       throw new Error("Internal Error: failure to call endElement before previous call to startElement.");
     }
-    this.currentElement = new ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>(location, tagName, this.idGenerator.nextIdent());
+    this.currentElement = new ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>(this.reservedClassNames(), location, tagName, this.idGenerator.nextIdent());
     return this.currentElement;
   }
 
@@ -240,6 +240,19 @@ export class Analysis<K extends keyof TemplateTypes> {
     return objectValues(this.blocks);
   }
 
+  /**
+   * For now, returns all aliases referenced by this block and all the blocks they
+   * reference recursively. We can add more to this set in future
+   */
+  reservedClassNames(): Set<string> {
+    let aliases = new Set<string>();
+    let blocks = this.transitiveBlockDependencies();
+    blocks.forEach(block => {
+      block.getAllStyleAliases().forEach(alias => aliases.add(alias));
+    });
+    return aliases;
+  }
+
   /**
    * All the blocks referenced by this block and all the blocks they reference recursively.
    */
@@ -325,7 +338,7 @@ export class Analysis<K extends keyof TemplateTypes> {
    * @param options The plugin options that are used to parse the blocks.
    * @param postcssImpl The instance of postcss that should be used to parse the block's css.
    */
-  static async deserialize (
+  async deserialize (
     serializedAnalysis: SerializedAnalysis<keyof TemplateTypes>,
     blockFactory: BlockFactory,
     parent: Analyzer<keyof TemplateTypes>,
@@ -364,7 +377,7 @@ export class Analysis<K extends keyof TemplateTypes> {
     let elementNames = Object.keys(serializedAnalysis.elements);
     elementNames.forEach((elID) => {
       let data = serializedAnalysis.elements[elID];
-      let element = new ElementAnalysis<null, null, null>(data.sourceLocation || {start: POSITION_UNKNOWN}, undefined, elID);
+      let element = new ElementAnalysis<null, null, null>(this.reservedClassNames(), data.sourceLocation || {start: POSITION_UNKNOWN}, undefined, elID);
       analysis.elements.set(elID, element);
     });
 

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

@@ -117,6 +117,14 @@ export abstract class Analyzer<K extends keyof TemplateTypes> {
     return allBlocks;
   }
 
+  reservedClassNames(): Set<string> {
+    let allAliases = new Set<string>();
+    this.analysisMap.forEach(analysis => {
+      allAliases = new Set<string>([...allAliases, ...analysis.reservedClassNames()]);
+    });
+    return allAliases;
+  }
+
   serialize(): SerializedAnalyzer<K> {
     let analyses: SerializedAnalysis<K>[] = [];
     this.eachAnalysis(a => {

packages/@css-blocks/core/src/Analyzer/ElementAnalysis.ts

@@ -231,12 +231,14 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
 
   private _sealed: boolean;
 
+  private _reservedClassNames: Set<string>;
+
   /** whether all styles have been added and the styles can be analyzed now. */
   get sealed(): boolean {
     return this._sealed;
   }
 
-  constructor(location: SourceLocation, tagName?: string, id?: string) {
+  constructor(reservedClassNames: Set<string>, location: SourceLocation, tagName?: string, id?: string) {
     this.id = id;
     this.tagName = tagName;
     this.sourceLocation = location;
@@ -249,6 +251,7 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     this.allAttributes = new Set();
     this.addedStyles = new Array();
     this._sealed = false;
+    this._reservedClassNames = reservedClassNames;
   }
 
   hasStyles(): boolean {
@@ -818,15 +821,15 @@ export class ElementAnalysis<BooleanExpression, StringExpression, TernaryExpress
     let classes = new Array<AttributeValueSetItem>();
     let classMap = new Map<string, Style>();
     for (let style of this.allStaticStyles) {
-      let classNames = style.cssClassesWithAliases(configuration);
+      let classNames = style.cssClassesWithAliases(configuration, this._reservedClassNames);
       classNames.forEach(className => {
         classes.push(attrValues.constant(className));
         classMap.set(className, style);
       });
     }
 
-    let mapper: ClassMapper = mapClasses.bind(null, configuration, classMap);
-    let choices: ChoiceMapper = mapChoiceClasses.bind(null, configuration, classMap);
+    let mapper: ClassMapper = mapClasses.bind(null, configuration, this._reservedClassNames, classMap);
+    let choices: ChoiceMapper = mapChoiceClasses.bind(null, configuration, this._reservedClassNames, classMap);
 
     let depAttrsMap = new MultiMap<BlockClass, DynamicAttrs<BooleanExpression, StringExpression>>();
     for (let dynAttr of this.dynamicAttributes) {
@@ -986,13 +989,15 @@ function addToSet(
 type ClassMapper = (style: Style) => ValueConstant | AttributeValueSet;
 function mapClasses(
   configuration: ResolvedConfiguration,
+  reservedClassNames: Set<string>,
   map: Map<string, Style>,
   style: Style,
 ): ValueConstant | AttributeValueSet {
   let classes = new Array<string>();
   let resolvedStyles = style.resolveStyles();
   for (let resolvedStyle of resolvedStyles) {
-    let classNames = resolvedStyle.cssClassesWithAliases(configuration);
+    // TODO: update with a non empty set here
+    let classNames = resolvedStyle.cssClassesWithAliases(configuration, reservedClassNames);
     classNames.forEach(cls => {
       map.set(cls, resolvedStyle);
       classes.push(cls);
@@ -1008,6 +1013,7 @@ function mapClasses(
 type ChoiceMapper = (includeAbsent: boolean, ...styles: Style[]) => AttributeValueChoice;
 function mapChoiceClasses(
   configuration: ResolvedConfiguration,
+  reservedClassNames: Set<string>,
   map: Map<string, Style>,
   includeAbsent: boolean,
   /* tslint:disable-next-line */
@@ -1018,7 +1024,7 @@ function mapChoiceClasses(
     choices.push(attrValues.absent());
   }
   for (let style of styles) {
-    choices.push(mapClasses(configuration, map, style));
+    choices.push(mapClasses(configuration, reservedClassNames, map, style));
   }
   return attrValues.oneOf(choices);
 }

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

@@ -146,7 +146,7 @@ export class ConflictResolver {
    * @param root  The PostCSS ruleset to operate on.
    * @param block  The owner block of these rules.
    */
-  resolve(root: postcss.Root, block: Block) {
+  resolve(root: postcss.Root, block: Block, reservedClassNames: Set<string>) {
     const resolutions: Set<ResolutionDecls> = new Set();
 
     root.walkDecls((decl) => {
@@ -210,7 +210,7 @@ export class ConflictResolver {
       // Crawl up inheritance tree of the other block and attempt to resolve the conflict at each level.
       let foundConflict = ConflictType.noConflict;
       do {
-        foundConflict = this.resolveConflictWith(resolution.path, other, res);
+        foundConflict = this.resolveConflictWith(resolution.path, other, res, reservedClassNames);
         other = other.base;
       } while (other && foundConflict === ConflictType.noConflict);
 
@@ -229,6 +229,7 @@ export class ConflictResolver {
     referenceStr: string,
     other: Style,
     resolution: ResolutionDecls,
+    reservedClassNames: Set<string>,
   ): ConflictType {
     const { decl, localDecls, isOverride } = resolution;
 
@@ -254,7 +255,7 @@ export class ConflictResolver {
       // we reverse the selectors because otherwise the insertion order causes them to be backwards from the
       // source order of the target selector
       for (let s of resultSelectors.reverse()) {
-        let newSelectors = this.mergeKeySelectors(other.block.rewriteSelector(s.parsedSelector, this.config), cs);
+        let newSelectors = this.mergeKeySelectors(other.block.rewriteSelector(s.parsedSelector, this.config, reservedClassNames), cs);
         if (newSelectors === null) { continue; }
 
         // avoid duplicate selector via permutation

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

@@ -61,10 +61,10 @@ export class BlockCompiler {
     resolver.resolveInheritance(root, block);
     root.walkRules((rule) => {
       let parsedSelectors = block.getParsedSelectors(rule);
-      rule.selector = parsedSelectors.map(s => block.rewriteSelectorToString(s, this.config)).join(",\n");
+      rule.selector = parsedSelectors.map(s => block.rewriteSelectorToString(s, this.config, analyzer ? analyzer.reservedClassNames() : new Set())).join(",\n");
     });
 
-    resolver.resolve(root, block);
+    resolver.resolve(root, block, analyzer ? analyzer.reservedClassNames() : new Set());
 
     return root;
   }

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

@@ -95,12 +95,12 @@ export class AttrValue extends Style<AttrValue, Block, Attribute, never> {
     return this.attribute.blockClass.asSource(scope) + this.name();
   }
 
-  public cssClass(config: ResolvedConfiguration): string {
+  public cssClass(config: ResolvedConfiguration, reservedClassNames: Set<string>): string {
     switch (config.outputMode) {
       case OutputMode.BEM:
-        return `${this.parent.cssClass(config)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
+        return `${this.parent.cssClass(config, reservedClassNames)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
       case OutputMode.BEM_UNIQUE:
-        return `${this.parent.cssClass(config)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
+        return `${this.parent.cssClass(config, reservedClassNames)}${ this.isPresenceRule ? "" : `-${this.value}`}`;
       default:
         return assertNever(config.outputMode);
     }

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

@@ -166,12 +166,12 @@ export class Attribute extends Inheritable<Attribute, Block, BlockClass, AttrVal
    * @param config Option hash configuring output mode.
    * @returns String representing output class.
    */
-  cssClass(config: ResolvedConfiguration) {
+  cssClass(config: ResolvedConfiguration, reservedClassNames: Set<string>) {
     switch (config.outputMode) {
       case OutputMode.BEM:
-        return `${this.blockClass.cssClass(config)}--${this.token.name}`;
+        return `${this.blockClass.cssClass(config, reservedClassNames)}--${this.token.name}`;
       case OutputMode.BEM_UNIQUE:
-        return `${this.blockClass.cssClass(config)}--${this.token.name}`;
+        return `${this.blockClass.cssClass(config, reservedClassNames)}--${this.token.name}`;
       default:
         return assertNever(config.outputMode);
     }

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

@@ -400,7 +400,10 @@ export class Block
   getAllStyleAliases(): Set<string> {
     let result = new Set<string>();
     for (let blockClass of this.classes) {
+      // add aliases on the block class
       blockClass.getStyleAliases().forEach(alias => result.add(alias));
+      // add aliases for each of the state attributes within the block class
+      blockClass.allAttributeValues().forEach(value => value.getStyleAliases().forEach(alias => result.add(alias)));
     }
     return result;
   }
@@ -466,28 +469,29 @@ export class Block
     return null;
   }
 
-  rewriteSelectorNodes(nodes: selectorParser.Node[], config: ResolvedConfiguration): selectorParser.Node[] {
+  rewriteSelectorNodes(nodes: selectorParser.Node[], config: ResolvedConfiguration, reservedClassNames: Set<string>): selectorParser.Node[] {
     let newNodes: selectorParser.Node[] = [];
     for (let i = 0; i < nodes.length; i++) {
       let node = nodes[i];
       let result = this.nodeAsStyle(node);
       if (result === null) {
         newNodes.push(node);
       } else {
-        newNodes.push(selectorParser.className({ value: result[0].cssClass(config) }));
+        // TODO: check if this needs to be passed the global value as well
+        newNodes.push(selectorParser.className({ value: result[0].cssClass(config, reservedClassNames)}));
         i += result[1];
       }
     }
     return newNodes;
   }
 
-  rewriteSelectorToString(selector: ParsedSelector, config: ResolvedConfiguration): string {
+  rewriteSelectorToString(selector: ParsedSelector, config: ResolvedConfiguration, reservedClassNames: Set<string>): string {
     let firstNewSelector = new CompoundSelector();
     let newSelector = firstNewSelector;
     let newCurrentSelector = newSelector;
     let currentSelector: CompoundSelector | undefined = selector.selector;
     do {
-      newCurrentSelector.nodes = this.rewriteSelectorNodes(currentSelector.nodes, config);
+      newCurrentSelector.nodes = this.rewriteSelectorNodes(currentSelector.nodes, config, reservedClassNames);
       newCurrentSelector.pseudoelement = currentSelector.pseudoelement;
       if (currentSelector.next !== undefined) {
         let tempSel = newCurrentSelector;
@@ -501,10 +505,10 @@ export class Block
     return firstNewSelector.toString();
   }
 
-  rewriteSelector(selector: ParsedSelector, config: ResolvedConfiguration): ParsedSelector {
+  rewriteSelector(selector: ParsedSelector, config: ResolvedConfiguration, reservedClassNames: Set<string>): ParsedSelector {
     // generating a string and re-parsing ensures the internal structure is consistent
     // otherwise the parent/next/prev relationships will be wonky with the new nodes.
-    let s = this.rewriteSelectorToString(selector, config);
+    let s = this.rewriteSelectorToString(selector, config, reservedClassNames);
     return parseSelector(s)[0];
   }
 

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

@@ -204,13 +204,13 @@ export class BlockClass extends Style<BlockClass, Block, Block, Attribute> {
    * @param config Option hash configuring output mode.
    * @returns String representing output class.
    */
-  public cssClass(config: ResolvedConfiguration): string {
+  public cssClass(config: ResolvedConfiguration, reservedClassNames: Set<string>): string {
     switch (config.outputMode) {
       case OutputMode.BEM:
         let bemName = this.isRoot ? `${this.block.name}` : `${this.block.name}__${this.name}`;
-        // if the generated name exists as an alias on the block, then generate a
-        // unique name instead
-        if (this.block.getAllStyleAliases().has(bemName)) {
+        // if the generated name exists as a reserved classname (generated from
+        // blocks aliases), then generate a unique name instead
+        if (reservedClassNames.has(bemName)) {
           return this.isRoot ? `${this.block.name}_${this.block.guid}` : `${this.block.name}_${this.block.guid}__${this.name}`;
         } else {
           return bemName;