fix: Emit block style composition declarations in a def file.

Author: chriseppstein

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

@@ -1,8 +1,9 @@
+import { Dictionary } from "async";
 import { postcss } from "opticss";
 
-import { AttributeSelector, BlockExport, BlockReference, BlockSyntaxVersion, ClassSelector, Declaration, DefinitionAST, DefinitionRoot, ForeignAttributeSelector, GlobalDeclaration, LocalBlockExport, Mapper, Name, Rename, Rule, ScopeSelector, Selector, Visitor, builders, map as mapToDefinition, visit } from "../BlockParser/ast";
+import { AttributeSelector, BlockExport, BlockReference, BlockSyntaxVersion, ClassSelector, Declaration, DefinitionAST, DefinitionRoot, ForeignAttributeSelector, GlobalDeclaration, KeyCompoundSelector, LocalBlockExport, Mapper, Name, Rename, Rule, ScopeSelector, Selector, Visitor, builders, map as mapToDefinition, visit } from "../BlockParser/ast";
 import { BLOCK_GLOBAL } from "../BlockSyntax";
-import { Block, BlockClass, Style, isAttrValue, isBlockClass } from "../BlockTree";
+import { AttrValue, Block, BlockClass, Style, isAttrValue, isBlockClass } from "../BlockTree";
 import { ResolvedConfiguration } from "../configuration";
 
 export const INLINE_DEFINITION_FILE = Symbol("Inline Definition");
@@ -191,34 +192,35 @@ export class BlockDefinitionCompiler {
     for (let style of block.all(true)) {
       definitionRoot.children.push(this.styleToRule(style, reservedClassNames));
     }
+    definitionRoot.children.push(...this.complexCompositions(block));
     return definitionRoot;
   }
 
   styleToRule(style: Style, reservedClassNames: Set<string>): Rule<DefinitionAST> {
     let selectors = new Array<Selector<DefinitionAST>>();
     let blockClass: BlockClass = isAttrValue(style) ? style.blockClass : style;
-    let elementSelector: ClassSelector | ScopeSelector;
-    if (blockClass.isRoot) {
-      elementSelector = builders.scopeSelector();
-    } else {
-      elementSelector = builders.classSelector(blockClass.name);
-    }
     if (isAttrValue(style)) {
-      let attributeSelector: AttributeSelector;
-      if (style.isPresenceRule) {
-        attributeSelector = builders.attributeSelector(style.attribute.name);
-      } else {
-        attributeSelector = builders.attributeSelector(style.attribute.name, style.value);
-      }
-      selectors.push(builders.keyCompoundSelector(elementSelector, [attributeSelector]));
+      selectors.push(attributeSelectors(blockClass, [style]));
     } else {
-      selectors.push(elementSelector);
+      selectors.push(elementSelector(blockClass));
     }
     let declarations = new Array<Declaration>();
     if (isBlockClass(style) && style.isRoot) {
       declarations.push(builders.declaration("block-id", `"${style.block.guid}"`));
       declarations.push(builders.declaration("block-name", `"${style.block.name}"`));
     }
+
+    let compositions = new Array<string>();
+    for (let composition of blockClass.composedStyles()) {
+      if (composition.conditions.length === 0 && blockClass === style) {
+        compositions.push(composition.path);
+      } else if (composition.conditions.length === 1 && composition.conditions[0] === style) {
+        compositions.push(composition.path);
+      }
+    }
+    if (compositions.length > 0) {
+      declarations.push(builders.declaration("composes", compositions.join(", ")));
+    }
     declarations.push(builders.declaration("block-class", style.cssClass(this.config, reservedClassNames)));
     declarations.push(builders.declaration("block-interface-index", style.index.toString()));
     let aliasValues = new Array(...style.getStyleAliases());
@@ -227,6 +229,48 @@ export class BlockDefinitionCompiler {
     }
     return builders.rule(selectors, declarations);
   }
+  /**
+   * Simple compositions (which apply to a single block class or attribute) are
+   * processed when we generate the rule for that style. The complex
+   * compositions which apply to the intersection of more than one attribute
+   * require the generation of ruleset that targets all of those attributes
+   * together.
+   */
+  complexCompositions(block: Block): Array<Rule<DefinitionAST>> {
+    let complexCompositions: Dictionary<{ blockClass: BlockClass; attributes: AttrValue[]; paths: Array<string> }> = {};
+    for (let blockClass of block.classes) {
+      // Compositions can have any number of attributes and we need to collate the
+      // styles being composed for each unique set of attributes. To do this, we
+      // generate a unique key for each unique set of attributes and store the data
+      // we need against it.
+      for (let composition of blockClass.composedStyles()) {
+        if (composition.conditions.length > 1) {
+          let key = composition.conditions.map(c => c.index).sort().join(" ");
+          if (!complexCompositions[key]) {
+            complexCompositions[key] = {
+              blockClass,
+              attributes: composition.conditions,
+              paths: [composition.path],
+            };
+          } else {
+            complexCompositions[key].paths.push(composition.path);
+          }
+        }
+      }
+    }
+    // once we've collated all the compositions by the attributes we generate
+    // a rule for each distinct set of attributes and put a composes declaration
+    // in it.
+    let rules = new Array<Rule<DefinitionAST>>();
+    for (let key of Object.keys(complexCompositions)) {
+      let composition = complexCompositions[key];
+      let selector = attributeSelectors(composition.blockClass, composition.attributes);
+      let declarations = new Array<Declaration>();
+      declarations.push(builders.declaration("composes", composition.paths.join(", ")));
+      rules.push(builders.rule([selector], declarations));
+    }
+    return rules;
+  }
 
   blockReferences(root: postcss.Root, block: Block): void {
     block.eachBlockReference((name, _block) => {
@@ -244,3 +288,23 @@ export class BlockDefinitionCompiler {
     throw new Error("Method not implemented.");
   }
 }
+
+function elementSelector(blockClass: BlockClass): ClassSelector | ScopeSelector {
+  if (blockClass.isRoot) {
+    return builders.scopeSelector();
+  } else {
+    return builders.classSelector(blockClass.name);
+  }
+}
+
+function attributeSelectors(blockClass: BlockClass, attributes: Array<AttrValue>): KeyCompoundSelector<DefinitionAST> {
+  let attributeSelectors = new Array<AttributeSelector>();
+  for (let style of attributes) {
+    if (style.isPresenceRule) {
+      attributeSelectors.push(builders.attributeSelector(style.attribute.name));
+    } else {
+      attributeSelectors.push(builders.attributeSelector(style.attribute.name, style.value));
+    }
+  }
+  return builders.keyCompoundSelector(elementSelector(blockClass), attributeSelectors);
+}

packages/@css-blocks/core/test/block-definition-test.ts

@@ -1,5 +1,5 @@
 import { assert } from "chai";
-import { only, suite, test } from "mocha-typescript";
+import { suite, test } from "mocha-typescript";
 import { postcss } from "opticss";
 
 import * as cssBlocks from "../src";
@@ -45,7 +45,6 @@ export class BlockFactoryTests extends BEMProcessor {
       });
   }
 
-  @only
   @test async "can generate a definition"() {
     let { imports, factory } = setupImporting();
     let filename = "test-block.block.css";
@@ -77,7 +76,6 @@ export class BlockFactoryTests extends BEMProcessor {
       `));
   }
 
-  @only
   @test async "can generate a definition with block-global declarations."() {
     let { imports, factory } = setupImporting();
     let filename = "test-block.block.css";
@@ -98,7 +96,6 @@ export class BlockFactoryTests extends BEMProcessor {
       `));
   }
 
-  @only
   @test async "can generate a definition with a block reference"() {
     let { imports, factory } = setupImporting();
     imports.registerSource(
@@ -141,4 +138,65 @@ export class BlockFactoryTests extends BEMProcessor {
        @block bar, (bip, baz as zab) from "./bar.css";
        :scope { block-id: "${block.guid}"; block-name: "test-block"; block-class: test-block; block-interface-index: 0 }`));
   }
+
+  @test async "can generate a definition with style composition"() {
+    let { imports, factory } = setupImporting();
+    imports.registerSource(
+      "foo.block.css",
+      `:scope[oceanic] { color: blue; }
+       :scope[forrest] { color: green; }
+      `,
+    );
+    imports.registerSource(
+      "bar/bip.block.css",
+      `.orange { color: orange; }`,
+    );
+    imports.registerSource(
+      "bar/baz.block.css",
+      `:scope { color: red; }`,
+    );
+    imports.registerSource(
+      "bar.block.css",
+      `@block bip from "./bar/bip.block.css";
+       @export (default as bip) from "./bar/bip.block.css";
+       @export (default as baz) from "./bar/baz.block.css";
+       .lemon {
+         color: yellow;
+       }`,
+    );
+    let filename = "test-block.block.css";
+    imports.registerSource(
+      filename,
+      `@block foo from "./foo.block.css";
+       @block bar, (bip, baz as zab) from "./bar.block.css";
+       :scope {
+         composes: foo[oceanic];
+       }
+       .nav {
+         composes: foo, bip.orange;
+       }
+       .nav[open] {
+         composes: bar.lemon;
+       }
+       .nav[position=top] {
+         composes: foo[forrest];
+       }
+       .nav[position=top][open] {
+         composes: foo[oceanic], foo[forrest];
+       }
+       `,
+    );
+    let {block, definitionResult} = await compileBlockWithDefinition(factory, filename);
+    assert.deepEqual(
+      clean(definitionResult.css),
+      clean(`@block-syntax-version 1;
+       @block foo from "./foo.css";
+       @block bar, (bip, baz as zab) from "./bar.css";
+       :scope { block-id: "${block.guid}"; block-name: "test-block"; composes: foo[oceanic]; block-class: test-block; block-interface-index: 0 }
+       .nav { composes: foo, bip.orange; block-class: test-block__nav; block-interface-index: 1 }
+       .nav[open] { composes: bar.lemon; block-class: test-block__nav--open; block-interface-index: 3 }
+       .nav[position="top"] { composes: foo[forrest]; block-class: test-block__nav--position-top; block-interface-index: 5 }
+       .nav[position="top"][open] { composes: foo[oceanic], foo[forrest] }
+       `));
+  }
 }