feat: Imports via npm and aliases.

Author: chriseppstein

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

@@ -1,6 +1,7 @@
 # CSS Blocks Command Line Interface
 
-The css-blocks Rewriter and Analyzer for Glimmer templates.
+A simple interface for working with CSS Blocks.
+Not meant to replace a proper build tool integration.
 
 ## Installation
 
@@ -17,14 +18,16 @@ npx @css-blocks/cli validate blocks/*.block.css
 ## Usage
 
 ```
-css-blocks <cmd> [options] <blocks..>
+css-blocks <cmd> [options] block-dir-or-file...
 
 Commands:
   css-blocks validate <blocks..>  Validate block file syntax.
 
 Options:
-  --version        Show version number                                 [boolean]
-  --preprocessors  A JS file that exports an object that maps extensions to a
-                   preprocessor function for that type.                 [string]
-  --help           Show help                                           [boolean]
+  --version        Show version number
+  --preprocessors  A JS file that exports an object that maps extensions to a preprocessor function for that type.
+  --npm            Allow importing from node_modules
+  --alias          Define an import alias. Requires two arguments: an alias and a directory.
+  --help           Show help
+
 ```

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

@@ -1,14 +1,18 @@
-import { BlockFactory, CssBlockError, Preprocessors } from "@css-blocks/core";
+import { BlockFactory, CssBlockError, Importer, NodeJsImporter, Preprocessors } from "@css-blocks/core";
 import chalk = require("chalk");
 import fse = require("fs-extra");
 import path = require("path");
 import yargs = require("yargs");
 
+type Aliases = ConstructorParameters<typeof NodeJsImporter>[0];
+
 /**
  * Typecast for result of command line argument parsing.
  */
 interface GlobalArgs {
   preprocessors: string | undefined;
+  alias: Array<string | number> | undefined;
+  npm: boolean | undefined;
   [k: string]: unknown;
 }
 
@@ -24,6 +28,8 @@ interface ValidateOptions {
    * A path to the preprocessors code.
    */
   preprocessors?: string;
+  alias?: Array<string | number>;
+  npm?: boolean;
 }
 
 export class CLI {
@@ -64,19 +70,35 @@ export class CLI {
         description: "A JS file that exports an object that maps extensions to a preprocessor function for that type.",
         nargs: 1,
       })
+      .option("npm", {
+        type: "boolean",
+        global: true,
+        description: "Allow importing from node_modules",
+        nargs: 0,
+      })
+      .option("alias", {
+        type: "array",
+        global: true,
+        description: "Define an import alias. Requires two arguments: an alias and a directory.",
+        implies: "npm",
+        nargs: 2,
+      })
       .command<ValidateArgs>(
         "validate <blocks..>",
         "Validate block file syntax.", (y) =>
           y.positional("blocks", {
             description: "files or directories containing css blocks.",
           }),
         (argv: ValidateArgs) => {
-          let { preprocessors } = argv;
+          let { preprocessors, alias, npm } = argv;
           argv.promise = this.validate(argv.blocks as Array<string>, {
             preprocessors,
+            alias,
+            npm,
           });
         },
       )
+      .wrap(yargs.terminalWidth())
       .demandCommand(1, "No command was provided.")
       .help();
   }
@@ -86,11 +108,27 @@ export class CLI {
    */
   async validate(blockFiles: Array<string>, options: ValidateOptions) {
     let preprocessors: Preprocessors = options.preprocessors ? require(path.resolve(options.preprocessors)) : {};
-    let factory = new BlockFactory({preprocessors});
+    let npm = options.npm || false;
+    let aliases: Aliases = [];
+    let aliasList = options.alias || [];
+    for (let i = 0; i < aliasList.length; i = i + 2) {
+      let alias = aliasList[i].toString();
+      let dir = path.resolve(aliasList[i + 1].toString());
+      aliases.push({alias, path: dir});
+    }
+    let importer: Importer | undefined;
+    if (npm) {
+      importer = new NodeJsImporter(aliases);
+    }
+    let factory = new BlockFactory({preprocessors, importer});
     let errorCount = 0;
     for (let blockFile of blockFiles) {
       try {
-        await factory.getBlockFromPath(path.resolve(blockFile));
+        if (importer) {
+          let ident = importer.identifier(null, blockFile, factory.configuration);
+          blockFile = importer.filesystemPath(ident, factory.configuration) || blockFile;
+        }
+        await factory.getBlockFromPath(blockFile);
         // if the above line doesn't throw then there wasn't a syntax error.
         this.println(`${this.chalk.green("ok")}\t${path.relative(process.cwd(), path.resolve(blockFile))}`);
       } catch (e) {

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

@@ -1,5 +1,6 @@
 import assert = require("assert");
 import path = require("path");
+import { chdir, cwd } from "process";
 
 import { TestCLI as CLI } from "./TestCLI";
 
@@ -14,7 +15,11 @@ function distFile(...relativePathSegments: Array<string>): string {
   return path.resolve(__dirname, "..", ...relativePathSegments);
 }
 
+const WORKING_DIR = cwd();
 describe("validate", () => {
+  afterEach(() => {
+    chdir(WORKING_DIR);
+  });
   it("can check syntax for a valid block file", async () => {
     let cli = new CLI();
     await cli.run(["validate", fixture("basic/simple.block.css")]);
@@ -33,6 +38,20 @@ describe("validate", () => {
     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("can import from node_modules", async () => {
+    chdir(fixture("importing"));
+    let cli = new CLI();
+    await cli.run(["validate", "--npm", "npm.block.css"]);
+    assert.equal(cli.output, `ok\tnpm.block.css\n`);
+    assert.equal(cli.exitCode, 0);
+  });
+  it("can import with aliases", async () => {
+    chdir(fixture("importing"));
+    let cli = new CLI();
+    await cli.run(["validate", "--npm", "--alias", "basic", "../basic", "alias.block.css"]);
+    assert.equal(cli.output, `ok\talias.block.css\n`);
+    assert.equal(cli.exitCode, 0);
+  });
 });
 
 describe("validate with preprocessors", () => {

packages/@css-blocks/cli/test/fixtures/.gitignore

@@ -0,0 +1 @@
+!node_modules

packages/@css-blocks/cli/test/fixtures/importing/alias.block.css

@@ -0,0 +1,6 @@
+@block red from "basic/simple.block.css";
+
+:scope {
+  font-family: resolve("red");
+  color: blue;
+}

packages/@css-blocks/cli/test/fixtures/importing/node_modules/block-module/blocks/font.block.css

@@ -0,0 +1,6 @@
+@block font from "block-module";
+
+:scope {
+  font-family: resolve("font");
+  font-family: serif;
+}