fix: Display the file where the error occurred.

Author: chriseppstein

packages/@css-blocks/cli/README.md

@@ -11,7 +11,7 @@ yarn add @css-blocks/cli
 or run without installation:
 
 ```
-npx @css-blocks/cli --validate blocks/*.block.css
+npx @css-blocks/cli validate blocks/*.block.css
 ```
 
 ## Usage

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

@@ -8,7 +8,7 @@
     "dist",
     "src",
     "README.md",
-    "types-local"
+    "CHANGELOG.md"
   ],
   "scripts": {
     "test": "yarn run test:runner",

packages/@css-blocks/cli/src/index.ts

@@ -74,16 +74,18 @@ export class CLI {
     for (let blockFile of blockFiles) {
       try {
         await factory.getBlockFromPath(path.resolve(blockFile));
-        this.println(`${this.chalk.green("ok")}\t${blockFile}`);
+        this.println(`${this.chalk.green("ok")}\t${path.relative(process.cwd(), path.resolve(blockFile))}`);
       } catch (e) {
         errorCount++;
         if (e instanceof CssBlockError) {
           let loc = e.location;
-          if (loc) {
-            this.println(`${this.chalk.red("error")}\t${this.chalk.whiteBright(blockFile)}:${loc.line}:${loc.column} ${e.origMessage}`);
-          } else {
-            this.println(`${this.chalk.red("error")}\t${this.chalk.whiteBright(blockFile)} ${e.origMessage}`);
+          let filename = path.relative(process.cwd(), path.resolve(loc && loc.filename || blockFile));
+          let message = `${this.chalk.red("error")}\t${this.chalk.whiteBright(filename)}`;
+          if (loc && loc.filename && loc.line && loc.column) {
+            message += `:${loc.line}:${loc.column}`;
           }
+          message += ` ${e.origMessage}`;
+          this.println(message);
         } else {
           console.error(e);
         }
@@ -93,6 +95,7 @@ export class CLI {
   }
 
   println(...args: Array<string>) {
+    // tslint:disable-next-line:no-console
     console.log(...args);
   }
 

packages/@css-blocks/cli/test/cli-test.ts

@@ -6,6 +6,9 @@ import { TestCLI as CLI } from "./TestCLI";
 function fixture(...relativePathSegments: Array<string>): string {
   return path.resolve(__dirname, "..", "..", "test", "fixtures", ...relativePathSegments);
 }
+function relFixture(...relativePathSegments: Array<string>): string {
+  return path.relative(process.cwd(), fixture(...relativePathSegments));
+}
 
 function distFile(...relativePathSegments: Array<string>): string {
   return path.resolve(__dirname, "..", ...relativePathSegments);
@@ -15,13 +18,19 @@ describe("validate", () => {
   it("can check syntax for a valid block file", async () => {
     let cli = new CLI();
     await cli.run(["validate", fixture("basic/simple.block.css")]);
-    assert.equal(cli.output, `ok\t${fixture("basic/simple.block.css")}\n`);
+    assert.equal(cli.output, `ok\t${relFixture("basic/simple.block.css")}\n`);
     assert.equal(cli.exitCode, 0);
   });
   it("can check syntax for a bad block file", async () => {
     let cli = new CLI();
     await cli.run(["validate", fixture("basic/error.block.css")]);
-    assert.equal(cli.output, `error\t${fixture("basic/error.block.css")}:1:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
+    assert.equal(cli.output, `error\t${relFixture("basic/error.block.css")}:1:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
+    assert.equal(cli.exitCode, 1);
+  });
+  it("correctly displays errors in referenced blocks.", async () => {
+    let cli = new CLI();
+    await cli.run(["validate", fixture("basic/transitive-error.block.css")]);
+    assert.equal(cli.output, `error\t${relFixture("basic/error.block.css")}:1:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
     assert.equal(cli.exitCode, 1);
   });
 });
@@ -30,13 +39,13 @@ describe("validate with preprocessors", () => {
   it("can check syntax for a valid block file", async () => {
     let cli = new CLI();
     await cli.run(["validate", "--preprocessors", distFile("test/preprocessors"), fixture("scss/simple.block.scss")]);
-    assert.equal(cli.output, `ok\t${fixture("scss/simple.block.scss")}\n`);
+    assert.equal(cli.output, `ok\t${relFixture("scss/simple.block.scss")}\n`);
     assert.equal(cli.exitCode, 0);
   });
   it("can check syntax for a bad block file", async () => {
     let cli = new CLI();
     await cli.run(["validate", "--preprocessors", distFile("test/preprocessors"), fixture("scss/error.block.scss")]);
-    assert.equal(cli.output, `error\t${fixture("scss/error.block.scss")}:5:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
+    assert.equal(cli.output, `error\t${relFixture("scss/error.block.scss")}:5:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
     assert.equal(cli.exitCode, 1);
   });
 });

packages/@css-blocks/cli/test/fixtures/basic/transitive-error.block.css

@@ -0,0 +1,5 @@
+@block error from "./error.block.css";
+
+:scope {
+  extends: error;
+}