feat: Add preprocessor support to the cli.

Author: chriseppstein

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

@@ -44,7 +44,9 @@
   },
   "devDependencies": {
     "@css-blocks/code-style": "^0.21.0",
+    "@types/node-sass": "^4.11.0",
     "@types/yargs": "^13.0.0",
+    "node-sass": "^4.11.0",
     "typescript": "~3.4.4",
     "watch": "^1.0.2"
   },

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

@@ -1,4 +1,4 @@
-import { BlockFactory, CssBlockError } from "@css-blocks/core";
+import { BlockFactory, CssBlockError, Preprocessors } from "@css-blocks/core";
 import chalk = require("chalk");
 import fs = require("fs");
 import fse = require("fs-extra");
@@ -68,7 +68,7 @@ export class CLI {
   }
 
   async validate(blockFiles: Array<string>, options: ValidateOptions) {
-    let preprocessors = options.preprocessors ? require(options.preprocessors) : {};
+    let preprocessors: Preprocessors = options.preprocessors ? require(path.resolve(options.preprocessors)) : {};
     let factory = new BlockFactory({preprocessors});
     let errorCount = 0;
     for (let blockFile of blockFiles) {

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

@@ -7,17 +7,36 @@ function fixture(...relativePathSegments: Array<string>): string {
   return path.resolve(__dirname, "..", "..", "test", "fixtures", ...relativePathSegments);
 }
 
-describe("CLI", () => {
+function distFile(...relativePathSegments: Array<string>): string {
+  return path.resolve(__dirname, "..", ...relativePathSegments);
+}
+
+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.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.exitCode, 1);
+  });
+});
+
+describe("validate with preprocessors", () => {
   it("can check syntax for a valid block file", async () => {
     let cli = new CLI();
-    await cli.run(["validate", fixture("simple.block.css")]);
-    assert.equal(cli.output, `ok\t${fixture("simple.block.css")}\n`);
+    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.exitCode, 0);
   });
   it("can check syntax for a bad block file", async () => {
     let cli = new CLI();
-    await cli.run(["validate", fixture("error.block.css")]);
-    assert.equal(cli.output, `error\t${fixture("error.block.css")}:1:5 Two distinct classes cannot be selected on the same element: .foo.bar\n`);
+    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.exitCode, 1);
   });
 });

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

@@ -0,0 +1,6 @@
+.foo {
+  color: red;
+  &.bar {
+    color: blue;
+  }
+}

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

@@ -0,0 +1,9 @@
+:scope {
+  color: red;
+  background-color: white;
+
+  &[state|dark] {
+    color: darkred;
+    background-color: gray;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Preprocessors } from "@css-blocks/core";
+import sass = require("node-sass");
+
+const scss: Preprocessors["scss"] = async (fullPath, content, _configuration, _sourceMap) => {
+  return new Promise((resolve, reject) => {
+    sass.render(
+      {
+        file: fullPath,
+        outFile: fullPath.replace("scss", "css"),
+        data: content,
+        sourceMap: true,
+        outputStyle: "expanded",
+        indentedSyntax: false,
+      },
+      (err, result) => {
+        if (err) {
+          reject(err);
+        } else {
+          let resolvedFile = {
+            content: result.css.toString(),
+            sourceMap: result.map.toString(),
+            dependencies: result.stats.includedFiles,
+          };
+          resolve(resolvedFile);
+        }
+      },
+    );
+  });
+};
+const preprocessors: Preprocessors = { scss };
+
+module.exports = preprocessors;

packages/@css-blocks/cli/test/fixtures/scss/simple.block.scss

@@ -3,7 +3,10 @@
   "compilerOptions": {
     "composite": true,
     "outDir": "dist",
-    "baseUrl": "dist"
+    "baseUrl": "dist",
+    "paths": {
+      "sass": ["../../../node_modules/@types/node-sass"]
+    }
   },
   "references": [
     {"path": "../core"}