feat(css-blocks): Track all declarations of the same type and validate that they have the same values, in the same order, before clearing two Styles as not-in-conflict.

Author: amiller-gh

packages/css-blocks/src/Block/RulesetContainer.ts

@@ -44,7 +44,7 @@ export class Ruleset {
   node: postcss.Rule;
   style: Style;
 
-  declarations = new Map<Property, Declaration>();
+  declarations = new MultiMap<Property, Declaration>();
   resolutions  = new MultiMap<Property, Style>();
 
   constructor(file: string, node: postcss.Rule, style: Style){

packages/css-blocks/src/TemplateAnalysis/validations/property-conflict-validator.ts

@@ -60,9 +60,16 @@ function evaluate(obj: Style, propToRules: PropMap, conflicts: ConflictMap) {
           let otherDecl = other.declarations.get(prop);
           if ( !selfDecl || !otherDecl ) { continue; }
 
-          // If these declarations have the exact same value, of if there
-          // is a specific resolution, keep going.
-          if ( selfDecl.value === otherDecl.value ||
+          // If these declarations have the exact same number of declarations,
+          // in the exact same order, or if there is an explicit resolution,
+          // ignore it and move on.
+          let valuesEqual = selfDecl.length === otherDecl.length;
+          if (valuesEqual) {
+            for (let i = 0; i < Math.min(selfDecl.length, otherDecl.length); i++ ) {
+              valuesEqual = valuesEqual && selfDecl[i].value === otherDecl[i].value;
+            }
+          }
+          if ( valuesEqual ||
               other.hasResolutionFor(prop, self.style) ||
               self.hasResolutionFor(prop, other.style)
               ) { continue; }
@@ -105,10 +112,14 @@ function recursivelyPruneConflicts(prop: string, conflicts: ConflictMap): Rulese
  */
 function printRulesetConflict(prop: string, rule: Ruleset) {
   let decl = rule.declarations.get(prop);
-  let node: postcss.Rule | postcss.Declaration =  decl ? decl.node : rule.node;
-  let line = node.source.start && `:${node.source.start.line}`;
-  let column = node.source.start && `:${node.source.start.column}`;
-  return `    ${rule.style.block.name}${rule.style.asSource()} (${rule.file}${line}${column})`;
+  let nodes: postcss.Rule[] | postcss.Declaration[] =  decl ? decl.map((d) => d.node) : [rule.node];
+  let out = [];
+  for (let node of nodes) {
+    let line = node.source.start && `:${node.source.start.line}`;
+    let column = node.source.start && `:${node.source.start.column}`;
+    out.push(`    ${rule.style.block.name}${rule.style.asSource()} (${rule.file}${line}${column})`);
+  }
+  return out.join('\n');
 }
 
 /**

packages/css-blocks/test/validations/property-conflict-validator-test.ts

@@ -54,18 +54,18 @@ export class TemplateAnalysisTests {
     });
   }
 
-  @test 'properties of the same value that have been redefined in-ruleset do not throw an error'() {
+  @test 'all properties of the same type must match, in order, for a conflict to not be thrown'() {
     let imports = new MockImportRegistry();
     let options: PluginOptions = { importer: imports.importer() };
     let reader = new OptionsReader(options);
 
     imports.registerSource("blocks/b.block.css",
-      `.root { block-name: block-b; color: red; color: blue; background: yellow; }`
+      `.root { block-name: block-b; color: blue; color: yellow; }`
     );
 
     let css = `
       @block-reference b from "./b.block.css";
-      .root { block-name: block-a; color: blue; background-color: yellow; }
+      .root { block-name: block-a; color: blue; color: yellow; }
     `;
 
     return this.parseBlock(css, "blocks/foo.block.css", reader).then(([block, _]) => {
@@ -74,7 +74,39 @@ export class TemplateAnalysisTests {
     });
   }
 
-  @test 'properties of the different values that have been redefined in-ruleset throw an error'() {
+  @test 'if properties of the same type do not match, in order, a conflict is thrown'() {
+    let imports = new MockImportRegistry();
+    let options: PluginOptions = { importer: imports.importer() };
+    let reader = new OptionsReader(options);
+
+    imports.registerSource("blocks/b.block.css",
+      `.root { block-name: block-b; color: red; color: yellow; }`
+    );
+
+    let css = `
+      @block-reference b from "./b.block.css";
+      .root { block-name: block-a; color: blue; color: yellow; }
+    `;
+
+    return assertParseError(
+      cssBlocks.TemplateAnalysisError,
+
+`The following property conflicts must be resolved for these co-located Styles: (templates/my-template.hbs:10:32)
+
+  color:
+    block-a.root (blocks/foo.block.css:3:36)
+    block-a.root (blocks/foo.block.css:3:49)
+    block-b.root (blocks/b.block.css:1:30)
+    block-b.root (blocks/b.block.css:1:42)`,
+
+      this.parseBlock(css, "blocks/foo.block.css", reader).then(([block, _]) => {
+        constructElement(block, '.root', 'b.root').end();
+        assert.deepEqual(1, 1);
+      })
+    );
+  }
+
+  @test 'properties with different values that have been redefined in-ruleset throw an error'() {
     let imports = new MockImportRegistry();
     let options: PluginOptions = { importer: imports.importer() };
     let reader = new OptionsReader(options);
@@ -95,6 +127,7 @@ export class TemplateAnalysisTests {
 
   color:
     block-a.root (blocks/foo.block.css:3:36)
+    block-b.root (blocks/b.block.css:1:30)
     block-b.root (blocks/b.block.css:1:43)`,
 
       this.parseBlock(css, "blocks/foo.block.css", reader).then(([block, _]) => {